ParallelView.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. var graphic = require("../../util/graphic");
  20. var ChartView = require("../../view/Chart");
  21. /*
  22. * Licensed to the Apache Software Foundation (ASF) under one
  23. * or more contributor license agreements. See the NOTICE file
  24. * distributed with this work for additional information
  25. * regarding copyright ownership. The ASF licenses this file
  26. * to you under the Apache License, Version 2.0 (the
  27. * "License"); you may not use this file except in compliance
  28. * with the License. You may obtain a copy of the License at
  29. *
  30. * http://www.apache.org/licenses/LICENSE-2.0
  31. *
  32. * Unless required by applicable law or agreed to in writing,
  33. * software distributed under the License is distributed on an
  34. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  35. * KIND, either express or implied. See the License for the
  36. * specific language governing permissions and limitations
  37. * under the License.
  38. */
  39. var DEFAULT_SMOOTH = 0.3;
  40. var ParallelView = ChartView.extend({
  41. type: 'parallel',
  42. init: function () {
  43. /**
  44. * @type {module:zrender/container/Group}
  45. * @private
  46. */
  47. this._dataGroup = new graphic.Group();
  48. this.group.add(this._dataGroup);
  49. /**
  50. * @type {module:echarts/data/List}
  51. */
  52. this._data;
  53. /**
  54. * @type {boolean}
  55. */
  56. this._initialized;
  57. },
  58. /**
  59. * @override
  60. */
  61. render: function (seriesModel, ecModel, api, payload) {
  62. var dataGroup = this._dataGroup;
  63. var data = seriesModel.getData();
  64. var oldData = this._data;
  65. var coordSys = seriesModel.coordinateSystem;
  66. var dimensions = coordSys.dimensions;
  67. var seriesScope = makeSeriesScope(seriesModel);
  68. data.diff(oldData).add(add).update(update).remove(remove).execute();
  69. function add(newDataIndex) {
  70. var line = addEl(data, dataGroup, newDataIndex, dimensions, coordSys);
  71. updateElCommon(line, data, newDataIndex, seriesScope);
  72. }
  73. function update(newDataIndex, oldDataIndex) {
  74. var line = oldData.getItemGraphicEl(oldDataIndex);
  75. var points = createLinePoints(data, newDataIndex, dimensions, coordSys);
  76. data.setItemGraphicEl(newDataIndex, line);
  77. var animationModel = payload && payload.animation === false ? null : seriesModel;
  78. graphic.updateProps(line, {
  79. shape: {
  80. points: points
  81. }
  82. }, animationModel, newDataIndex);
  83. updateElCommon(line, data, newDataIndex, seriesScope);
  84. }
  85. function remove(oldDataIndex) {
  86. var line = oldData.getItemGraphicEl(oldDataIndex);
  87. dataGroup.remove(line);
  88. } // First create
  89. if (!this._initialized) {
  90. this._initialized = true;
  91. var clipPath = createGridClipShape(coordSys, seriesModel, function () {
  92. // Callback will be invoked immediately if there is no animation
  93. setTimeout(function () {
  94. dataGroup.removeClipPath();
  95. });
  96. });
  97. dataGroup.setClipPath(clipPath);
  98. }
  99. this._data = data;
  100. },
  101. incrementalPrepareRender: function (seriesModel, ecModel, api) {
  102. this._initialized = true;
  103. this._data = null;
  104. this._dataGroup.removeAll();
  105. },
  106. incrementalRender: function (taskParams, seriesModel, ecModel) {
  107. var data = seriesModel.getData();
  108. var coordSys = seriesModel.coordinateSystem;
  109. var dimensions = coordSys.dimensions;
  110. var seriesScope = makeSeriesScope(seriesModel);
  111. for (var dataIndex = taskParams.start; dataIndex < taskParams.end; dataIndex++) {
  112. var line = addEl(data, this._dataGroup, dataIndex, dimensions, coordSys);
  113. line.incremental = true;
  114. updateElCommon(line, data, dataIndex, seriesScope);
  115. }
  116. },
  117. dispose: function () {},
  118. // _renderForProgressive: function (seriesModel) {
  119. // var dataGroup = this._dataGroup;
  120. // var data = seriesModel.getData();
  121. // var oldData = this._data;
  122. // var coordSys = seriesModel.coordinateSystem;
  123. // var dimensions = coordSys.dimensions;
  124. // var option = seriesModel.option;
  125. // var progressive = option.progressive;
  126. // var smooth = option.smooth ? SMOOTH : null;
  127. // // In progressive animation is disabled, so use simple data diff,
  128. // // which effects performance less.
  129. // // (Typically performance for data with length 7000+ like:
  130. // // simpleDiff: 60ms, addEl: 184ms,
  131. // // in RMBP 2.4GHz intel i7, OSX 10.9 chrome 50.0.2661.102 (64-bit))
  132. // if (simpleDiff(oldData, data, dimensions)) {
  133. // dataGroup.removeAll();
  134. // data.each(function (dataIndex) {
  135. // addEl(data, dataGroup, dataIndex, dimensions, coordSys);
  136. // });
  137. // }
  138. // updateElCommon(data, progressive, smooth);
  139. // // Consider switch between progressive and not.
  140. // data.__plProgressive = true;
  141. // this._data = data;
  142. // },
  143. /**
  144. * @override
  145. */
  146. remove: function () {
  147. this._dataGroup && this._dataGroup.removeAll();
  148. this._data = null;
  149. }
  150. });
  151. function createGridClipShape(coordSys, seriesModel, cb) {
  152. var parallelModel = coordSys.model;
  153. var rect = coordSys.getRect();
  154. var rectEl = new graphic.Rect({
  155. shape: {
  156. x: rect.x,
  157. y: rect.y,
  158. width: rect.width,
  159. height: rect.height
  160. }
  161. });
  162. var dim = parallelModel.get('layout') === 'horizontal' ? 'width' : 'height';
  163. rectEl.setShape(dim, 0);
  164. graphic.initProps(rectEl, {
  165. shape: {
  166. width: rect.width,
  167. height: rect.height
  168. }
  169. }, seriesModel, cb);
  170. return rectEl;
  171. }
  172. function createLinePoints(data, dataIndex, dimensions, coordSys) {
  173. var points = [];
  174. for (var i = 0; i < dimensions.length; i++) {
  175. var dimName = dimensions[i];
  176. var value = data.get(data.mapDimension(dimName), dataIndex);
  177. if (!isEmptyValue(value, coordSys.getAxis(dimName).type)) {
  178. points.push(coordSys.dataToPoint(value, dimName));
  179. }
  180. }
  181. return points;
  182. }
  183. function addEl(data, dataGroup, dataIndex, dimensions, coordSys) {
  184. var points = createLinePoints(data, dataIndex, dimensions, coordSys);
  185. var line = new graphic.Polyline({
  186. shape: {
  187. points: points
  188. },
  189. silent: true,
  190. z2: 10
  191. });
  192. dataGroup.add(line);
  193. data.setItemGraphicEl(dataIndex, line);
  194. return line;
  195. }
  196. function makeSeriesScope(seriesModel) {
  197. var smooth = seriesModel.get('smooth', true);
  198. smooth === true && (smooth = DEFAULT_SMOOTH);
  199. return {
  200. lineStyle: seriesModel.getModel('lineStyle').getLineStyle(),
  201. smooth: smooth != null ? smooth : DEFAULT_SMOOTH
  202. };
  203. }
  204. function updateElCommon(el, data, dataIndex, seriesScope) {
  205. var lineStyle = seriesScope.lineStyle;
  206. if (data.hasItemOption) {
  207. var lineStyleModel = data.getItemModel(dataIndex).getModel('lineStyle');
  208. lineStyle = lineStyleModel.getLineStyle();
  209. }
  210. el.useStyle(lineStyle);
  211. var elStyle = el.style;
  212. elStyle.fill = null; // lineStyle.color have been set to itemVisual in module:echarts/visual/seriesColor.
  213. elStyle.stroke = data.getItemVisual(dataIndex, 'color'); // lineStyle.opacity have been set to itemVisual in parallelVisual.
  214. elStyle.opacity = data.getItemVisual(dataIndex, 'opacity');
  215. seriesScope.smooth && (el.shape.smooth = seriesScope.smooth);
  216. } // function simpleDiff(oldData, newData, dimensions) {
  217. // var oldLen;
  218. // if (!oldData
  219. // || !oldData.__plProgressive
  220. // || (oldLen = oldData.count()) !== newData.count()
  221. // ) {
  222. // return true;
  223. // }
  224. // var dimLen = dimensions.length;
  225. // for (var i = 0; i < oldLen; i++) {
  226. // for (var j = 0; j < dimLen; j++) {
  227. // if (oldData.get(dimensions[j], i) !== newData.get(dimensions[j], i)) {
  228. // return true;
  229. // }
  230. // }
  231. // }
  232. // return false;
  233. // }
  234. // FIXME
  235. // 公用方法?
  236. function isEmptyValue(val, axisType) {
  237. return axisType === 'category' ? val == null : val == null || isNaN(val); // axisType === 'value'
  238. }
  239. var _default = ParallelView;
  240. module.exports = _default;