echarts 4.5.0 → 4.9.0

package/lib/chart/funnel/funnelLayout.js

@@ -18,6 +18,10 @@
 * under the License.
 */
 
+var _config = require("../../config");
+
+var __DEV__ = _config.__DEV__;
+
 var layout = require("../../util/layout");
 
 var _number = require("../../util/number");
@@ -79,6 +83,7 @@ function labelLayout(data) {
     var itemModel = data.getItemModel(idx);
     var labelModel = itemModel.getModel('label');
     var labelPosition = labelModel.get('position');
+    var orient = itemModel.get('orient');
     var labelLineModel = itemModel.getModel('labelLine');
     var layout = data.getItemLayout(idx);
     var points = layout.points;
@@ -108,6 +113,7 @@ function labelLayout(data) {
       var x1;
       var y1;
       var x2;
+      var y2;
       var labelLineLen = labelLineModel.get('length');
 
       if (labelPosition === 'left') {
@@ -124,46 +130,101 @@ function labelLayout(data) {
         x2 = x1 + labelLineLen;
         textX = x2 + 5;
         textAlign = 'left';
+      } else if (labelPosition === 'top') {
+        // Top side
+        x1 = (points[3][0] + points[0][0]) / 2;
+        y1 = (points[3][1] + points[0][1]) / 2;
+        y2 = y1 - labelLineLen;
+        textY = y2 - 5;
+        textAlign = 'center';
+      } else if (labelPosition === 'bottom') {
+        // Bottom side
+        x1 = (points[1][0] + points[2][0]) / 2;
+        y1 = (points[1][1] + points[2][1]) / 2;
+        y2 = y1 + labelLineLen;
+        textY = y2 + 5;
+        textAlign = 'center';
       } else if (labelPosition === 'rightTop') {
         // RightTop side
-        x1 = points[1][0];
-        y1 = points[1][1];
-        x2 = x1 + labelLineLen;
-        textX = x2 + 5;
-        textAlign = 'top';
+        x1 = orient === 'horizontal' ? points[3][0] : points[1][0];
+        y1 = orient === 'horizontal' ? points[3][1] : points[1][1];
+
+        if (orient === 'horizontal') {
+          y2 = y1 - labelLineLen;
+          textY = y2 - 5;
+          textAlign = 'center';
+        } else {
+          x2 = x1 + labelLineLen;
+          textX = x2 + 5;
+          textAlign = 'top';
+        }
       } else if (labelPosition === 'rightBottom') {
         // RightBottom side
         x1 = points[2][0];
         y1 = points[2][1];
-        x2 = x1 + labelLineLen;
-        textX = x2 + 5;
-        textAlign = 'bottom';
+
+        if (orient === 'horizontal') {
+          y2 = y1 + labelLineLen;
+          textY = y2 + 5;
+          textAlign = 'center';
+        } else {
+          x2 = x1 + labelLineLen;
+          textX = x2 + 5;
+          textAlign = 'bottom';
+        }
       } else if (labelPosition === 'leftTop') {
         // LeftTop side
         x1 = points[0][0];
-        y1 = points[1][1];
-        x2 = x1 - labelLineLen;
-        textX = x2 - 5;
-        textAlign = 'right';
+        y1 = orient === 'horizontal' ? points[0][1] : points[1][1];
+
+        if (orient === 'horizontal') {
+          y2 = y1 - labelLineLen;
+          textY = y2 - 5;
+          textAlign = 'center';
+        } else {
+          x2 = x1 - labelLineLen;
+          textX = x2 - 5;
+          textAlign = 'right';
+        }
       } else if (labelPosition === 'leftBottom') {
         // LeftBottom side
-        x1 = points[3][0];
-        y1 = points[2][1];
-        x2 = x1 - labelLineLen;
-        textX = x2 - 5;
-        textAlign = 'right';
+        x1 = orient === 'horizontal' ? points[1][0] : points[3][0];
+        y1 = orient === 'horizontal' ? points[1][1] : points[2][1];
+
+        if (orient === 'horizontal') {
+          y2 = y1 + labelLineLen;
+          textY = y2 + 5;
+          textAlign = 'center';
+        } else {
+          x2 = x1 - labelLineLen;
+          textX = x2 - 5;
+          textAlign = 'right';
+        }
       } else {
-        // Right side
+        // Right side or Bottom side
         x1 = (points[1][0] + points[2][0]) / 2;
         y1 = (points[1][1] + points[2][1]) / 2;
-        x2 = x1 + labelLineLen;
-        textX = x2 + 5;
-        textAlign = 'left';
+
+        if (orient === 'horizontal') {
+          y2 = y1 + labelLineLen;
+          textY = y2 + 5;
+          textAlign = 'center';
+        } else {
+          x2 = x1 + labelLineLen;
+          textX = x2 + 5;
+          textAlign = 'left';
+        }
+      }
+
+      if (orient === 'horizontal') {
+        x2 = x1;
+        textX = x2;
+      } else {
+        y2 = y1;
+        textY = y2;
       }
 
-      var y2 = y1;
       linePoints = [[x1, y1], [x2, y2]];
-      textY = y2;
     }
 
     layout.label = {
@@ -184,7 +245,12 @@ function _default(ecModel, api, payload) {
     var sort = seriesModel.get('sort');
     var viewRect = getViewRect(seriesModel, api);
     var indices = getSortedIndices(data, sort);
-    var sizeExtent = [parsePercent(seriesModel.get('minSize'), viewRect.width), parsePercent(seriesModel.get('maxSize'), viewRect.width)];
+    var orient = seriesModel.get('orient');
+    var viewWidth = viewRect.width;
+    var viewHeight = viewRect.height;
+    var x = viewRect.x;
+    var y = viewRect.y;
+    var sizeExtent = orient === 'horizontal' ? [parsePercent(seriesModel.get('minSize'), viewHeight), parsePercent(seriesModel.get('maxSize'), viewHeight)] : [parsePercent(seriesModel.get('minSize'), viewWidth), parsePercent(seriesModel.get('maxSize'), viewWidth)];
     var dataExtent = data.getDataExtent(valueDim);
     var min = seriesModel.get('min');
     var max = seriesModel.get('max');
@@ -199,37 +265,65 @@ function _default(ecModel, api, payload) {
 
     var funnelAlign = seriesModel.get('funnelAlign');
     var gap = seriesModel.get('gap');
-    var itemHeight = (viewRect.height - gap * (data.count() - 1)) / data.count();
-    var y = viewRect.y;
+    var viewSize = orient === 'horizontal' ? viewWidth : viewHeight;
+    var itemSize = (viewSize - gap * (data.count() - 1)) / data.count();
 
-    var getLinePoints = function (idx, offY) {
+    var getLinePoints = function (idx, offset) {
       // End point index is data.count() and we assign it 0
+      if (orient === 'horizontal') {
+        var val = data.get(valueDim, idx) || 0;
+        var itemHeight = linearMap(val, [min, max], sizeExtent, true);
+        var y0;
+
+        switch (funnelAlign) {
+          case 'top':
+            y0 = y;
+            break;
+
+          case 'center':
+            y0 = y + (viewHeight - itemHeight) / 2;
+            break;
+
+          case 'bottom':
+            y0 = y + (viewHeight - itemHeight);
+            break;
+        }
+
+        return [[offset, y0], [offset, y0 + itemHeight]];
+      }
+
       var val = data.get(valueDim, idx) || 0;
       var itemWidth = linearMap(val, [min, max], sizeExtent, true);
       var x0;
 
       switch (funnelAlign) {
         case 'left':
-          x0 = viewRect.x;
+          x0 = x;
           break;
 
         case 'center':
-          x0 = viewRect.x + (viewRect.width - itemWidth) / 2;
+          x0 = x + (viewWidth - itemWidth) / 2;
           break;
 
         case 'right':
-          x0 = viewRect.x + viewRect.width - itemWidth;
+          x0 = x + viewWidth - itemWidth;
           break;
       }
 
-      return [[x0, offY], [x0 + itemWidth, offY]];
+      return [[x0, offset], [x0 + itemWidth, offset]];
     };
 
     if (sort === 'ascending') {
       // From bottom to top
-      itemHeight = -itemHeight;
+      itemSize = -itemSize;
       gap = -gap;
-      y += viewRect.height;
+
+      if (orient === 'horizontal') {
+        x += viewWidth;
+      } else {
+        y += viewHeight;
+      }
+
       indices = indices.reverse();
     }
 
@@ -237,24 +331,46 @@ function _default(ecModel, api, payload) {
       var idx = indices[i];
       var nextIdx = indices[i + 1];
       var itemModel = data.getItemModel(idx);
-      var height = itemModel.get('itemStyle.height');
 
-      if (height == null) {
-        height = itemHeight;
+      if (orient === 'horizontal') {
+        var width = itemModel.get('itemStyle.width');
+
+        if (width == null) {
+          width = itemSize;
+        } else {
+          width = parsePercent(width, viewWidth);
+
+          if (sort === 'ascending') {
+            width = -width;
+          }
+        }
+
+        var start = getLinePoints(idx, x);
+        var end = getLinePoints(nextIdx, x + width);
+        x += width + gap;
+        data.setItemLayout(idx, {
+          points: start.concat(end.slice().reverse())
+        });
       } else {
-        height = parsePercent(height, viewRect.height);
+        var height = itemModel.get('itemStyle.height');
 
-        if (sort === 'ascending') {
-          height = -height;
+        if (height == null) {
+          height = itemSize;
+        } else {
+          height = parsePercent(height, viewHeight);
+
+          if (sort === 'ascending') {
+            height = -height;
+          }
         }
-      }
 
-      var start = getLinePoints(idx, y);
-      var end = getLinePoints(nextIdx, y + height);
-      y += height + gap;
-      data.setItemLayout(idx, {
-        points: start.concat(end.slice().reverse())
-      });
+        var start = orient === 'horizontal' ? getLinePoints(idx, x) : getLinePoints(idx, y);
+        var end = orient === 'horizontal' ? getLinePoints(nextIdx, x + width) : getLinePoints(nextIdx, y + height);
+        y += height + gap;
+        data.setItemLayout(idx, {
+          points: start.concat(end.slice().reverse())
+        });
+      }
     }
 
     labelLayout(data);

package/lib/chart/gauge/GaugeSeries.js

@@ -22,8 +22,6 @@ var createListSimply = require("../helper/createListSimply");
 
 var SeriesModel = require("../../model/Series");
 
-var zrUtil = require("zrender/lib/core/util");
-
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file

package/lib/chart/graph/GraphSeries.js

@@ -36,6 +36,13 @@ var encodeHTML = _format.encodeHTML;
 
 var createGraphFromNodeEdge = require("../helper/createGraphFromNodeEdge");
 
+var LegendVisualProvider = require("../../visual/LegendVisualProvider");
+
+var _multipleGraphEdgeHelper = require("../helper/multipleGraphEdgeHelper");
+
+var initCurvenessList = _multipleGraphEdgeHelper.initCurvenessList;
+var createEdgeMapForCurveness = _multipleGraphEdgeHelper.createEdgeMapForCurveness;
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -57,12 +64,15 @@ var createGraphFromNodeEdge = require("../helper/createGraphFromNodeEdge");
 var GraphSeries = echarts.extendSeriesModel({
   type: 'series.graph',
   init: function (option) {
-    GraphSeries.superApply(this, 'init', arguments); // Provide data for legend select
+    GraphSeries.superApply(this, 'init', arguments);
+    var self = this;
+
+    function getCategoriesData() {
+      return self._categoriesData;
+    } // Provide data for legend select
 
-    this.legendDataProvider = function () {
-      return this._categoriesData;
-    };
 
+    this.legendVisualProvider = new LegendVisualProvider(getCategoriesData, getCategoriesData);
     this.fillDataTextStyle(option.edges || option.links);
 
     this._updateCategoriesData();
@@ -83,7 +93,13 @@ var GraphSeries = echarts.extendSeriesModel({
     var self = this;
 
     if (nodes && edges) {
-      return createGraphFromNodeEdge(nodes, edges, this, true, beforeLink).data;
+      // auto curveness
+      initCurvenessList(this);
+      var graph = createGraphFromNodeEdge(nodes, edges, this, true, beforeLink);
+      zrUtil.each(graph.edges, function (edge) {
+        createEdgeMapForCurveness(edge.node1, edge.node2, this, edge.dataIndex);
+      }, this);
+      return graph.data;
     }
 
     function beforeLink(nodeData, edgeData) {
@@ -233,7 +249,8 @@ var GraphSeries = echarts.extendSeriesModel({
     edgeSymbol: ['none', 'none'],
     edgeSymbolSize: 10,
     edgeLabel: {
-      position: 'middle'
+      position: 'middle',
+      distance: 5
     },
     draggable: false,
     roam: false,
@@ -259,7 +276,6 @@ var GraphSeries = echarts.extendSeriesModel({
     lineStyle: {
       color: '#aaa',
       width: 1,
-      curveness: 0,
       opacity: 0.5
     },
     emphasis: {

package/lib/chart/graph/GraphView.js

@@ -122,6 +122,7 @@ var _default = echarts.extendChartView({
     this._firstRender = true;
   },
   render: function (seriesModel, ecModel, api) {
+    var graphView = this;
     var coordSys = seriesModel.coordinateSystem;
     this._model = seriesModel;
     var symbolDraw = this._symbolDraw;
@@ -188,6 +189,8 @@ var _default = echarts.extendChartView({
 
       if (itemModel.get('focusNodeAdjacency')) {
         el.on('mouseover', el[FOCUS_ADJACENCY] = function () {
+          graphView._clearTimer();
+
           api.dispatchAction({
             type: 'focusNodeAdjacency',
             seriesId: seriesModel.id,
@@ -195,10 +198,7 @@ var _default = echarts.extendChartView({
           });
         });
         el.on('mouseout', el[UNFOCUS_ADJACENCY] = function () {
-          api.dispatchAction({
-            type: 'unfocusNodeAdjacency',
-            seriesId: seriesModel.id
-          });
+          graphView._dispatchUnfocus(api);
         });
       }
     }, this);
@@ -209,6 +209,8 @@ var _default = echarts.extendChartView({
 
       if (edge.getModel().get('focusNodeAdjacency')) {
         el.on('mouseover', el[FOCUS_ADJACENCY] = function () {
+          graphView._clearTimer();
+
           api.dispatchAction({
             type: 'focusNodeAdjacency',
             seriesId: seriesModel.id,
@@ -216,10 +218,7 @@ var _default = echarts.extendChartView({
           });
         });
         el.on('mouseout', el[UNFOCUS_ADJACENCY] = function () {
-          api.dispatchAction({
-            type: 'unfocusNodeAdjacency',
-            seriesId: seriesModel.id
-          });
+          graphView._dispatchUnfocus(api);
         });
       }
     });
@@ -264,10 +263,30 @@ var _default = echarts.extendChartView({
   dispose: function () {
     this._controller && this._controller.dispose();
     this._controllerHost = {};
+
+    this._clearTimer();
   },
-  focusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
-    var data = this._model.getData();
+  _dispatchUnfocus: function (api, opt) {
+    var self = this;
 
+    this._clearTimer();
+
+    this._unfocusDelayTimer = setTimeout(function () {
+      self._unfocusDelayTimer = null;
+      api.dispatchAction({
+        type: 'unfocusNodeAdjacency',
+        seriesId: self._model.id
+      });
+    }, 500);
+  },
+  _clearTimer: function () {
+    if (this._unfocusDelayTimer) {
+      clearTimeout(this._unfocusDelayTimer);
+      this._unfocusDelayTimer = null;
+    }
+  },
+  focusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
+    var data = seriesModel.getData();
     var graph = data.graph;
     var dataIndex = payload.dataIndex;
     var edgeDataIndex = payload.edgeDataIndex;
@@ -305,8 +324,7 @@ var _default = echarts.extendChartView({
     }
   },
   unfocusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
-    var graph = this._model.getData().graph;
-
+    var graph = seriesModel.getData().graph;
     graph.eachNode(function (node) {
       fadeOutItem(node, nodeOpacityPath);
     });

package/lib/chart/graph/circularLayoutHelper.js

@@ -25,6 +25,12 @@ var _graphHelper = require("./graphHelper");
 var getSymbolSize = _graphHelper.getSymbolSize;
 var getNodeGlobalScale = _graphHelper.getNodeGlobalScale;
 
+var zrUtil = require("zrender/lib/core/util");
+
+var _multipleGraphEdgeHelper = require("../helper/multipleGraphEdgeHelper");
+
+var getCurvenessForEdge = _multipleGraphEdgeHelper.getCurvenessForEdge;
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -93,8 +99,8 @@ function circularLayout(seriesModel, basedOn) {
 
   _layoutNodesBasedOn[basedOn](seriesModel, coordSys, graph, nodeData, r, cx, cy, count);
 
-  graph.eachEdge(function (edge) {
-    var curveness = edge.getModel().get('lineStyle.curveness') || 0;
+  graph.eachEdge(function (edge, index) {
+    var curveness = zrUtil.retrieve3(edge.getModel().get('lineStyle.curveness'), getCurvenessForEdge(edge, seriesModel, index), 0);
     var p1 = vec2.clone(edge.node1.getLayout());
     var p2 = vec2.clone(edge.node2.getLayout());
     var cp1;

package/lib/chart/graph/forceLayout.js

@@ -38,6 +38,10 @@ var vec2 = require("zrender/lib/core/vector");
 
 var zrUtil = require("zrender/lib/core/util");
 
+var _multipleGraphEdgeHelper = require("../helper/multipleGraphEdgeHelper");
+
+var getCurvenessForEdge = _multipleGraphEdgeHelper.getCurvenessForEdge;
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -123,11 +127,12 @@ function _default(ecModel) {
         }
 
         var edgeModel = edge.getModel();
+        var curveness = zrUtil.retrieve3(edgeModel.get('lineStyle.curveness'), -getCurvenessForEdge(edge, graphSeries, idx, true), 0);
         return {
           n1: nodes[edge.node1.dataIndex],
           n2: nodes[edge.node2.dataIndex],
           d: d,
-          curveness: edgeModel.get('lineStyle.curveness') || 0,
+          curveness: curveness,
           ignoreForceLayout: edgeModel.get('ignoreForceLayout')
         };
       });

package/lib/chart/graph/simpleLayout.js

@@ -79,7 +79,7 @@ function _default(ecModel, api) {
         }
       }
 
-      simpleLayoutEdge(data.graph);
+      simpleLayoutEdge(data.graph, seriesModel);
     } else if (!layout || layout === 'none') {
       simpleLayout(seriesModel);
     }

package/lib/chart/graph/simpleLayoutHelper.js

@@ -20,6 +20,12 @@
 
 var vec2 = require("zrender/lib/core/vector");
 
+var zrUtil = require("zrender/lib/core/util");
+
+var _multipleGraphEdgeHelper = require("../helper/multipleGraphEdgeHelper");
+
+var getCurvenessForEdge = _multipleGraphEdgeHelper.getCurvenessForEdge;
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -50,12 +56,12 @@ function simpleLayout(seriesModel) {
     var model = node.getModel();
     node.setLayout([+model.get('x'), +model.get('y')]);
   });
-  simpleLayoutEdge(graph);
+  simpleLayoutEdge(graph, seriesModel);
 }
 
-function simpleLayoutEdge(graph) {
-  graph.eachEdge(function (edge) {
-    var curveness = edge.getModel().get('lineStyle.curveness') || 0;
+function simpleLayoutEdge(graph, seriesModel) {
+  graph.eachEdge(function (edge, index) {
+    var curveness = zrUtil.retrieve3(edge.getModel().get('lineStyle.curveness'), -getCurvenessForEdge(edge, seriesModel, index, true), 0);
     var p1 = vec2.clone(edge.node1.getLayout());
     var p2 = vec2.clone(edge.node2.getLayout());
     var points = [p1, p2];

package/lib/chart/heatmap/HeatmapView.js

@@ -166,10 +166,10 @@ var _default = echarts.extendChartView({
         var point = coordSys.dataToPoint([data.get(dataDims[0], idx), data.get(dataDims[1], idx)]);
         rect = new graphic.Rect({
           shape: {
-            x: point[0] - width / 2,
-            y: point[1] - height / 2,
-            width: width,
-            height: height
+            x: Math.floor(Math.round(point[0]) - width / 2),
+            y: Math.floor(Math.round(point[1]) - height / 2),
+            width: Math.ceil(width),
+            height: Math.ceil(height)
           },
           style: {
             fill: data.getItemVisual(idx, 'color'),

package/lib/chart/helper/EffectLine.js

@@ -108,6 +108,7 @@ effectLineProto._updateEffectSymbol = function (lineData, idx) {
   symbol.setColor(color);
   symbol.attr('scale', size);
   this._symbolType = symbolType;
+  this._symbolScale = size;
 
   this._updateEffectAnimation(lineData, effectModel, idx);
 };
@@ -191,6 +192,7 @@ effectLineProto.updateSymbolPosition = function (symbol) {
   var cp1 = symbol.__cp1;
   var t = symbol.__t;
   var pos = symbol.position;
+  var lastPos = [pos[0], pos[1]];
   var quadraticAt = curveUtil.quadraticAt;
   var quadraticDerivativeAt = curveUtil.quadraticDerivativeAt;
   pos[0] = quadraticAt(p1[0], cp1[0], p2[0], t);
@@ -198,7 +200,27 @@ effectLineProto.updateSymbolPosition = function (symbol) {
 
   var tx = quadraticDerivativeAt(p1[0], cp1[0], p2[0], t);
   var ty = quadraticDerivativeAt(p1[1], cp1[1], p2[1], t);
-  symbol.rotation = -Math.atan2(ty, tx) - Math.PI / 2;
+  symbol.rotation = -Math.atan2(ty, tx) - Math.PI / 2; // enable continuity trail for 'line', 'rect', 'roundRect' symbolType
+
+  if (this._symbolType === 'line' || this._symbolType === 'rect' || this._symbolType === 'roundRect') {
+    if (symbol.__lastT !== undefined && symbol.__lastT < symbol.__t) {
+      var scaleY = vec2.dist(lastPos, pos) * 1.05;
+      symbol.attr('scale', [symbol.scale[0], scaleY]); // make sure the last segment render within endPoint
+
+      if (t === 1) {
+        pos[0] = lastPos[0] + (pos[0] - lastPos[0]) / 2;
+        pos[1] = lastPos[1] + (pos[1] - lastPos[1]) / 2;
+      }
+    } else if (symbol.__lastT === 1) {
+      // After first loop, symbol.__t does NOT start with 0, so connect p1 to pos directly.
+      var scaleY = 2 * vec2.dist(p1, pos);
+      symbol.attr('scale', [symbol.scale[0], scaleY]);
+    } else {
+      symbol.attr('scale', this._symbolScale);
+    }
+  }
+
+  symbol.__lastT = symbol.__t;
   symbol.ignore = false;
 };
 

package/lib/chart/helper/EffectSymbol.js

@@ -207,7 +207,8 @@ effectSymbolProto.updateData = function (data, idx) {
     pos[1] = parsePercent(symbolOffset[1], symbolSize[1]);
   }
 
-  rippleGroup.rotation = (itemModel.getShallow('symbolRotate') || 0) * Math.PI / 180 || 0;
+  var symbolRotate = data.getItemVisual(idx, 'symbolRotate');
+  rippleGroup.rotation = (symbolRotate || 0) * Math.PI / 180 || 0;
   var effectCfg = {};
   effectCfg.showEffectOn = seriesModel.get('showEffectOn');
   effectCfg.rippleScale = itemModel.get('rippleEffect.scale');