echarts 4.5.0-rc.2 → 4.8.0

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,32 @@ 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 barBorderRadius = backgroundModel.get('barBorderRadius') || 0;
+    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 bgLayout = getLayout[coord.type](data, dataIndex);
+        var bgEl = createBackgroundEl(coord, isHorizontalOrRadial, bgLayout);
+        bgEl.useStyle(backgroundModel.getBarItemStyle()); // Only cartesian2d support borderRadius.
+
+        if (coord.type === 'cartesian2d') {
+          bgEl.setShape('r', barBorderRadius);
+        }
+
+        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 +193,25 @@ 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()); // Only cartesian2d support borderRadius.
+
+        if (coord.type === 'cartesian2d') {
+          bgEl.setShape('r', barBorderRadius);
+        }
+
+        bgEls[newIndex] = bgEl;
+        var bgLayout = getLayout[coord.type](data, newIndex);
+        var shape = createBackgroundShape(isHorizontalOrRadial, bgLayout, coord);
+        graphic.updateProps(bgEl, {
+          shape: shape
+        }, animationModel, newIndex);
+      }
+
       var el = oldData.getItemGraphicEl(oldIndex);
 
       if (!data.hasValue(newIndex)) {
@@ -180,9 +219,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 +249,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 +274,8 @@ var _default = echarts.extendChartView({
     }
   },
   _incrementalRenderLarge: function (params, seriesModel) {
+    this._removeBackground();
+
     createLarge(seriesModel, this.group, true);
   },
   dispose: zrUtil.noop,
@@ -240,6 +287,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 +302,10 @@ var _default = echarts.extendChartView({
     }
 
     this._data = null;
+  },
+  _removeBackground: function () {
+    this.group.remove(this._backgroundGroup);
+    this._backgroundGroup = null;
   }
 });
 
@@ -301,8 +355,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 +383,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;
@@ -370,9 +428,11 @@ function removeSector(dataIndex, animationModel, el) {
 }
 
 var getLayout = {
+  // itemModel is only used to get borderWidth, which is not needed
+  // when calculating bar background layout.
   cartesian2d: function (data, dataIndex, itemModel) {
     var layout = data.getItemLayout(dataIndex);
-    var fixedLineWidth = getLineWidth(itemModel, layout); // fix layout with lineWidth
+    var fixedLineWidth = itemModel ? getLineWidth(itemModel, layout) : 0; // fix layout with lineWidth
 
     var signX = layout.width > 0 ? 1 : -1;
     var signY = layout.height > 0 ? 1 : -1;
@@ -396,9 +456,14 @@ var getLayout = {
   }
 };
 
+function isZeroOnPolar(layout) {
+  return layout.startAngle != null && layout.endAngle != null && layout.startAngle === layout.endAngle;
+}
+
 function updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHorizontal, isPolar) {
   var color = data.getItemVisual(dataIndex, 'color');
   var opacity = data.getItemVisual(dataIndex, 'opacity');
+  var stroke = data.getVisual('borderColor');
   var itemStyleModel = itemModel.getModel('itemStyle');
   var hoverStyle = itemModel.getModel('emphasis.itemStyle').getBarItemStyle();
 
@@ -407,7 +472,8 @@ function updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHori
   }
 
   el.useStyle(zrUtil.defaults({
-    fill: color,
+    stroke: isZeroOnPolar(layout) ? 'none' : stroke,
+    fill: isZeroOnPolar(layout) ? 'none' : color,
     opacity: opacity
   }, itemStyleModel.getBarItemStyle()));
   var cursorStyle = itemModel.getShallow('cursor');
@@ -418,13 +484,20 @@ function updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHori
     setLabel(el.style, hoverStyle, itemModel, color, seriesModel, dataIndex, labelPositionOutside);
   }
 
+  if (isZeroOnPolar(layout)) {
+    hoverStyle.fill = hoverStyle.stroke = 'none';
+  }
+
   graphic.setHoverStyle(el, hoverStyle);
 } // In case width or height are too small.
 
 
 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({
@@ -453,6 +526,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')
@@ -460,8 +558,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.
@@ -517,4 +615,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/bar/BaseBarSeries.js

@@ -43,7 +43,9 @@ var createListFromArray = require("../helper/createListFromArray");
 var _default = SeriesModel.extend({
   type: 'series.__base_bar__',
   getInitialData: function (option, ecModel) {
-    return createListFromArray(this.getSource(), this);
+    return createListFromArray(this.getSource(), this, {
+      useEncodeDefaulter: true
+    });
   },
   getMarkerPosition: function (value) {
     var coordSys = this.coordinateSystem;

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/effectScatter/EffectScatterSeries.js

@@ -44,7 +44,9 @@ var _default = SeriesModel.extend({
   type: 'series.effectScatter',
   dependencies: ['grid', 'polar'],
   getInitialData: function (option, ecModel) {
-    return createListFromArray(this.getSource(), this);
+    return createListFromArray(this.getSource(), this, {
+      useEncodeDefaulter: true
+    });
   },
   brushSelector: 'point',
   defaultOption: {

package/lib/chart/funnel/FunnelSeries.js

@@ -20,12 +20,20 @@
 
 var echarts = require("../../echarts");
 
+var zrUtil = require("zrender/lib/core/util");
+
 var createListSimply = require("../helper/createListSimply");
 
 var _model = require("../../util/model");
 
 var defaultEmphasis = _model.defaultEmphasis;
 
+var _sourceHelper = require("../../data/helper/sourceHelper");
+
+var makeSeriesEncodeForNameBased = _sourceHelper.makeSeriesEncodeForNameBased;
+
+var LegendVisualProvider = require("../../visual/LegendVisualProvider");
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -50,15 +58,15 @@ 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.legendDataProvider = function () {
-      return this.getRawData();
-    }; // Extend labelLine emphasis
-
+    this.legendVisualProvider = new LegendVisualProvider(zrUtil.bind(this.getData, this), zrUtil.bind(this.getRawData, this)); // Extend labelLine emphasis
 
     this._defaultLabelLine(option);
   },
   getInitialData: function (option, ecModel) {
-    return createListSimply(this, ['value']);
+    return createListSimply(this, {
+      coordDimensions: ['value'],
+      encodeDefaulter: zrUtil.curry(makeSeriesEncodeForNameBased, this)
+    });
   },
   _defaultLabelLine: function (option) {
     // Extend labelLine emphasis

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,8 @@ var encodeHTML = _format.encodeHTML;
 
 var createGraphFromNodeEdge = require("../helper/createGraphFromNodeEdge");
 
+var LegendVisualProvider = require("../../visual/LegendVisualProvider");
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -57,12 +59,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();
@@ -233,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

@@ -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/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');