echarts 4.5.0 → 4.9.0

package/extension/bmap/BMapView.js

@@ -38,6 +38,16 @@ var echarts = require("echarts");
 * specific language governing permissions and limitations
 * under the License.
 */
+function isEmptyObject(obj) {
+  for (var key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
 var _default = echarts.extendComponentView({
   type: 'bmap',
   render: function (bMapModel, ecModel, api) {
@@ -72,13 +82,11 @@ var _default = echarts.extendComponentView({
       });
     }
 
-    bmap.removeEventListener('moving', this._oldMoveHandler); // FIXME
-    // Moveend may be triggered by centerAndZoom method when creating coordSys next time
-    // bmap.removeEventListener('moveend', this._oldMoveHandler);
-
+    bmap.removeEventListener('moving', this._oldMoveHandler);
+    bmap.removeEventListener('moveend', this._oldMoveHandler);
     bmap.removeEventListener('zoomend', this._oldZoomEndHandler);
-    bmap.addEventListener('moving', moveHandler); // bmap.addEventListener('moveend', moveHandler);
-
+    bmap.addEventListener('moving', moveHandler);
+    bmap.addEventListener('moveend', moveHandler);
     bmap.addEventListener('zoomend', zoomEndHandler);
     this._oldMoveHandler = moveHandler;
     this._oldZoomEndHandler = zoomEndHandler;
@@ -109,8 +117,8 @@ var _default = echarts.extendComponentView({
 
     if (JSON.stringify(originalStyle) !== mapStyleStr) {
       // FIXME May have blank tile when dragging if setMapStyle
-      if (Object.keys(newMapStyle).length) {
-        bmap.setMapStyle(newMapStyle);
+      if (!isEmptyObject(newMapStyle2)) {
+        bmap.setMapStyle(echarts.util.clone(newMapStyle));
       }
 
       bMapModel.__mapStyle = JSON.parse(mapStyleStr);
@@ -125,8 +133,8 @@ var _default = echarts.extendComponentView({
 
     if (JSON.stringify(originalStyle2) !== mapStyleStr2) {
       // FIXME May have blank tile when dragging if setMapStyle
-      if (Object.keys(newMapStyle2).length) {
-        bmap.setMapStyleV2(newMapStyle2);
+      if (!isEmptyObject(newMapStyle2)) {
+        bmap.setMapStyleV2(echarts.util.clone(newMapStyle2));
       }
 
       bMapModel.__mapStyle2 = JSON.parse(mapStyleStr2);

package/extension-src/bmap/BMapCoordSys.js

@@ -179,7 +179,12 @@ BMapCoordSys.create = function (ecModel, api) {
             // Not support IE8
             bmapRoot.classList.add('ec-extension-bmap');
             root.appendChild(bmapRoot);
-            var bmap = bmapModel.__bmap = new BMap.Map(bmapRoot);
+
+            // initialize bmap
+            var mapOptions = bmapModel.get('mapOptions') || {};
+            // Not support `mapType`, use `bmap.setMapType(MapType)` instead.
+            delete mapOptions.mapType;
+            var bmap = bmapModel.__bmap = new BMap.Map(bmapRoot, mapOptions);
 
             var overlay = new Overlay(viewportRoot);
             bmap.addOverlay(overlay);
@@ -196,8 +201,13 @@ BMapCoordSys.create = function (ecModel, api) {
         var center = bmapModel.get('center');
         var zoom = bmapModel.get('zoom');
         if (center && zoom) {
-            var pt = new BMap.Point(center[0], center[1]);
-            bmap.centerAndZoom(pt, zoom);
+            var bmapCenter = bmap.getCenter();
+            var bmapZoom = bmap.getZoom();
+            var centerOrZoomChanged = bmapModel.centerOrZoomChanged([bmapCenter.lng, bmapCenter.lat], bmapZoom);
+            if (centerOrZoomChanged) {
+                var pt = new BMap.Point(center[0], center[1]);
+                bmap.centerAndZoom(pt, zoom);
+            }
         }
 
         bmapCoordSys = new BMapCoordSys(bmap, api);
@@ -215,4 +225,4 @@ BMapCoordSys.create = function (ecModel, api) {
     });
 };
 
-export default BMapCoordSys;
+export default BMapCoordSys;

package/extension-src/bmap/BMapModel.js

@@ -47,10 +47,15 @@ export default echarts.extendComponentModel({
 
         zoom: 5,
 
+        // 2.0 http://lbsyun.baidu.com/custom/index.htm
         mapStyle: {},
 
+        // 3.0 http://lbsyun.baidu.com/index.php?title=open/custom
         mapStyleV2: {},
 
+        // See https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a0b1
+        mapOptions: {},
+
         roam: false
     }
-});
+});

package/extension-src/bmap/BMapView.js

@@ -19,6 +19,15 @@
 
 import * as echarts from 'echarts';
 
+function isEmptyObject(obj) {
+    for (var key in obj) {
+        if (obj.hasOwnProperty(key)) {
+            return false;
+        }
+    }
+    return true;
+}
+
 export default echarts.extendComponentView({
     type: 'bmap',
 
@@ -58,12 +67,10 @@ export default echarts.extendComponentView({
         }
 
         bmap.removeEventListener('moving', this._oldMoveHandler);
-        // FIXME
-        // Moveend may be triggered by centerAndZoom method when creating coordSys next time
-        // bmap.removeEventListener('moveend', this._oldMoveHandler);
+        bmap.removeEventListener('moveend', this._oldMoveHandler);
         bmap.removeEventListener('zoomend', this._oldZoomEndHandler);
         bmap.addEventListener('moving', moveHandler);
-        // bmap.addEventListener('moveend', moveHandler);
+        bmap.addEventListener('moveend', moveHandler);
         bmap.addEventListener('zoomend', zoomEndHandler);
 
         this._oldMoveHandler = moveHandler;
@@ -95,8 +102,8 @@ export default echarts.extendComponentView({
         var mapStyleStr = JSON.stringify(newMapStyle);
         if (JSON.stringify(originalStyle) !== mapStyleStr) {
             // FIXME May have blank tile when dragging if setMapStyle
-            if (Object.keys(newMapStyle).length) {
-                bmap.setMapStyle(newMapStyle);
+            if (!isEmptyObject(newMapStyle2)) {
+                bmap.setMapStyle(echarts.util.clone(newMapStyle));
             }
             bMapModel.__mapStyle = JSON.parse(mapStyleStr);
         }
@@ -109,12 +116,12 @@ export default echarts.extendComponentView({
         var mapStyleStr2 = JSON.stringify(newMapStyle2);
         if (JSON.stringify(originalStyle2) !== mapStyleStr2) {
             // FIXME May have blank tile when dragging if setMapStyle
-            if (Object.keys(newMapStyle2).length) {
-                bmap.setMapStyleV2(newMapStyle2);
+            if (!isEmptyObject(newMapStyle2)) {
+                bmap.setMapStyleV2(echarts.util.clone(newMapStyle2));
             }
             bMapModel.__mapStyle2 = JSON.parse(mapStyleStr2);
         }
 
         rendering = false;
     }
-});
+});

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,38 @@ var _default = echarts.extendChartView({
     // And don't want the label are clipped.
 
     var roundCap = seriesModel.get('roundCap', true);
-    data.diff(oldData).add(function (dataIndex) {
-      if (!data.hasValue(dataIndex)) {
-        return;
+    var drawBackground = seriesModel.get('showBackground', true);
+    var backgroundModel = seriesModel.getModel('backgroundStyle');
+    var barBorderRadius = backgroundModel.get('barBorderRadius') || 0;
+    var bgEls = [];
+    var oldBgEls = this._backgroundEls || [];
+
+    var createBackground = function (dataIndex) {
+      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;
+      return bgEl;
+    };
+
+    data.diff(oldData).add(function (dataIndex) {
       var itemModel = data.getItemModel(dataIndex);
       var layout = getLayout[coord.type](data, dataIndex, itemModel);
 
+      if (drawBackground) {
+        createBackground(dataIndex);
+      } // If dataZoom in filteMode: 'empty', the baseValue can be set as NaN in "axisProxy".
+
+
+      if (!data.hasValue(dataIndex)) {
+        return;
+      }
+
       if (needsClip) {
         // Clip will modify the layout params.
         // And return a boolean to determine if the shape are fully clipped.
@@ -173,6 +199,32 @@ 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;
+
+        if (oldBgEls.length === 0) {
+          bgEl = createBackground(oldIndex);
+        } else {
+          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 +232,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 +262,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 +287,8 @@ var _default = echarts.extendChartView({
     }
   },
   _incrementalRenderLarge: function (params, seriesModel) {
+    this._removeBackground();
+
     createLarge(seriesModel, this.group, true);
   },
   dispose: zrUtil.noop,
@@ -240,6 +300,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 +315,10 @@ var _default = echarts.extendChartView({
     }
 
     this._data = null;
+  },
+  _removeBackground: function () {
+    this.group.remove(this._backgroundGroup);
+    this._backgroundGroup = null;
   }
 });
 
@@ -294,15 +361,37 @@ var clip = {
 
     return clipped;
   },
-  polar: function (coordSysClipArea) {
-    return false;
+  polar: function (coordSysClipArea, layout) {
+    var signR = layout.r0 <= layout.r ? 1 : -1; // Make sure r is larger than r0
+
+    if (signR < 0) {
+      var r = layout.r;
+      layout.r = layout.r0;
+      layout.r0 = r;
+    }
+
+    var r = mathMin(layout.r, coordSysClipArea.r);
+    var r0 = mathMax(layout.r0, coordSysClipArea.r0);
+    layout.r = r;
+    layout.r0 = r0;
+    var clipped = r - r0 < 0; // Reverse back
+
+    if (signR < 0) {
+      var r = layout.r;
+      layout.r = layout.r0;
+      layout.r0 = r;
+    }
+
+    return clipped;
   }
 };
 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 +416,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 +461,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 +489,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 +505,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 +517,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 +559,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 +591,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 +648,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/bar/PictorialBarSeries.js

@@ -52,7 +52,7 @@ var PictorialBarSeries = BaseBarSeries.extend({
     symbolOffset: null,
     symbolMargin: null,
     // start margin and end margin. Can be a number or a percent string.
-    // Auto margin by defualt.
+    // Auto margin by default.
     symbolRepeat: false,
     // false/null/undefined, means no repeat.
     // Can be true, means auto calculate repeat times and cut by data.

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
@@ -99,6 +107,7 @@ var FunnelSeries = echarts.extendSeriesModel({
     maxSize: '100%',
     sort: 'descending',
     // 'ascending', 'descending'
+    orient: 'vertical',
     gap: 0,
     funnelAlign: 'center',
     label: {