echarts 4.8.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/graph/GraphSeries.js

@@ -38,6 +38,11 @@ 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
@@ -88,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) {
@@ -265,7 +276,6 @@ var GraphSeries = echarts.extendSeriesModel({
     lineStyle: {
       color: '#aaa',
       width: 1,
-      curveness: 0,
       opacity: 0.5
     },
     emphasis: {

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/helper/Line.js

@@ -65,19 +65,23 @@ function makeSymbolTypeKey(symbolCategory) {
 
 
 function createSymbol(name, lineData, idx) {
-  var color = lineData.getItemVisual(idx, 'color');
   var symbolType = lineData.getItemVisual(idx, name);
-  var symbolSize = lineData.getItemVisual(idx, name + 'Size');
 
   if (!symbolType || symbolType === 'none') {
     return;
   }
 
+  var color = lineData.getItemVisual(idx, 'color');
+  var symbolSize = lineData.getItemVisual(idx, name + 'Size');
+  var symbolRotate = lineData.getItemVisual(idx, name + 'Rotate');
+
   if (!zrUtil.isArray(symbolSize)) {
     symbolSize = [symbolSize, symbolSize];
   }
 
-  var symbolPath = symbolUtil.createSymbol(symbolType, -symbolSize[0] / 2, -symbolSize[1] / 2, symbolSize[0], symbolSize[1], color);
+  var symbolPath = symbolUtil.createSymbol(symbolType, -symbolSize[0] / 2, -symbolSize[1] / 2, symbolSize[0], symbolSize[1], color); // rotate by default if symbolRotate is not specified or NaN
+
+  symbolPath.__specifiedRotation = symbolRotate == null || isNaN(symbolRotate) ? void 0 : +symbolRotate * Math.PI / 180 || 0;
   symbolPath.name = name;
   return symbolPath;
 }
@@ -143,16 +147,38 @@ function updateSymbolAndLabelBeforeLineUpdate() {
   vector.normalize(d, d);
 
   if (symbolFrom) {
-    symbolFrom.attr('position', fromPos);
-    var tangent = line.tangentAt(0);
-    symbolFrom.attr('rotation', Math.PI / 2 - Math.atan2(tangent[1], tangent[0]));
+    symbolFrom.attr('position', fromPos); // Fix #12388
+    // when symbol is set to be 'arrow' in markLine,
+    // symbolRotate value will be ignored, and compulsively use tangent angle.
+    // rotate by default if symbol rotation is not specified
+
+    var specifiedRotation = symbolFrom.__specifiedRotation;
+
+    if (specifiedRotation == null) {
+      var tangent = line.tangentAt(0);
+      symbolFrom.attr('rotation', Math.PI / 2 - Math.atan2(tangent[1], tangent[0]));
+    } else {
+      symbolFrom.attr('rotation', specifiedRotation);
+    }
+
     symbolFrom.attr('scale', [invScale * percent, invScale * percent]);
   }
 
   if (symbolTo) {
-    symbolTo.attr('position', toPos);
-    var tangent = line.tangentAt(1);
-    symbolTo.attr('rotation', -Math.PI / 2 - Math.atan2(tangent[1], tangent[0]));
+    symbolTo.attr('position', toPos); // Fix #12388
+    // when symbol is set to be 'arrow' in markLine,
+    // symbolRotate value will be ignored, and compulsively use tangent angle.
+    // rotate by default if symbol rotation is not specified
+
+    var specifiedRotation = symbolTo.__specifiedRotation;
+
+    if (specifiedRotation == null) {
+      var tangent = line.tangentAt(1);
+      symbolTo.attr('rotation', -Math.PI / 2 - Math.atan2(tangent[1], tangent[0]));
+    } else {
+      symbolTo.attr('rotation', specifiedRotation);
+    }
+
     symbolTo.attr('scale', [invScale * percent, invScale * percent]);
   }
 

package/lib/chart/helper/Symbol.js

@@ -257,7 +257,7 @@ symbolProto._updateCommon = function (data, idx, symbolSize, seriesScope) {
     });
   } else {
     symbolPath.setStyle({
-      opacity: null,
+      opacity: 1,
       shadowBlur: null,
       shadowOffsetX: null,
       shadowOffsetY: null,