ParallelView.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. var graphic = require("../../util/graphic");
  2. var zrUtil = require("zrender/lib/core/util");
  3. var ChartView = require("../../view/Chart");
  4. var SMOOTH = 0.3;
  5. var ParallelView = ChartView.extend({
  6. type: 'parallel',
  7. init: function () {
  8. /**
  9. * @type {module:zrender/container/Group}
  10. * @private
  11. */
  12. this._dataGroup = new graphic.Group();
  13. this.group.add(this._dataGroup);
  14. /**
  15. * @type {module:echarts/data/List}
  16. */
  17. this._data;
  18. },
  19. /**
  20. * @override
  21. */
  22. render: function (seriesModel, ecModel, api, payload) {
  23. this._renderForNormal(seriesModel, payload); // this[
  24. // seriesModel.option.progressive
  25. // ? '_renderForProgressive'
  26. // : '_renderForNormal'
  27. // ](seriesModel);
  28. },
  29. dispose: function () {},
  30. /**
  31. * @private
  32. */
  33. _renderForNormal: function (seriesModel, payload) {
  34. var dataGroup = this._dataGroup;
  35. var data = seriesModel.getData();
  36. var oldData = this._data;
  37. var coordSys = seriesModel.coordinateSystem;
  38. var dimensions = coordSys.dimensions;
  39. var option = seriesModel.option;
  40. var smooth = option.smooth ? SMOOTH : null; // Consider switch between progressive and not.
  41. // oldData && oldData.__plProgressive && dataGroup.removeAll();
  42. data.diff(oldData).add(add).update(update).remove(remove).execute(); // Update style
  43. updateElCommon(data, smooth); // First create
  44. if (!this._data) {
  45. var clipPath = createGridClipShape(coordSys, seriesModel, function () {
  46. // Callback will be invoked immediately if there is no animation
  47. setTimeout(function () {
  48. dataGroup.removeClipPath();
  49. });
  50. });
  51. dataGroup.setClipPath(clipPath);
  52. }
  53. this._data = data;
  54. function add(newDataIndex) {
  55. addEl(data, dataGroup, newDataIndex, dimensions, coordSys, null, smooth);
  56. }
  57. function update(newDataIndex, oldDataIndex) {
  58. var line = oldData.getItemGraphicEl(oldDataIndex);
  59. var points = createLinePoints(data, newDataIndex, dimensions, coordSys);
  60. data.setItemGraphicEl(newDataIndex, line);
  61. var animationModel = payload && payload.animation === false ? null : seriesModel;
  62. graphic.updateProps(line, {
  63. shape: {
  64. points: points
  65. }
  66. }, animationModel, newDataIndex);
  67. }
  68. function remove(oldDataIndex) {
  69. var line = oldData.getItemGraphicEl(oldDataIndex);
  70. dataGroup.remove(line);
  71. }
  72. },
  73. /**
  74. * @private
  75. */
  76. // _renderForProgressive: function (seriesModel) {
  77. // var dataGroup = this._dataGroup;
  78. // var data = seriesModel.getData();
  79. // var oldData = this._data;
  80. // var coordSys = seriesModel.coordinateSystem;
  81. // var dimensions = coordSys.dimensions;
  82. // var option = seriesModel.option;
  83. // var progressive = option.progressive;
  84. // var smooth = option.smooth ? SMOOTH : null;
  85. // // In progressive animation is disabled, so use simple data diff,
  86. // // which effects performance less.
  87. // // (Typically performance for data with length 7000+ like:
  88. // // simpleDiff: 60ms, addEl: 184ms,
  89. // // in RMBP 2.4GHz intel i7, OSX 10.9 chrome 50.0.2661.102 (64-bit))
  90. // if (simpleDiff(oldData, data, dimensions)) {
  91. // dataGroup.removeAll();
  92. // data.each(function (dataIndex) {
  93. // addEl(data, dataGroup, dataIndex, dimensions, coordSys);
  94. // });
  95. // }
  96. // updateElCommon(data, progressive, smooth);
  97. // // Consider switch between progressive and not.
  98. // data.__plProgressive = true;
  99. // this._data = data;
  100. // },
  101. /**
  102. * @override
  103. */
  104. remove: function () {
  105. this._dataGroup && this._dataGroup.removeAll();
  106. this._data = null;
  107. }
  108. });
  109. function createGridClipShape(coordSys, seriesModel, cb) {
  110. var parallelModel = coordSys.model;
  111. var rect = coordSys.getRect();
  112. var rectEl = new graphic.Rect({
  113. shape: {
  114. x: rect.x,
  115. y: rect.y,
  116. width: rect.width,
  117. height: rect.height
  118. }
  119. });
  120. var dim = parallelModel.get('layout') === 'horizontal' ? 'width' : 'height';
  121. rectEl.setShape(dim, 0);
  122. graphic.initProps(rectEl, {
  123. shape: {
  124. width: rect.width,
  125. height: rect.height
  126. }
  127. }, seriesModel, cb);
  128. return rectEl;
  129. }
  130. function createLinePoints(data, dataIndex, dimensions, coordSys) {
  131. var points = [];
  132. for (var i = 0; i < dimensions.length; i++) {
  133. var dimName = dimensions[i];
  134. var value = data.get(dimName, dataIndex);
  135. if (!isEmptyValue(value, coordSys.getAxis(dimName).type)) {
  136. points.push(coordSys.dataToPoint(value, dimName));
  137. }
  138. }
  139. return points;
  140. }
  141. function addEl(data, dataGroup, dataIndex, dimensions, coordSys) {
  142. var points = createLinePoints(data, dataIndex, dimensions, coordSys);
  143. var line = new graphic.Polyline({
  144. shape: {
  145. points: points
  146. },
  147. silent: true,
  148. z2: 10
  149. });
  150. dataGroup.add(line);
  151. data.setItemGraphicEl(dataIndex, line);
  152. }
  153. function updateElCommon(data, smooth) {
  154. var seriesStyleModel = data.hostModel.getModel('lineStyle.normal');
  155. var lineStyle = seriesStyleModel.getLineStyle();
  156. data.eachItemGraphicEl(function (line, dataIndex) {
  157. if (data.hasItemOption) {
  158. var itemModel = data.getItemModel(dataIndex);
  159. var lineStyleModel = itemModel.getModel('lineStyle.normal', seriesStyleModel);
  160. lineStyle = lineStyleModel.getLineStyle(['color', 'stroke']);
  161. }
  162. line.useStyle(zrUtil.extend(lineStyle, {
  163. fill: null,
  164. // lineStyle.color have been set to itemVisual in module:echarts/visual/seriesColor.
  165. stroke: data.getItemVisual(dataIndex, 'color'),
  166. // lineStyle.opacity have been set to itemVisual in parallelVisual.
  167. opacity: data.getItemVisual(dataIndex, 'opacity')
  168. }));
  169. line.shape.smooth = smooth;
  170. });
  171. } // function simpleDiff(oldData, newData, dimensions) {
  172. // var oldLen;
  173. // if (!oldData
  174. // || !oldData.__plProgressive
  175. // || (oldLen = oldData.count()) !== newData.count()
  176. // ) {
  177. // return true;
  178. // }
  179. // var dimLen = dimensions.length;
  180. // for (var i = 0; i < oldLen; i++) {
  181. // for (var j = 0; j < dimLen; j++) {
  182. // if (oldData.get(dimensions[j], i) !== newData.get(dimensions[j], i)) {
  183. // return true;
  184. // }
  185. // }
  186. // }
  187. // return false;
  188. // }
  189. // FIXME
  190. // 公用方法?
  191. function isEmptyValue(val, axisType) {
  192. return axisType === 'category' ? val == null : val == null || isNaN(val); // axisType === 'value'
  193. }
  194. var _default = ParallelView;
  195. module.exports = _default;