echarts 4.6.0 → 4.7.0

package/lib/chart/bar/BarSeries.js

@@ -71,7 +71,20 @@ var _default = BaseBarSeries.extend({
     clip: true,
     // If use caps on two sides of bars
     // Only available on tangential polar bar
-    roundCap: false
+    roundCap: false,
+    showBackground: false,
+    backgroundStyle: {
+      color: 'rgba(180, 180, 180, 0.2)',
+      borderColor: null,
+      borderWidth: 0,
+      borderType: 'solid',
+      borderRadius: 0,
+      shadowBlur: 0,
+      shadowColor: null,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0,
+      opacity: 1
+    }
   }
 });
 

package/lib/chart/bar/BarView.js

@@ -38,6 +38,8 @@ var barItemStyle = require("./barItemStyle");
 
 var Path = require("zrender/lib/graphic/Path");
 
+var Group = require("zrender/lib/container/Group");
+
 var _throttle = require("../../util/throttle");
 
 var throttle = _throttle.throttle;
@@ -149,14 +151,25 @@ var _default = echarts.extendChartView({
     // And don't want the label are clipped.
 
     var roundCap = seriesModel.get('roundCap', true);
+    var drawBackground = seriesModel.get('showBackground', true);
+    var backgroundModel = seriesModel.getModel('backgroundStyle');
+    var bgEls = [];
+    var oldBgEls = this._backgroundEls || [];
     data.diff(oldData).add(function (dataIndex) {
+      var itemModel = data.getItemModel(dataIndex);
+      var layout = getLayout[coord.type](data, dataIndex, itemModel);
+
+      if (drawBackground) {
+        var bgEl = createBackgroundEl(coord, isHorizontalOrRadial, layout);
+        bgEl.useStyle(backgroundModel.getBarItemStyle());
+        bgEls[dataIndex] = bgEl;
+      } // If dataZoom in filteMode: 'empty', the baseValue can be set as NaN in "axisProxy".
+
+
       if (!data.hasValue(dataIndex)) {
         return;
       }
 
-      var itemModel = data.getItemModel(dataIndex);
-      var layout = getLayout[coord.type](data, dataIndex, itemModel);
-
       if (needsClip) {
         // Clip will modify the layout params.
         // And return a boolean to determine if the shape are fully clipped.
@@ -173,6 +186,19 @@ var _default = echarts.extendChartView({
       group.add(el);
       updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHorizontalOrRadial, coord.type === 'polar');
     }).update(function (newIndex, oldIndex) {
+      var itemModel = data.getItemModel(newIndex);
+      var layout = getLayout[coord.type](data, newIndex, itemModel);
+
+      if (drawBackground) {
+        var bgEl = oldBgEls[oldIndex];
+        bgEl.useStyle(backgroundModel.getBarItemStyle());
+        bgEls[newIndex] = bgEl;
+        var shape = createBackgroundShape(isHorizontalOrRadial, layout, coord);
+        graphic.updateProps(bgEl, {
+          shape: shape
+        }, animationModel, newIndex);
+      }
+
       var el = oldData.getItemGraphicEl(oldIndex);
 
       if (!data.hasValue(newIndex)) {
@@ -180,9 +206,6 @@ var _default = echarts.extendChartView({
         return;
       }
 
-      var itemModel = data.getItemModel(newIndex);
-      var layout = getLayout[coord.type](data, newIndex, itemModel);
-
       if (needsClip) {
         var isClipped = clip[coord.type](coordSysClipArea, layout);
 
@@ -213,6 +236,15 @@ var _default = echarts.extendChartView({
         el && removeSector(dataIndex, animationModel, el);
       }
     }).execute();
+    var bgGroup = this._backgroundGroup || (this._backgroundGroup = new Group());
+    bgGroup.removeAll();
+
+    for (var i = 0; i < bgEls.length; ++i) {
+      bgGroup.add(bgEls[i]);
+    }
+
+    group.add(bgGroup);
+    this._backgroundEls = bgEls;
     this._data = data;
   },
   _renderLarge: function (seriesModel, ecModel, api) {
@@ -229,6 +261,8 @@ var _default = echarts.extendChartView({
     }
   },
   _incrementalRenderLarge: function (params, seriesModel) {
+    this._removeBackground();
+
     createLarge(seriesModel, this.group, true);
   },
   dispose: zrUtil.noop,
@@ -240,6 +274,9 @@ var _default = echarts.extendChartView({
     var data = this._data;
 
     if (ecModel && ecModel.get('animation') && data && !this._isLargeDraw) {
+      this._removeBackground();
+
+      this._backgroundEls = [];
       data.eachItemGraphicEl(function (el) {
         if (el.type === 'sector') {
           removeSector(el.dataIndex, ecModel, el);
@@ -252,6 +289,10 @@ var _default = echarts.extendChartView({
     }
 
     this._data = null;
+  },
+  _removeBackground: function () {
+    this.group.remove(this._backgroundGroup);
+    this._backgroundGroup = null;
   }
 });
 
@@ -301,8 +342,10 @@ var clip = {
 var elementCreator = {
   cartesian2d: function (dataIndex, layout, isHorizontal, animationModel, isUpdate) {
     var rect = new graphic.Rect({
-      shape: zrUtil.extend({}, layout)
-    }); // Animation
+      shape: zrUtil.extend({}, layout),
+      z2: 1
+    });
+    rect.name = 'item'; // Animation
 
     if (animationModel) {
       var rectShape = rect.shape;
@@ -327,8 +370,10 @@ var elementCreator = {
     var sector = new ShapeClass({
       shape: zrUtil.defaults({
         clockwise: clockwise
-      }, layout)
-    }); // Animation
+      }, layout),
+      z2: 1
+    });
+    sector.name = 'item'; // Animation
 
     if (animationModel) {
       var sectorShape = sector.shape;
@@ -433,8 +478,11 @@ function updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHori
 
 
 function getLineWidth(itemModel, rawLayout) {
-  var lineWidth = itemModel.get(BAR_BORDER_WIDTH_QUERY) || 0;
-  return Math.min(lineWidth, Math.abs(rawLayout.width), Math.abs(rawLayout.height));
+  var lineWidth = itemModel.get(BAR_BORDER_WIDTH_QUERY) || 0; // width or height may be NaN for empty data
+
+  var width = isNaN(rawLayout.width) ? Number.MAX_VALUE : Math.abs(rawLayout.width);
+  var height = isNaN(rawLayout.height) ? Number.MAX_VALUE : Math.abs(rawLayout.height);
+  return Math.min(lineWidth, width, height);
 }
 
 var LargePath = Path.extend({
@@ -463,6 +511,31 @@ function createLarge(seriesModel, group, incremental) {
   var startPoint = [];
   var baseDimIdx = data.getLayout('valueAxisHorizontal') ? 1 : 0;
   startPoint[1 - baseDimIdx] = data.getLayout('valueAxisStart');
+  var largeDataIndices = data.getLayout('largeDataIndices');
+  var barWidth = data.getLayout('barWidth');
+  var backgroundModel = seriesModel.getModel('backgroundStyle');
+  var drawBackground = seriesModel.get('showBackground', true);
+
+  if (drawBackground) {
+    var points = data.getLayout('largeBackgroundPoints');
+    var backgroundStartPoint = [];
+    backgroundStartPoint[1 - baseDimIdx] = data.getLayout('backgroundStart');
+    var bgEl = new LargePath({
+      shape: {
+        points: points
+      },
+      incremental: !!incremental,
+      __startPoint: backgroundStartPoint,
+      __baseDimIdx: baseDimIdx,
+      __largeDataIndices: largeDataIndices,
+      __barWidth: barWidth,
+      silent: true,
+      z2: 0
+    });
+    setLargeBackgroundStyle(bgEl, backgroundModel, data);
+    group.add(bgEl);
+  }
+
   var el = new LargePath({
     shape: {
       points: data.getLayout('largePoints')
@@ -470,8 +543,8 @@ function createLarge(seriesModel, group, incremental) {
     incremental: !!incremental,
     __startPoint: startPoint,
     __baseDimIdx: baseDimIdx,
-    __largeDataIndices: data.getLayout('largeDataIndices'),
-    __barWidth: data.getLayout('barWidth')
+    __largeDataIndices: largeDataIndices,
+    __barWidth: barWidth
   });
   group.add(el);
   setLargeStyle(el, seriesModel, data); // Enable tooltip and user mouse/touch event handlers.
@@ -527,4 +600,51 @@ function setLargeStyle(el, seriesModel, data) {
   el.style.lineWidth = data.getLayout('barWidth');
 }
 
+function setLargeBackgroundStyle(el, backgroundModel, data) {
+  var borderColor = backgroundModel.get('borderColor') || backgroundModel.get('color');
+  var itemStyle = backgroundModel.getItemStyle(['color', 'borderColor']);
+  el.useStyle(itemStyle);
+  el.style.fill = null;
+  el.style.stroke = borderColor;
+  el.style.lineWidth = data.getLayout('barWidth');
+}
+
+function createBackgroundShape(isHorizontalOrRadial, layout, coord) {
+  var coordLayout;
+  var isPolar = coord.type === 'polar';
+
+  if (isPolar) {
+    coordLayout = coord.getArea();
+  } else {
+    coordLayout = coord.grid.getRect();
+  }
+
+  if (isPolar) {
+    return {
+      cx: coordLayout.cx,
+      cy: coordLayout.cy,
+      r0: isHorizontalOrRadial ? coordLayout.r0 : layout.r0,
+      r: isHorizontalOrRadial ? coordLayout.r : layout.r,
+      startAngle: isHorizontalOrRadial ? layout.startAngle : 0,
+      endAngle: isHorizontalOrRadial ? layout.endAngle : Math.PI * 2
+    };
+  } else {
+    return {
+      x: isHorizontalOrRadial ? layout.x : coordLayout.x,
+      y: isHorizontalOrRadial ? coordLayout.y : layout.y,
+      width: isHorizontalOrRadial ? layout.width : coordLayout.width,
+      height: isHorizontalOrRadial ? coordLayout.height : layout.height
+    };
+  }
+}
+
+function createBackgroundEl(coord, isHorizontalOrRadial, layout) {
+  var ElementClz = coord.type === 'polar' ? graphic.Sector : graphic.Rect;
+  return new ElementClz({
+    shape: createBackgroundShape(isHorizontalOrRadial, layout, coord),
+    silent: true,
+    z2: 0
+  });
+}
+
 module.exports = _default;

package/lib/chart/candlestick/candlestickVisual.js

@@ -49,7 +49,6 @@ var _default = {
   performRawSeries: true,
   reset: function (seriesModel, ecModel) {
     var data = seriesModel.getData();
-    var isLargeRender = seriesModel.pipelineContext.large;
     data.setVisual({
       legendSymbol: 'roundRect',
       colorP: getColor(1, seriesModel),
@@ -62,6 +61,7 @@ var _default = {
       return;
     }
 
+    var isLargeRender = seriesModel.pipelineContext.large;
     return !isLargeRender && {
       progress: progress
     };

package/lib/chart/funnel/FunnelSeries.js

@@ -22,8 +22,6 @@ var echarts = require("../../echarts");
 
 var zrUtil = require("zrender/lib/core/util");
 
-var bind = zrUtil.bind;
-
 var createListSimply = require("../helper/createListSimply");
 
 var _model = require("../../util/model");
@@ -60,7 +58,7 @@ var FunnelSeries = echarts.extendSeriesModel({
     FunnelSeries.superApply(this, 'init', arguments); // Enable legend selection for each data item
     // Use a function instead of direct access because data reference may changed
 
-    this.legendVisualProvider = new LegendVisualProvider(bind(this.getData, this), bind(this.getRawData, this)); // Extend labelLine emphasis
+    this.legendVisualProvider = new LegendVisualProvider(zrUtil.bind(this.getData, this), zrUtil.bind(this.getRawData, this)); // Extend labelLine emphasis
 
     this._defaultLabelLine(option);
   },

package/lib/chart/graph/GraphSeries.js

@@ -238,7 +238,8 @@ var GraphSeries = echarts.extendSeriesModel({
     edgeSymbol: ['none', 'none'],
     edgeSymbolSize: 10,
     edgeLabel: {
-      position: 'middle'
+      position: 'middle',
+      distance: 5
     },
     draggable: false,
     roam: false,

package/lib/chart/graph/GraphView.js

@@ -286,8 +286,7 @@ var _default = echarts.extendChartView({
     }
   },
   focusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
-    var data = this._model.getData();
-
+    var data = seriesModel.getData();
     var graph = data.graph;
     var dataIndex = payload.dataIndex;
     var edgeDataIndex = payload.edgeDataIndex;
@@ -325,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/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/Line.js

@@ -161,40 +161,93 @@ function updateSymbolAndLabelBeforeLineUpdate() {
     var textPosition;
     var textAlign;
     var textVerticalAlign;
-    var distance = 5 * invScale; // End
-
-    if (label.__position === 'end') {
-      textPosition = [d[0] * distance + toPos[0], d[1] * distance + toPos[1]];
-      textAlign = d[0] > 0.8 ? 'left' : d[0] < -0.8 ? 'right' : 'center';
-      textVerticalAlign = d[1] > 0.8 ? 'top' : d[1] < -0.8 ? 'bottom' : 'middle';
-    } // Middle
-    else if (label.__position === 'middle') {
-        var halfPercent = percent / 2;
-        var tangent = line.tangentAt(halfPercent);
-        var n = [tangent[1], -tangent[0]];
-        var cp = line.pointAt(halfPercent);
-
-        if (n[1] > 0) {
-          n[0] = -n[0];
-          n[1] = -n[1];
-        }
-
-        textPosition = [cp[0] + n[0] * distance, cp[1] + n[1] * distance];
-        textAlign = 'center';
-        textVerticalAlign = 'bottom';
-        var rotation = -Math.atan2(tangent[1], tangent[0]);
+    var textOrigin;
+    var distance = label.__labelDistance;
+    var distanceX = distance[0] * invScale;
+    var distanceY = distance[1] * invScale;
+    var halfPercent = percent / 2;
+    var tangent = line.tangentAt(halfPercent);
+    var n = [tangent[1], -tangent[0]];
+    var cp = line.pointAt(halfPercent);
+
+    if (n[1] > 0) {
+      n[0] = -n[0];
+      n[1] = -n[1];
+    }
+
+    var dir = tangent[0] < 0 ? -1 : 1;
+
+    if (label.__position !== 'start' && label.__position !== 'end') {
+      var rotation = -Math.atan2(tangent[1], tangent[0]);
+
+      if (toPos[0] < fromPos[0]) {
+        rotation = Math.PI + rotation;
+      }
+
+      label.attr('rotation', rotation);
+    }
 
-        if (toPos[0] < fromPos[0]) {
-          rotation = Math.PI + rotation;
-        }
+    var dy;
 
-        label.attr('rotation', rotation);
-      } // Start
-      else {
-          textPosition = [-d[0] * distance + fromPos[0], -d[1] * distance + fromPos[1]];
-          textAlign = d[0] > 0.8 ? 'right' : d[0] < -0.8 ? 'left' : 'center';
-          textVerticalAlign = d[1] > 0.8 ? 'bottom' : d[1] < -0.8 ? 'top' : 'middle';
-        }
+    switch (label.__position) {
+      case 'insideStartTop':
+      case 'insideMiddleTop':
+      case 'insideEndTop':
+      case 'middle':
+        dy = -distanceY;
+        textVerticalAlign = 'bottom';
+        break;
+
+      case 'insideStartBottom':
+      case 'insideMiddleBottom':
+      case 'insideEndBottom':
+        dy = distanceY;
+        textVerticalAlign = 'top';
+        break;
+
+      default:
+        dy = 0;
+        textVerticalAlign = 'middle';
+    }
+
+    switch (label.__position) {
+      case 'end':
+        textPosition = [d[0] * distanceX + toPos[0], d[1] * distanceY + toPos[1]];
+        textAlign = d[0] > 0.8 ? 'left' : d[0] < -0.8 ? 'right' : 'center';
+        textVerticalAlign = d[1] > 0.8 ? 'top' : d[1] < -0.8 ? 'bottom' : 'middle';
+        break;
+
+      case 'start':
+        textPosition = [-d[0] * distanceX + fromPos[0], -d[1] * distanceY + fromPos[1]];
+        textAlign = d[0] > 0.8 ? 'right' : d[0] < -0.8 ? 'left' : 'center';
+        textVerticalAlign = d[1] > 0.8 ? 'bottom' : d[1] < -0.8 ? 'top' : 'middle';
+        break;
+
+      case 'insideStartTop':
+      case 'insideStart':
+      case 'insideStartBottom':
+        textPosition = [distanceX * dir + fromPos[0], fromPos[1] + dy];
+        textAlign = tangent[0] < 0 ? 'right' : 'left';
+        textOrigin = [-distanceX * dir, -dy];
+        break;
+
+      case 'insideMiddleTop':
+      case 'insideMiddle':
+      case 'insideMiddleBottom':
+      case 'middle':
+        textPosition = [cp[0], cp[1] + dy];
+        textAlign = 'center';
+        textOrigin = [0, -dy];
+        break;
+
+      case 'insideEndTop':
+      case 'insideEnd':
+      case 'insideEndBottom':
+        textPosition = [-distanceX * dir + toPos[0], toPos[1] + dy];
+        textAlign = tangent[0] >= 0 ? 'right' : 'left';
+        textOrigin = [distanceX * dir, -dy];
+        break;
+    }
 
     label.attr({
       style: {
@@ -203,7 +256,8 @@ function updateSymbolAndLabelBeforeLineUpdate() {
         textAlign: label.__textAlign || textAlign
       },
       position: textPosition,
-      scale: [invScale, invScale]
+      scale: [invScale, invScale],
+      origin: textOrigin
     });
   }
 }
@@ -347,6 +401,13 @@ lineProto._updateCommonStl = function (lineData, idx, seriesScope) {
     label.__verticalAlign = labelStyle.textVerticalAlign; // 'start', 'middle', 'end'
 
     label.__position = labelModel.get('position') || 'middle';
+    var distance = labelModel.get('distance');
+
+    if (!zrUtil.isArray(distance)) {
+      distance = [distance, distance];
+    }
+
+    label.__labelDistance = distance;
   }
 
   if (emphasisText != null) {

package/lib/chart/helper/createRenderPlanner.js

@@ -50,9 +50,12 @@ function _default() {
     var fields = inner(seriesModel);
     var pipelineContext = seriesModel.pipelineContext;
     var originalLarge = fields.large;
-    var originalProgressive = fields.progressiveRender;
-    var large = fields.large = pipelineContext.large;
-    var progressive = fields.progressiveRender = pipelineContext.progressiveRender;
+    var originalProgressive = fields.progressiveRender; // FIXME: if the planner works on a filtered series, `pipelineContext` does not
+    // exists. See #11611 . Probably we need to modify this structure, see the comment
+    // on `performRawSeries` in `Schedular.js`.
+
+    var large = fields.large = pipelineContext && pipelineContext.large;
+    var progressive = fields.progressiveRender = pipelineContext && pipelineContext.progressiveRender;
     return !!(originalLarge ^ large || originalProgressive ^ progressive) && 'reset';
   };
 }

package/lib/chart/pie/PieView.js

@@ -159,7 +159,7 @@ piePieceProto.updateData = function (data, idx, firstCreate) {
   var cursorStyle = itemModel.getShallow('cursor');
   cursorStyle && sector.attr('cursor', cursorStyle); // Toggle selected
 
-  toggleItemSelected(this, data.getItemLayout(idx), seriesModel.isSelected(null, idx), seriesModel.get('selectedOffset'), seriesModel.get('animation')); // Label and text animation should be applied only for transition type animation when update
+  toggleItemSelected(this, data.getItemLayout(idx), seriesModel.isSelected(data.getName(idx)), seriesModel.get('selectedOffset'), seriesModel.get('animation')); // Label and text animation should be applied only for transition type animation when update
 
   var withAnimation = !firstCreate && animationTypeUpdate === 'transition';
 

package/lib/chart/radar/RadarSeries.js

@@ -74,6 +74,26 @@ var RadarSeries = SeriesModel.extend({
       return encodeHTML(axis.name + ' : ' + val);
     }).join('<br />');
   },
+
+  /**
+   * @implement
+   */
+  getTooltipPosition: function (dataIndex) {
+    if (dataIndex != null) {
+      var data = this.getData();
+      var coordSys = this.coordinateSystem;
+      var values = data.getValues(zrUtil.map(coordSys.dimensions, function (dim) {
+        return data.mapDimension(dim);
+      }), dataIndex, true);
+
+      for (var i = 0, len = values.length; i < len; i++) {
+        if (!isNaN(values[i])) {
+          var indicatorAxes = coordSys.getIndicatorAxes();
+          return coordSys.coordToPoint(indicatorAxes[i].dataToCoord(values[i]), i);
+        }
+      }
+    }
+  },
   defaultOption: {
     zlevel: 0,
     z: 2,

package/lib/chart/sankey/SankeySeries.js

@@ -160,6 +160,18 @@ var SankeySeries = SeriesModel.extend({
       option.focusNodeAdjacency = 'allEdges';
     }
   },
+  // Override Series.getDataParams()
+  getDataParams: function (dataIndex, dataType) {
+    var params = SankeySeries.superCall(this, 'getDataParams', dataIndex, dataType);
+
+    if (params.value == null && dataType === 'node') {
+      var node = this.getGraph().getNodeByIndex(dataIndex);
+      var nodeValue = node.getLayout().value;
+      params.value = nodeValue;
+    }
+
+    return params;
+  },
   defaultOption: {
     zlevel: 0,
     z: 2,
@@ -205,7 +217,7 @@ var SankeySeries = SeriesModel.extend({
         show: true
       },
       lineStyle: {
-        opacity: 0.6
+        opacity: 0.5
       }
     },
     animationEasing: 'linear',