echarts 4.5.0-rc.2 → 4.8.0

package/lib/chart/sunburst/SunburstPiece.js

@@ -149,6 +149,7 @@ SunburstPieceProto.updateData = function (firstCreate, node, state, seriesModel,
 
   this._seriesModel = seriesModel || this._seriesModel;
   this._ecModel = ecModel || this._ecModel;
+  graphic.setHoverStyle(this);
 };
 
 SunburstPieceProto.onEmphasis = function (highlightPolicy) {

package/lib/chart/sunburst/SunburstSeries.js

@@ -113,8 +113,7 @@ var _default = SeriesModel.extend({
       align: 'center',
       position: 'inside',
       distance: 5,
-      silent: true,
-      emphasis: {}
+      silent: true
     },
     itemStyle: {
       borderWidth: 1,
@@ -124,13 +123,19 @@ var _default = SeriesModel.extend({
       shadowColor: 'rgba(0, 0, 0, 0.2)',
       shadowOffsetX: 0,
       shadowOffsetY: 0,
-      opacity: 1,
-      emphasis: {},
-      highlight: {
+      opacity: 1
+    },
+    highlight: {
+      itemStyle: {
         opacity: 1
+      }
+    },
+    downplay: {
+      itemStyle: {
+        opacity: 0.5
       },
-      downplay: {
-        opacity: 0.9
+      label: {
+        opacity: 0.6
       }
     },
     // Animation type canbe expansion, scale

package/lib/chart/sunburst/SunburstView.js

@@ -26,6 +26,10 @@ var SunburstPiece = require("./SunburstPiece");
 
 var DataDiffer = require("../../data/DataDiffer");
 
+var _format = require("../../util/format");
+
+var windowOpen = _format.windowOpen;
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -193,7 +197,7 @@ var SunburstView = ChartView.extend({
 
             if (link) {
               var linkTarget = itemModel.get('target', true) || '_blank';
-              window.open(link, linkTarget);
+              windowOpen(link, linkTarget);
             }
           }
 

package/lib/chart/themeRiver/ThemeRiverSeries.js

@@ -38,6 +38,8 @@ var _format = require("../../util/format");
 
 var encodeHTML = _format.encodeHTML;
 
+var LegendVisualProvider = require("../../visual/LegendVisualProvider");
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -76,9 +78,7 @@ var ThemeRiverSeries = SeriesModel.extend({
     // Enable legend selection for each data item
     // Use a function instead of direct access because data reference may changed
 
-    this.legendDataProvider = function () {
-      return this.getRawData();
-    };
+    this.legendVisualProvider = new LegendVisualProvider(zrUtil.bind(this.getData, this), zrUtil.bind(this.getRawData, this));
   },
 
   /**

package/lib/chart/tree/TreeSeries.js

@@ -26,6 +26,8 @@ var _format = require("../../util/format");
 
 var encodeHTML = _format.encodeHTML;
 
+var Model = require("../../model/Model");
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -63,9 +65,21 @@ var _default = SeriesModel.extend({
       children: option.data
     };
     var leaves = option.leaves || {};
-    var treeOption = {};
-    treeOption.leaves = leaves;
-    var tree = Tree.createTree(root, this, treeOption);
+    var leavesModel = new Model(leaves, this, this.ecModel);
+    var tree = Tree.createTree(root, this, {}, beforeLink);
+
+    function beforeLink(nodeData) {
+      nodeData.wrapMethod('getItemModel', function (model, idx) {
+        var node = tree.getNodeByDataIndex(idx);
+
+        if (!node.children.length || !node.isExpand) {
+          model.parentModel = leavesModel;
+        }
+
+        return model;
+      });
+    }
+
     var treeDepth = 0;
     tree.eachNode('preorder', function (node) {
       if (node.depth > treeDepth) {
@@ -133,6 +147,9 @@ var _default = SeriesModel.extend({
     bottom: '12%',
     // the layout of the tree, two value can be selected, 'orthogonal' or 'radial'
     layout: 'orthogonal',
+    // value can be 'polyline'
+    edgeShape: 'curve',
+    edgeForkPosition: '50%',
     // true | false | 'move' | 'scale', see module:component/helper/RoamController.
     roam: false,
     // Symbol size scale ratio in roam

package/lib/chart/tree/TreeView.js

@@ -42,6 +42,14 @@ var _cursorHelper = require("../../component/helper/cursorHelper");
 
 var onIrrelevantElement = _cursorHelper.onIrrelevantElement;
 
+var _config = require("../../config");
+
+var __DEV__ = _config.__DEV__;
+
+var _number = require("../../util/number");
+
+var parsePercent = _number.parsePercent;
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -60,6 +68,55 @@ var onIrrelevantElement = _cursorHelper.onIrrelevantElement;
 * specific language governing permissions and limitations
 * under the License.
 */
+var TreeShape = graphic.extendShape({
+  shape: {
+    parentPoint: [],
+    childPoints: [],
+    orient: '',
+    forkPosition: ''
+  },
+  style: {
+    stroke: '#000',
+    fill: null
+  },
+  buildPath: function (ctx, shape) {
+    var childPoints = shape.childPoints;
+    var childLen = childPoints.length;
+    var parentPoint = shape.parentPoint;
+    var firstChildPos = childPoints[0];
+    var lastChildPos = childPoints[childLen - 1];
+
+    if (childLen === 1) {
+      ctx.moveTo(parentPoint[0], parentPoint[1]);
+      ctx.lineTo(firstChildPos[0], firstChildPos[1]);
+      return;
+    }
+
+    var orient = shape.orient;
+    var forkDim = orient === 'TB' || orient === 'BT' ? 0 : 1;
+    var otherDim = 1 - forkDim;
+    var forkPosition = parsePercent(shape.forkPosition, 1);
+    var tmpPoint = [];
+    tmpPoint[forkDim] = parentPoint[forkDim];
+    tmpPoint[otherDim] = parentPoint[otherDim] + (lastChildPos[otherDim] - parentPoint[otherDim]) * forkPosition;
+    ctx.moveTo(parentPoint[0], parentPoint[1]);
+    ctx.lineTo(tmpPoint[0], tmpPoint[1]);
+    ctx.moveTo(firstChildPos[0], firstChildPos[1]);
+    tmpPoint[forkDim] = firstChildPos[forkDim];
+    ctx.lineTo(tmpPoint[0], tmpPoint[1]);
+    tmpPoint[forkDim] = lastChildPos[forkDim];
+    ctx.lineTo(tmpPoint[0], tmpPoint[1]);
+    ctx.lineTo(lastChildPos[0], lastChildPos[1]);
+
+    for (var i = 1; i < childLen - 1; i++) {
+      var point = childPoints[i];
+      ctx.moveTo(point[0], point[1]);
+      tmpPoint[forkDim] = point[forkDim];
+      ctx.lineTo(tmpPoint[0], tmpPoint[1]);
+    }
+  }
+});
+
 var _default = echarts.extendChartView({
   type: 'tree',
 
@@ -112,6 +169,8 @@ var _default = echarts.extendChartView({
     var seriesScope = {
       expandAndCollapse: seriesModel.get('expandAndCollapse'),
       layout: layout,
+      edgeShape: seriesModel.get('edgeShape'),
+      edgeForkPosition: seriesModel.get('edgeForkPosition'),
       orient: seriesModel.getOrient(),
       curvature: seriesModel.get('lineStyle.curveness'),
       symbolRotate: seriesModel.get('symbolRotate'),
@@ -387,27 +446,72 @@ function updateNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope)
     });
   }
 
-  if (node.parentNode && node.parentNode !== virtualRoot) {
-    var edge = symbolEl.__edge;
+  drawEdge(seriesModel, node, virtualRoot, symbolEl, sourceOldLayout, sourceLayout, targetLayout, group, seriesScope);
+}
 
-    if (!edge) {
-      edge = symbolEl.__edge = new graphic.BezierCurve({
-        shape: getEdgeShape(seriesScope, sourceOldLayout, sourceOldLayout),
-        style: zrUtil.defaults({
-          opacity: 0,
-          strokeNoScale: true
-        }, seriesScope.lineStyle)
-      });
+function drawEdge(seriesModel, node, virtualRoot, symbolEl, sourceOldLayout, sourceLayout, targetLayout, group, seriesScope) {
+  var edgeShape = seriesScope.edgeShape;
+  var edge = symbolEl.__edge;
+
+  if (edgeShape === 'curve') {
+    if (node.parentNode && node.parentNode !== virtualRoot) {
+      if (!edge) {
+        edge = symbolEl.__edge = new graphic.BezierCurve({
+          shape: getEdgeShape(seriesScope, sourceOldLayout, sourceOldLayout),
+          style: zrUtil.defaults({
+            opacity: 0,
+            strokeNoScale: true
+          }, seriesScope.lineStyle)
+        });
+      }
+
+      graphic.updateProps(edge, {
+        shape: getEdgeShape(seriesScope, sourceLayout, targetLayout),
+        style: {
+          opacity: 1
+        }
+      }, seriesModel);
     }
+  } else if (edgeShape === 'polyline') {
+    if (seriesScope.layout === 'orthogonal') {
+      if (node !== virtualRoot && node.children && node.children.length !== 0 && node.isExpand === true) {
+        var children = node.children;
+        var childPoints = [];
+
+        for (var i = 0; i < children.length; i++) {
+          var childLayout = children[i].getLayout();
+          childPoints.push([childLayout.x, childLayout.y]);
+        }
 
-    graphic.updateProps(edge, {
-      shape: getEdgeShape(seriesScope, sourceLayout, targetLayout),
-      style: {
-        opacity: 1
+        if (!edge) {
+          edge = symbolEl.__edge = new TreeShape({
+            shape: {
+              parentPoint: [targetLayout.x, targetLayout.y],
+              childPoints: [[targetLayout.x, targetLayout.y]],
+              orient: seriesScope.orient,
+              forkPosition: seriesScope.edgeForkPosition
+            },
+            style: zrUtil.defaults({
+              opacity: 0,
+              strokeNoScale: true
+            }, seriesScope.lineStyle)
+          });
+        }
+
+        graphic.updateProps(edge, {
+          shape: {
+            parentPoint: [targetLayout.x, targetLayout.y],
+            childPoints: childPoints
+          },
+          style: {
+            opacity: 1
+          }
+        }, seriesModel);
       }
-    }, seriesModel);
-    group.add(edge);
+    } else {}
   }
+
+  group.add(edge);
 }
 
 function removeNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope) {
@@ -416,6 +520,7 @@ function removeNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope)
   var itemModel = node.getModel();
   var seriesScope = getTreeNodeStyle(node, itemModel, seriesScope);
   var source = node.parentNode === virtualRoot ? node : node.parentNode || node;
+  var edgeShape = seriesScope.edgeShape;
   var sourceLayout;
 
   while (sourceLayout = source.getLayout(), sourceLayout == null) {
@@ -431,17 +536,38 @@ function removeNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope)
   symbolEl.fadeOut(null, {
     keepLabel: true
   });
-  var edge = symbolEl.__edge;
+  var sourceSymbolEl = data.getItemGraphicEl(source.dataIndex);
+  var sourceEdge = sourceSymbolEl.__edge; // 1. when expand the sub tree, delete the children node should delete the edge of
+  // the source at the same time. because the polyline edge shape is only owned by the source.
+  // 2.when the node is the only children of the source, delete the node should delete the edge of
+  // the source at the same time. the same reason as above.
+
+  var edge = symbolEl.__edge || (source.isExpand === false || source.children.length === 1 ? sourceEdge : undefined);
+  var edgeShape = seriesScope.edgeShape;
 
   if (edge) {
-    graphic.updateProps(edge, {
-      shape: getEdgeShape(seriesScope, sourceLayout, sourceLayout),
-      style: {
-        opacity: 0
-      }
-    }, seriesModel, function () {
-      group.remove(edge);
-    });
+    if (edgeShape === 'curve') {
+      graphic.updateProps(edge, {
+        shape: getEdgeShape(seriesScope, sourceLayout, sourceLayout),
+        style: {
+          opacity: 0
+        }
+      }, seriesModel, function () {
+        group.remove(edge);
+      });
+    } else if (edgeShape === 'polyline' && seriesScope.layout === 'orthogonal') {
+      graphic.updateProps(edge, {
+        shape: {
+          parentPoint: [sourceLayout.x, sourceLayout.y],
+          childPoints: [[sourceLayout.x, sourceLayout.y]]
+        },
+        style: {
+          opacity: 0
+        }
+      }, seriesModel, function () {
+        group.remove(edge);
+      });
+    }
   }
 }
 

package/lib/chart/treemap/TreemapSeries.js

@@ -228,12 +228,24 @@ var _default = SeriesModel.extend({
     completeTreeValue(root);
     var levels = option.levels || [];
     levels = option.levels = setDefault(levels, ecModel);
-    var treeOption = {};
-    treeOption.levels = levels; // Make sure always a new tree is created when setOption,
+    var levelModels = zrUtil.map(levels || [], function (levelDefine) {
+      return new Model(levelDefine, this, ecModel);
+    }, this); // Make sure always a new tree is created when setOption,
     // in TreemapView, we check whether oldTree === newTree
     // to choose mappings approach among old shapes and new shapes.
 
-    return Tree.createTree(root, this, treeOption).data;
+    var tree = Tree.createTree(root, this, null, beforeLink);
+
+    function beforeLink(nodeData) {
+      nodeData.wrapMethod('getItemModel', function (model, idx) {
+        var node = tree.getNodeByDataIndex(idx);
+        var levelModel = levelModels[node.depth];
+        levelModel && (model.parentModel = levelModel);
+        return model;
+      });
+    }
+
+    return tree.data;
   },
   optionUpdated: function () {
     this.resetViewRoot();

package/lib/chart/treemap/TreemapView.js

@@ -40,6 +40,10 @@ var animationUtil = require("../../util/animation");
 
 var makeStyleMapper = require("../../model/mixin/makeStyleMapper");
 
+var _format = require("../../util/format");
+
+var windowOpen = _format.windowOpen;
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -529,7 +533,7 @@ var _default = echarts.extendChartView({
           var itemModel = node.hostTree.data.getItemModel(node.dataIndex);
           var link = itemModel.get('link', true);
           var linkTarget = itemModel.get('target', true) || 'blank';
-          link && window.open(link, linkTarget);
+          link && windowOpen(link, linkTarget);
         }
       }
     }, this);
@@ -673,6 +677,10 @@ function renderNode(seriesModel, thisStorage, oldStorage, reRoot, lastsForAnimat
 
 
   var thisLayout = thisNode.getLayout();
+  var data = seriesModel.getData(); // Only for enabling highlight/downplay. Clear firstly.
+  // Because some node will not be rendered.
+
+  data.setItemGraphicEl(thisNode.dataIndex, null);
 
   if (!thisLayout || !thisLayout.isInView) {
     return;
@@ -706,15 +714,37 @@ function renderNode(seriesModel, thisStorage, oldStorage, reRoot, lastsForAnimat
 
   if (thisLayout.isAboveViewRoot) {
     return group;
-  } // Background
+  }
 
+  var nodeModel = thisNode.getModel(); // Background
 
   var bg = giveGraphic('background', Rect, depth, Z_BG);
-  bg && renderBackground(group, bg, isParent && thisLayout.upperHeight); // No children, render content.
+  bg && renderBackground(group, bg, isParent && thisLayout.upperLabelHeight); // No children, render content.
+
+  if (isParent) {
+    // Because of the implementation about "traverse" in graphic hover style, we
+    // can not set hover listener on the "group" of non-leaf node. Otherwise the
+    // hover event from the descendents will be listenered.
+    if (graphic.isHighDownDispatcher(group)) {
+      graphic.setAsHighDownDispatcher(group, false);
+    }
+
+    if (bg) {
+      graphic.setAsHighDownDispatcher(bg, true); // Only for enabling highlight/downplay.
 
-  if (!isParent) {
+      data.setItemGraphicEl(thisNode.dataIndex, bg);
+    }
+  } else {
     var content = giveGraphic('content', Rect, depth, Z_CONTENT);
     content && renderContent(group, content);
+
+    if (bg && graphic.isHighDownDispatcher(bg)) {
+      graphic.setAsHighDownDispatcher(bg, false);
+    }
+
+    graphic.setAsHighDownDispatcher(group, true); // Only for enabling highlight/downplay.
+
+    data.setItemGraphicEl(thisNode.dataIndex, group);
   }
 
   return group; // ----------------------------
@@ -731,9 +761,16 @@ function renderNode(seriesModel, thisStorage, oldStorage, reRoot, lastsForAnimat
       width: thisWidth,
       height: thisHeight
     });
-    var visualBorderColor = thisNode.getVisual('borderColor', true);
-    var emphasisBorderColor = itemStyleEmphasisModel.get('borderColor');
-    updateStyle(bg, function () {
+
+    if (thisInvisible) {
+      // If invisible, do not set visual, otherwise the element will
+      // change immediately before animation. We think it is OK to
+      // remain its origin color when moving out of the view window.
+      processInvisible(bg);
+    } else {
+      bg.invisible = false;
+      var visualBorderColor = thisNode.getVisual('borderColor', true);
+      var emphasisBorderColor = itemStyleEmphasisModel.get('borderColor');
       var normalStyle = getItemStyleNormal(itemStyleNormalModel);
       normalStyle.fill = visualBorderColor;
       var emphasisStyle = getItemStyleEmphasis(itemStyleEmphasisModel);
@@ -753,8 +790,9 @@ function renderNode(seriesModel, thisStorage, oldStorage, reRoot, lastsForAnimat
         }
 
       bg.setStyle(normalStyle);
-      graphic.setHoverStyle(bg, emphasisStyle);
-    });
+      graphic.setElementHoverStyle(bg, emphasisStyle);
+    }
+
     group.add(bg);
   }
 
@@ -771,52 +809,47 @@ function renderNode(seriesModel, thisStorage, oldStorage, reRoot, lastsForAnimat
       width: contentWidth,
       height: contentHeight
     });
-    var visualColor = thisNode.getVisual('color', true);
-    updateStyle(content, function () {
+
+    if (thisInvisible) {
+      // If invisible, do not set visual, otherwise the element will
+      // change immediately before animation. We think it is OK to
+      // remain its origin color when moving out of the view window.
+      processInvisible(content);
+    } else {
+      content.invisible = false;
+      var visualColor = thisNode.getVisual('color', true);
       var normalStyle = getItemStyleNormal(itemStyleNormalModel);
       normalStyle.fill = visualColor;
       var emphasisStyle = getItemStyleEmphasis(itemStyleEmphasisModel);
       prepareText(normalStyle, emphasisStyle, visualColor, contentWidth, contentHeight);
       content.setStyle(normalStyle);
-      graphic.setHoverStyle(content, emphasisStyle);
-    });
+      graphic.setElementHoverStyle(content, emphasisStyle);
+    }
+
     group.add(content);
   }
 
-  function updateStyle(element, cb) {
-    if (!thisInvisible) {
-      // If invisible, do not set visual, otherwise the element will
-      // change immediately before animation. We think it is OK to
-      // remain its origin color when moving out of the view window.
-      cb();
-
-      if (!element.__tmWillVisible) {
-        element.invisible = false;
-      }
-    } else {
-      // Delay invisible setting utill animation finished,
-      // avoid element vanish suddenly before animation.
-      !element.invisible && willInvisibleEls.push(element);
-    }
+  function processInvisible(element) {
+    // Delay invisible setting utill animation finished,
+    // avoid element vanish suddenly before animation.
+    !element.invisible && willInvisibleEls.push(element);
   }
 
   function prepareText(normalStyle, emphasisStyle, visualColor, width, height, upperLabelRect) {
-    var nodeModel = thisNode.getModel();
-    var text = zrUtil.retrieve(seriesModel.getFormattedLabel(thisNode.dataIndex, 'normal', null, null, upperLabelRect ? 'upperLabel' : 'label'), nodeModel.get('name'));
-
-    if (!upperLabelRect && thisLayout.isLeafRoot) {
-      var iconChar = seriesModel.get('drillDownIcon', true);
-      text = iconChar ? iconChar + ' ' + text : text;
-    }
-
+    var defaultText = nodeModel.get('name');
     var normalLabelModel = nodeModel.getModel(upperLabelRect ? PATH_UPPERLABEL_NORMAL : PATH_LABEL_NOAMAL);
     var emphasisLabelModel = nodeModel.getModel(upperLabelRect ? PATH_UPPERLABEL_EMPHASIS : PATH_LABEL_EMPHASIS);
     var isShow = normalLabelModel.getShallow('show');
     graphic.setLabelStyle(normalStyle, emphasisStyle, normalLabelModel, emphasisLabelModel, {
-      defaultText: isShow ? text : null,
+      defaultText: isShow ? defaultText : null,
       autoColor: visualColor,
-      isRectText: true
+      isRectText: true,
+      labelFetcher: seriesModel,
+      labelDataIndex: thisNode.dataIndex,
+      labelProp: upperLabelRect ? 'upperLabel' : 'label'
     });
+    addDrillDownIcon(normalStyle, upperLabelRect, thisLayout);
+    addDrillDownIcon(emphasisStyle, upperLabelRect, thisLayout);
     upperLabelRect && (normalStyle.textRect = zrUtil.clone(upperLabelRect));
     normalStyle.truncate = isShow && normalLabelModel.get('ellipsis') ? {
       outerWidth: width,
@@ -825,6 +858,15 @@ function renderNode(seriesModel, thisStorage, oldStorage, reRoot, lastsForAnimat
     } : null;
   }
 
+  function addDrillDownIcon(style, upperLabelRect, thisLayout) {
+    var text = style.text;
+
+    if (!upperLabelRect && thisLayout.isLeafRoot && text != null) {
+      var iconChar = seriesModel.get('drillDownIcon', true);
+      style.text = iconChar ? iconChar + ' ' + text : text;
+    }
+  }
+
   function giveGraphic(storageName, Ctor, depth, z) {
     var element = oldRawIndex != null && oldStorage[storageName][oldRawIndex];
     var lasts = lastsForAnimation[storageName];