LinesView.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  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 _config = require("../../config");
  20. var __DEV__ = _config.__DEV__;
  21. var echarts = require("../../echarts");
  22. var LineDraw = require("../helper/LineDraw");
  23. var EffectLine = require("../helper/EffectLine");
  24. var Line = require("../helper/Line");
  25. var Polyline = require("../helper/Polyline");
  26. var EffectPolyline = require("../helper/EffectPolyline");
  27. var LargeLineDraw = require("../helper/LargeLineDraw");
  28. var linesLayout = require("./linesLayout");
  29. var _createClipPathFromCoordSys = require("../helper/createClipPathFromCoordSys");
  30. var createClipPath = _createClipPathFromCoordSys.createClipPath;
  31. /*
  32. * Licensed to the Apache Software Foundation (ASF) under one
  33. * or more contributor license agreements. See the NOTICE file
  34. * distributed with this work for additional information
  35. * regarding copyright ownership. The ASF licenses this file
  36. * to you under the Apache License, Version 2.0 (the
  37. * "License"); you may not use this file except in compliance
  38. * with the License. You may obtain a copy of the License at
  39. *
  40. * http://www.apache.org/licenses/LICENSE-2.0
  41. *
  42. * Unless required by applicable law or agreed to in writing,
  43. * software distributed under the License is distributed on an
  44. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  45. * KIND, either express or implied. See the License for the
  46. * specific language governing permissions and limitations
  47. * under the License.
  48. */
  49. var _default = echarts.extendChartView({
  50. type: 'lines',
  51. init: function () {},
  52. render: function (seriesModel, ecModel, api) {
  53. var data = seriesModel.getData();
  54. var lineDraw = this._updateLineDraw(data, seriesModel);
  55. var zlevel = seriesModel.get('zlevel');
  56. var trailLength = seriesModel.get('effect.trailLength');
  57. var zr = api.getZr(); // Avoid the drag cause ghost shadow
  58. // FIXME Better way ?
  59. // SVG doesn't support
  60. var isSvg = zr.painter.getType() === 'svg';
  61. if (!isSvg) {
  62. zr.painter.getLayer(zlevel).clear(true);
  63. } // Config layer with motion blur
  64. if (this._lastZlevel != null && !isSvg) {
  65. zr.configLayer(this._lastZlevel, {
  66. motionBlur: false
  67. });
  68. }
  69. if (this._showEffect(seriesModel) && trailLength) {
  70. if (!isSvg) {
  71. zr.configLayer(zlevel, {
  72. motionBlur: true,
  73. lastFrameAlpha: Math.max(Math.min(trailLength / 10 + 0.9, 1), 0)
  74. });
  75. }
  76. }
  77. lineDraw.updateData(data);
  78. var clipPath = seriesModel.get('clip', true) && createClipPath(seriesModel.coordinateSystem, false, seriesModel);
  79. if (clipPath) {
  80. this.group.setClipPath(clipPath);
  81. } else {
  82. this.group.removeClipPath();
  83. }
  84. this._lastZlevel = zlevel;
  85. this._finished = true;
  86. },
  87. incrementalPrepareRender: function (seriesModel, ecModel, api) {
  88. var data = seriesModel.getData();
  89. var lineDraw = this._updateLineDraw(data, seriesModel);
  90. lineDraw.incrementalPrepareUpdate(data);
  91. this._clearLayer(api);
  92. this._finished = false;
  93. },
  94. incrementalRender: function (taskParams, seriesModel, ecModel) {
  95. this._lineDraw.incrementalUpdate(taskParams, seriesModel.getData());
  96. this._finished = taskParams.end === seriesModel.getData().count();
  97. },
  98. updateTransform: function (seriesModel, ecModel, api) {
  99. var data = seriesModel.getData();
  100. var pipelineContext = seriesModel.pipelineContext;
  101. if (!this._finished || pipelineContext.large || pipelineContext.progressiveRender) {
  102. // TODO Don't have to do update in large mode. Only do it when there are millions of data.
  103. return {
  104. update: true
  105. };
  106. } else {
  107. // TODO Use same logic with ScatterView.
  108. // Manually update layout
  109. var res = linesLayout.reset(seriesModel);
  110. if (res.progress) {
  111. res.progress({
  112. start: 0,
  113. end: data.count()
  114. }, data);
  115. }
  116. this._lineDraw.updateLayout();
  117. this._clearLayer(api);
  118. }
  119. },
  120. _updateLineDraw: function (data, seriesModel) {
  121. var lineDraw = this._lineDraw;
  122. var hasEffect = this._showEffect(seriesModel);
  123. var isPolyline = !!seriesModel.get('polyline');
  124. var pipelineContext = seriesModel.pipelineContext;
  125. var isLargeDraw = pipelineContext.large;
  126. if (!lineDraw || hasEffect !== this._hasEffet || isPolyline !== this._isPolyline || isLargeDraw !== this._isLargeDraw) {
  127. if (lineDraw) {
  128. lineDraw.remove();
  129. }
  130. lineDraw = this._lineDraw = isLargeDraw ? new LargeLineDraw() : new LineDraw(isPolyline ? hasEffect ? EffectPolyline : Polyline : hasEffect ? EffectLine : Line);
  131. this._hasEffet = hasEffect;
  132. this._isPolyline = isPolyline;
  133. this._isLargeDraw = isLargeDraw;
  134. this.group.removeAll();
  135. }
  136. this.group.add(lineDraw.group);
  137. return lineDraw;
  138. },
  139. _showEffect: function (seriesModel) {
  140. return !!seriesModel.get('effect.show');
  141. },
  142. _clearLayer: function (api) {
  143. // Not use motion when dragging or zooming
  144. var zr = api.getZr();
  145. var isSvg = zr.painter.getType() === 'svg';
  146. if (!isSvg && this._lastZlevel != null) {
  147. zr.painter.getLayer(this._lastZlevel).clear(true);
  148. }
  149. },
  150. remove: function (ecModel, api) {
  151. this._lineDraw && this._lineDraw.remove();
  152. this._lineDraw = null; // Clear motion when lineDraw is removed
  153. this._clearLayer(api);
  154. },
  155. dispose: function () {}
  156. });
  157. module.exports = _default;