Merge branch 'master' of https://github.com/pissang/echarts-next

Conflicts:
	test/dynamicData.html

src/chart/helper/DataSymbol.js

@@ -6,12 +6,16 @@ define(function (require) {
     var graphic = require('../../util/graphic');
 
     function createSymbol(data, idx, enableAnimation) {
-        var point = data.getItemLayout(idx).point;
+        var point = data.getItemLayout(idx);
         var color = data.getItemVisual(idx, 'color');
 
         var symbolSize = data.getItemVisual(idx, 'symbolSize');
         var symbolType = data.getItemVisual(idx, 'symbol') || 'circle';
 
+        if (!symbolType || symbolType === 'none') {
+            return;
+        }
+
         var symbolEl = symbolCreators.createSymbol(
             symbolType, -0.5, -0.5, 1, 1, color
         );
@@ -73,11 +77,15 @@ define(function (require) {
                         data, newIdx, enableAnimation
                     );
 
-                    data.setItemGraphicEl(newIdx, symbolEl);
+                    if (symbolEl) {
+                        data.setItemGraphicEl(newIdx, symbolEl);
 
-                    group.add(symbolEl);
+                        group.add(symbolEl);
+                    }
                 })
                 .update(function (newIdx, oldIdx) {
+                    var el = oldData.getItemGraphicEl(oldIdx);
+
                     // Empty data
                     if (!data.hasValue(newIdx)) {
                         group.remove(el);
@@ -85,15 +93,18 @@ define(function (require) {
                     }
 
                     var symbolSize = data.getItemVisual(newIdx, 'symbolSize');
-                    var point = data.getItemLayout(newIdx).point;
-                    var el = oldData.getItemGraphicEl(oldIdx);
+                    var point = data.getItemLayout(newIdx);
 
                     // Symbol changed
                     if (oldData.getItemVisual(newIdx, 'symbol') !== data.getItemVisual(oldIdx, 'symbol')) {
                         // Remove the old one
-                        group.remove(el);
+                        el && group.remove(el);
                         el = createSymbol(data, newIdx, enableAnimation);
                     }
+                    // Disable symbol by setting `symbol: 'none'`
+                    if (!el) {
+                        return;
+                    }
 
                     // Color changed
                     var newColor = data.getItemVisual(newIdx, 'color');

src/chart/line.js

@@ -10,6 +10,6 @@ define(function (require) {
         require('../visual/symbol'), 'line', 'circle', 'line'
     ));
     echarts.registerLayout(zrUtil.curry(
-        require('../layout/line'), 'line'
+        require('../layout/points'), 'line'
     ));
 });
\ No newline at end of file

src/chart/line/Area.js

+define(function(require) {
+    'use strict';
+
+    return require('zrender/graphic/Path').extend({
+
+        type: 'ec-area',
+
+        shape: {
+            points: [],
+            // Offset between stacked base points and points
+            stackedOnPoints: []
+        },
+
+        buildPath: function (ctx, shape) {
+            var points = shape.points;
+            var stackedOnPoints = shape.stackedOnPoints;
+
+            var i = 0;
+            var len = points.length;
+            while (i < points.length) {
+                for (var k = i; k < len; k++) {
+                    var p = points[k];
+                    if (p == null || isNaN(p[0]) || isNaN(p[1])) {
+                        break;
+                    }
+                    ctx[k === i ? 'moveTo' : 'lineTo'](p[0], p[1]);
+                }
+                var tmp = k;
+                for (k--; k >= i; k--) {
+                    var p = stackedOnPoints[k];
+                    ctx.lineTo(p[0], p[1]);
+                }
+                i = tmp + 1;
+            }
+        }
+    });
+});
\ No newline at end of file

src/chart/line/LineView.js

-// TODO Area
-// TODO Null data
+// TODO Smooth
+// TODO '-' data
 define(function(require) {
 
     'use strict';
@@ -9,6 +9,7 @@ define(function(require) {
     var DataSymbol = require('../helper/DataSymbol');
     var lineAnimationDiff = require('./lineAnimationDiff');
     var graphic = require('../../util/graphic');
+    var AreaPath = require('./Area');
 
     function isPointsSame(points1, points2) {
         if (points1.length !== points2.length) {
@@ -36,6 +37,45 @@ define(function(require) {
         return extent;
     }
 
+    function getDataArray(coordSys, data, points) {
+        var dimensions = coordSys.type === 'cartesian2d' ? ['x', 'y'] : ['radius', 'angle'];
+        return data.map(dimensions, function (x, y, idx) {
+            return {
+                x: x,
+                y: y,
+                point: points[idx],
+                name: data.getName(idx),
+                idx: idx,
+                rawIdx: data.getRawIndex(idx)
+            };
+        });
+    }
+
+    /**
+     * @param {module:echarts/coord/cartesian/Cartesian2D|module:echarts/coord/polar/Polar} coordSys
+     * @param {module:echarts/data/List} data
+     * @param {Array.<Array.<number>>} points
+     * @private
+     */
+    function getStackedOnPoints(coordSys, data, points) {
+        var stackedOnData = data.stackedOn;
+        if (stackedOnData) {
+            return stackedOnData.map(stackedOnData.getItemLayout, true);
+        }
+        else {
+            var valueAxis = coordSys.getOtherAxis(coordSys.getBaseAxis());
+            var valueStart = valueAxis.getExtent()[0];
+            var dim = valueAxis.dim;
+            var baseCoordOffset = dim === 'x' || dim === 'radius' ? 1 : 0;
+            return zrUtil.map(points, function (point, idx) {
+                var pt = [];
+                pt[baseCoordOffset] = point[baseCoordOffset];
+                pt[1 - baseCoordOffset] = valueStart;
+                return pt;
+            });
+        }
+    }
+
     return require('../../echarts').extendChartView({
 
         type: 'line',
@@ -48,98 +88,93 @@ define(function(require) {
             var coordSys = seriesModel.coordinateSystem;
             var group = this.group;
             var data = seriesModel.getData();
-            var lineStyleNormalModel = seriesModel.getModel('itemStyle.normal.lineStyle');
-
-            var points = data.map(function (idx) {
-                var layout = data.getItemLayout(idx);
-                return layout && layout.point;
-            }, true);
-            var dimensions = coordSys.type === 'cartesian2d' ? ['x', 'y'] : ['radius', 'angle'];
-            var plainDataList = data.map(dimensions, function (x, y, idx) {
-                return {
-                    x: x,
-                    y: y,
-                    point: points[idx],
-                    name: data.getName(idx),
-                    idx: idx,
-                    rawIdx: data.getRawIndex(idx)
-                };
-            });
+            var lineStyleModel = seriesModel.getModel('itemStyle.normal.lineStyle');
+            var areaStyleModel = seriesModel.getModel('itemStyle.normal.areaStyle');
+
+            var points = data.map(data.getItemLayout, true);
+            var dataArray = getDataArray(coordSys, data, points);
 
-            var prevCoordSys = this._coordSys;
             var isCoordSysPolar = coordSys.type === 'polar';
+            var prevCoordSys = this._coordSys;
 
-            // FIXME Update after animation
-            // if (
-            //     isCoordSysPolar
-            //     && points.length > 2
-            //     && coordinateSystem.getAngleAxis().type === 'category'
-            // ) {
-            //     // Close polyline
-            //     points.push(Array.prototype.slice.call(points[0]));
-            // }
-
-            // Draw symbols, enable animation on the first draw
             var dataSymbol = this._dataSymbol;
             var polyline = this._polyline;
-            var enableAnimation = ecModel.get('animation');
+            var polygon = this._polygon;
+
+            var hasAnimation = ecModel.get('animation');
+
+            var isAreaChart = !areaStyleModel.isEmpty();
+            var stackedOnPoints = getStackedOnPoints(
+                coordSys, data, points
+            );
+
+            var stackedOnDataArray = data.stackedOn ? getDataArray(
+                    coordSys, data.stackedOn, stackedOnPoints
+                ) : zrUtil.map(stackedOnPoints, function (pt) {
+                    return {
+                        point: pt
+                    };
+                });
 
             // Initialization animation or coordinate system changed
             if (
                 !(polyline
                 && prevCoordSys.type === coordSys.type
-                && enableAnimation)
+                && hasAnimation)
             ) {
-                // Remove previous created polyline
-                if (polyline) {
-                    group.remove(polyline);
+                dataSymbol.updateData(data, hasAnimation);
+
+                polyline = this._newPolyline(group, points, coordSys, hasAnimation);
+                if (isAreaChart) {
+                    polygon = this._newPolygon(
+                        group, points,
+                        stackedOnPoints,
+                        coordSys, hasAnimation
+                    );
                 }
+            }
+            else {
 
                 dataSymbol.updateData(data, false);
 
-                polyline = new graphic.Polyline({
-                    shape: {
-                        points: points
-                    }
-                });
-
-                // var removeClipPath = zrUtil.bind(polyline.removeClipPath, polyline);
-                var clipPath = isCoordSysPolar
-                    ? this._createPolarClipShape(coordSys, enableAnimation)
-                    : this._createGridClipShape(coordSys, enableAnimation);
-
-                polyline.setClipPath(clipPath);
-
-                group.add(polyline);
-
-                this._polyline = polyline;
-            }
-            else {
                 // Update clipPath
-                var clipPath = isCoordSysPolar
-                    ? this._createPolarClipShape(coordSys)
-                    : this._createGridClipShape(coordSys);
-                polyline.setClipPath(clipPath);
+                // FIXME Clip path used by more than one elements
+                polyline.setClipPath(
+                    this._createClipShape(coordSys)
+                );
+                polygon && polygon.setClipPath(
+                    this._createClipShape(coordSys)
+                );
 
-                dataSymbol.updateData(data, false);
                 // In the case data zoom triggerred refreshing frequently
                 // Data may not change if line has a category axis. So it should animate nothing
-                if (!isPointsSame(this._plainDataList, plainDataList)) {
+                if (!isPointsSame(this._dataArray, dataArray)) {
                     this._updateAnimation(
-                        data, plainDataList, coordSys
+                        data, dataArray, stackedOnDataArray, coordSys
                     );
                 }
                 // Add back
                 group.add(polyline);
+                group.add(polygon);
             }
 
             polyline.setStyle(zrUtil.extend(
-                lineStyleNormalModel.getLineStyle(),
+                lineStyleModel.getLineStyle(),
                 {
                     stroke: data.getVisual('color'),
                     lineJoin: 'bevel'
                 }
             ));
+            if (polygon) {
+                polygon.style.opacity = 0.7;
+                polygon.setStyle(zrUtil.extend(
+                    areaStyleModel.getAreaStyle(),
+                    {
+                        fill: data.getVisual('color'),
+                        lineJoin: 'bevel'
+                    }
+                ));
+            }
 
             // Make sure symbols is on top of line
             group.remove(dataSymbol.group);
@@ -148,13 +183,76 @@ define(function(require) {
             this._data = data;
 
             // Save the coordinate system and data for transition animation when data changed
-            this._plainDataList = plainDataList;
+            this._dataArray = dataArray;
+            this._stackedOnDataArray = stackedOnDataArray;
             this._coordSys = coordSys;
 
             !isCoordSysPolar && !seriesModel.get('showAllSymbol')
                 && this._updateSymbolDisplay(data, coordSys);
         },
 
+        /**
+         * @param {module:zrender/container/Group} group
+         * @param {Array.<Array.<number>>} points
+         * @param {module:echarts/coord/cartesian/Cartesian2D|module:echarts/coord/polar/Polar} coordSys
+         * @param {boolean} hasAnimation
+         * @private
+         */
+        _newPolyline: function (group, points, coordSys, hasAnimation) {
+            var polyline = this._polyline;
+            // Remove previous created polyline
+            if (polyline) {
+                group.remove(polyline);
+            }
+
+            polyline = new graphic.Polyline({
+                shape: {
+                    points: points
+                },
+                silent: true
+            });
+
+            var clipPath = this._createClipShape(coordSys, hasAnimation);
+            polyline.setClipPath(clipPath);
+
+            group.add(polyline);
+
+            this._polyline = polyline;
+
+            return polyline;
+        },
+
+        /**
+         * @param {module:zrender/container/Group} group
+         * @param {Array.<Array.<number>>} stackedOnPoints
+         * @param {Array.<Array.<number>>} points
+         * @param {module:echarts/coord/cartesian/Cartesian2D|module:echarts/coord/polar/Polar} coordSys
+         * @param {boolean} hasAnimation
+         * @private
+         */
+        _newPolygon: function (group, points, stackedOnPoints, coordSys, hasAnimation) {
+            var polygon = this._polygon;
+            // Remove previous created polygon
+            if (polygon) {
+                group.remove(polygon);
+            }
+
+            polygon = new AreaPath({
+                shape: {
+                    points: points,
+                    stackedOnPoints: stackedOnPoints
+                },
+                silent: true
+            });
+
+            var clipPath = this._createClipShape(coordSys, hasAnimation);
+            polygon.setClipPath(clipPath);
+
+            group.add(polygon);
+
+            this._polygon = polygon;
+            return polygon;
+        },
         /**
          * @private
          */
@@ -174,10 +272,14 @@ define(function(require) {
         /**
          * @private
          */
-        _updateAnimation: function (data, plainDataList, coordSys) {
+        _updateAnimation: function (data, dataArray, stackedOnDataArray, coordSys) {
             var polyline = this._polyline;
+            var polygon = this._polygon;
+
             var diff = lineAnimationDiff(
-                this._plainDataList, plainDataList, this._coordSys, coordSys
+                this._dataArray, dataArray,
+                this._stackedOnDataArray, stackedOnDataArray,
+                this._coordSys, coordSys
             );
             polyline.shape.points = diff.current;
             polyline.animateTo({
@@ -186,6 +288,19 @@ define(function(require) {
                 }
             }, 300, 'cubicOut');
 
+            if (polygon) {
+                var polygonShape = polygon.shape;
+                polygonShape.points = diff.current;
+                polygonShape.stackedOnPoints = diff.stackedOnCurrent;
+
+                polygon.animateTo({
+                    shape: {
+                        points: diff.next,
+                        stackedOnPoints: diff.stackedOnNext
+                    }
+                }, 300, 'cubicOut');
+            }
+
             var updatedDataInfo = [];
             var addedDataIndices = [];
             var diffStatus = diff.status;
@@ -193,10 +308,13 @@ define(function(require) {
             for (var i = 0; i < diffStatus.length; i++) {
                 var cmd = diffStatus[i].cmd;
                 if (cmd === '=') {
-                    updatedDataInfo.push({
-                        el: data.getItemGraphicEl(diffStatus[i].idx1),
-                        ptIdx: i    // Index of points
-                    });
+                    var el = data.getItemGraphicEl(diffStatus[i].idx1);
+                    if (el) {
+                        updatedDataInfo.push({
+                            el: el,
+                            ptIdx: i    // Index of points
+                        });
+                    }
                 }
                 else if (cmd === '+') {
                     addedDataIndices.push(diffStatus[i].idx);
@@ -206,11 +324,13 @@ define(function(require) {
             if (polyline.animators) {
                 for (var i = 0; i < addedDataIndices.length; i++) {
                     var el = data.getItemGraphicEl(addedDataIndices[i]);
-                    var oldScale = el.scale;
-                    el.scale = [1, 1];
-                    el.animateTo({
-                        scale: oldScale
-                    }, 300, 300, 'cubicOut');
+                    if (el) {
+                        var oldScale = el.scale;
+                        el.scale = [1, 1];
+                        el.animateTo({
+                            scale: oldScale
+                        }, 300, 300, 'cubicOut');
+                    }
                 }
                 polyline.animators[0].during(function () {
                     for (var i = 0; i < updatedDataInfo.length; i++) {
@@ -226,7 +346,13 @@ define(function(require) {
             }
         },
 
-        _createGridClipShape: function (cartesian, animation, categoryAxis) {
+        _createClipShape: function (coordSys, hasAnimation) {
+            return coordSys.type === 'polar'
+                ? this._createPolarClipShape(coordSys, hasAnimation)
+                : this._createGridClipShape(coordSys, hasAnimation);
+        },
+
+        _createGridClipShape: function (cartesian, animation) {
             var xExtent = getAxisExtentWithGap(cartesian.getAxis('x'));
             var yExtent = getAxisExtentWithGap(cartesian.getAxis('y'));
 
@@ -284,7 +410,9 @@ define(function(require) {
         },
 
         remove: function () {
-            this.group.remove(this._polyline);
+            var group = this.group;
+            group.remove(this._polyline);
+            group.remove(this._polygon);
             this._dataSymbol.remove(true);
         }
     });

src/chart/line/lineAnimationDiff.js

@@ -6,10 +6,33 @@ define(function (require) {
         return a.name === b.name;
     }
 
-    return function (oldData, newData, oldCoordSys, newCoordSys) {
+    function getStackedOnPoint(coordSys, stackedItem, item) {
+        if ('x' in stackedItem) {
+            return coordSys.dataToPoint([stackedItem.x, stackedItem.y]);
+        }
+        else {
+            var baseAxis = coordSys.getBaseAxis();
+            var valueAxis = coordSys.getOtherAxis(baseAxis);
+            var valueStart = valueAxis.getExtent()[0];
+            var dim = valueAxis.dim;
+            dim === 'radius' && (dim = 'x');
+            dim === 'angle' && (dim = 'y');
+            var baseCoordOffset = dim === 'x' ? 1 : 0;
+            var pt = [];
+            pt[baseCoordOffset] = baseAxis.dataToCoord(item[dim === 'y' ? 'x' : 'y']);
+            pt[1 - baseCoordOffset] = valueStart;
+            return pt;
+        }
+    }
+
+    return function (oldData, newData, oldStackedData, newStackedData, oldCoordSys, newCoordSys) {
 
         var oldPoints = [];
         var newPoints = [];
+        // Points for stacking base line
+        var oldStackedPoints = [];
+        var newStackedPoints = [];
+
         var status = [];
         var sortedIndices = [];
         var rawIndices = [];
@@ -27,21 +50,43 @@ define(function (require) {
                 case '=':
                     oldPoints.push(oldData[diffItem.idx].point);
                     newPoints.push(newData[diffItem.idx1].point);
+
+                    oldStackedPoints.push(oldStackedData[diffItem.idx].point);
+                    newStackedPoints.push(newStackedData[diffItem.idx1].point);
+
                     rawIndices.push(newData[diffItem.idx1].rawIdx);
                     break;
                 case '+':
                     var newDataItem = newData[diffItem.idx];
-                    oldPoints.push(oldCoordSys.dataToPoint([newDataItem.x, newDataItem.y]));
+                    var newStackedDataItem = newStackedData[diffItem.idx];
+
+                    oldPoints.push(
+                        oldCoordSys.dataToPoint([newDataItem.x, newDataItem.y])
+                    );
                     newPoints.push(newDataItem.point);
+
+                    oldStackedPoints.push(
+                        getStackedOnPoint(oldCoordSys, newStackedDataItem, newDataItem)
+                    );
+                    newStackedPoints.push(newStackedDataItem.point);
+
                     rawIndices.push(newDataItem.rawIdx);
                     break;
                 case '-':
                     var oldDataItem = oldData[diffItem.idx];
+                    var oldStackedDataItem = oldStackedData[diffItem.idx];
+
                     // Data is replaced. In the case of dynamic data queue
                     // FIXME FIXME FIXME
                     if (oldDataItem.rawIdx !== diffItem.idx) {
                         oldPoints.push(oldDataItem.point);
                         newPoints.push(newCoordSys.dataToPoint([oldDataItem.x, oldDataItem.y]));
+
+                        oldStackedPoints.push(oldStackedDataItem.point);
+                        newStackedPoints.push(
+                            getStackedOnPoint(newCoordSys, oldStackedDataItem, oldDataItem)
+                        );
+
                         rawIndices.push(oldDataItem.rawIdx);
                     }
                     else {
@@ -64,17 +109,29 @@ define(function (require) {
 
         var sortedOldPoints = [];
         var sortedNewPoints = [];
+
+        var sortedOldStackedPoints = [];
+        var sortedNewStackedPoints = [];
+
         var sortedStatus = [];
         for (var i = 0; i < sortedIndices.length; i++) {
-            var oldIndex = sortedIndices[i];
-            sortedOldPoints[i] = oldPoints[oldIndex];
-            sortedNewPoints[i] = newPoints[oldIndex];
-            sortedStatus[i] = status[oldIndex];
+            var idx = sortedIndices[i];
+            sortedOldPoints[i] = oldPoints[idx];
+            sortedNewPoints[i] = newPoints[idx];
+
+            sortedOldStackedPoints[i] = oldStackedPoints[idx];
+            sortedNewStackedPoints[i] = newStackedPoints[idx];
+
+            sortedStatus[i] = status[idx];
         }
 
         return {
             current: sortedOldPoints,
             next: sortedNewPoints,
+
+            stackedOnCurrent: sortedOldStackedPoints,
+            stackedOnNext: sortedNewStackedPoints,
+
             status: sortedStatus
         };
     }

src/chart/pie.js

+define(function (require) {
+
+    var zrUtil = require('zrender/core/util');
+    var echarts = require('../echarts');
+
+    require('./pie/PieSeries');
+    require('./pie/PieView');
+
+    echarts.registerVisualCoding('chart', require('./pie/pieVisual'));
+
+    echarts.registerLayout(zrUtil.curry(
+        require('../layout/pie'), 'pie'
+    ));
+});
\ No newline at end of file

src/chart/pie/PieSeries.js

@@ -7,10 +7,80 @@ define(function(require) {
 
     return SeriesModel.extend({
 
-        type: 'pie',
+        type: 'series.pie',
 
-        getInitialData: function (option) {
-            return List.fromArray(option.data, this, 1);
+        getInitialData: function (option, ecModel) {
+            var list = new List([{
+                name: 'x',
+                stackable: true
+            }], this);
+            list.initData(option.data);
+            return list;
+        },
+
+        defaultOption: {
+            zlevel: 0,
+            z: 2,
+            clickable: true,
+            legendHoverLink: true,
+            // 默认全局居中
+            center: ['50%', '50%'],
+            radius: [0, '75%'],
+            // 默认顺时针
+            clockWise: true,
+            startAngle: 90,
+            // 最小角度改为0
+            minAngle: 0,
+            // 选中是扇区偏移量
+            selectedOffset: 10,
+            // 选择模式，默认关闭，可选single，multiple
+            // selectedMode: false,
+            // 南丁格尔玫瑰图模式，'radius'（半径） | 'area'（面积）
+            // roseType: null,
+            itemStyle: {
+                normal: {
+                    // color: 各异,
+                    borderColor: 'rgba(0,0,0,0)',
+                    borderWidth: 1,
+                    label: {
+                        show: true,
+                        position: 'outer'
+                        // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
+                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
+                        // distance: 当position为inner时有效，为label位置到圆心的距离与圆半径(环状图为内外半径和)的比例系数
+                    },
+                    labelLine: {
+                        show: true,
+                        length: 20,
+                        lineStyle: {
+                            // color: 各异,
+                            width: 1,
+                            type: 'solid'
+                        }
+                    }
+                },
+                emphasis: {
+                    // color: 各异,
+                    borderColor: 'rgba(0,0,0,0)',
+                    borderWidth: 1,
+                    label: {
+                        show: false
+                        // position: 'outer'
+                        // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
+                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
+                        // distance: 当position为inner时有效，为label位置到圆心的距离与圆半径(环状图为内外半径和)的比例系数
+                    },
+                    labelLine: {
+                        show: false,
+                        length: 20,
+                        lineStyle: {
+                            // color: 各异,
+                            width: 1,
+                            type: 'solid'
+                        }
+                    }
+                }
+            }
         }
     });
 });
\ No newline at end of file

src/chart/pie/PieView.js

 define(function (require) {
 
-    var Pie = require('../ChartView').extend({
+    var graphic = require('../../util/graphic');
+    var zrUtil = require('zrender/core/util');
 
-        type: 'pie',
-
-        init: function (api) {
+    var Pie = require('../../view/Chart').extend({
 
-        },
+        type: 'pie',
 
         render: function (seriesModel, ecModel, api) {
-
+            var data = seriesModel.getData();
+            var oldData = this._data;
+            var group = this.group;
+            data.diff(oldData)
+                .add(function (idx) {
+                    var sector = new graphic.Sector({
+                        shape: data.getItemLayout(idx)
+                    });
+                    data.setItemGraphicEl(idx, sector);
+
+                    group.add(sector);
+                })
+                .update(function (newIdx, oldIdx) {
+                    var sector = oldData.getItemGraphicEl(oldIdx);
+
+                    group.add(sector);
+                })
+                .remove(function (idx) {
+                    var sector = oldData.getItemGraphicEl(idx);
+                    group.remove(sector);
+                })
+                .execute();
+
+            data.eachItemGraphicEl(function (sector, idx) {
+                var itemModel = data.getItemModel(idx);
+                sector.setStyle(
+                    zrUtil.extend(
+                        {
+                            fill: data.getItemVisual(idx, 'color')
+                        },
+                        itemModel.getModel('itemStyle.normal').getItemStyle()
+                    )
+                );
+
+                graphic.setHoverStyle(
+                    sector,
+                    itemModel.getModel('itemStyle.emphasis').getItemStyle()
+                );
+            });
         },
 
         dispose: function () {}

src/chart/pie/DataItemFilter.js → src/chart/pie/dataItemFilter.js

@@ -2,7 +2,7 @@ define(function () {
     return function (ecModel) {
         var legendModel = legendModel.getComponent('legend');
         ecModel.eachSeriesByType('pie', function (series) {
-            series.getData().filter(function (dataItem) {
+            series.getData().filterSelf(function (dataItem) {
                 return legendModel.isSelected(dataItem.name);
             }, this);
         }, this);

src/chart/pie/pieVisual.js

+define(function (require) {
+
+    return function (ecModel) {
+        ecModel.eachSeriesByType('pie', function (seriesModel) {
+            var colorList = ecModel.get('color');
+            var data = seriesModel.getData();
+
+            data.each(function (idx) {
+                data.setItemVisual(idx, 'color', colorList[idx]);
+            });
+        });
+    }
+});
\ No newline at end of file

src/component/dataZoom/DataZoomView.js

@@ -9,6 +9,20 @@ define(function (require) {
     var DEFAULT_FRAME_BORDER_WIDTH = 1;
     var DEFAULT_HANDLE_INNER_COLOR = '#fff';
 
+    function subPixelOptimize(shape, name) {
+        var subPixelOptimizeLineWidth = {
+            startFrame: DEFAULT_FRAME_BORDER_WIDTH,
+            endFrame: DEFAULT_FRAME_BORDER_WIDTH
+        };
+        if (subPixelOptimizeLineWidth.hasOwnProperty(name)) {
+            shape = graphic.subPixelOptimizeRect({
+                shape: shape,
+                style: {lineWidth: subPixelOptimizeLineWidth[name]}
+            }).shape;
+        }
+        return shape;
+    }
+
     return echarts.extendComponentView({
 
         type: 'dataZoom',
@@ -173,20 +187,6 @@ define(function (require) {
             zrUtil.each(this._updatableShapes, function (shape, name) {
                 shape.attr('shape', subPixelOptimize(this._layout.layout[name].shape, name));
             }, this);
-
-            function subPixelOptimize(shape, name) {
-                var subPixelOptimizeLineWidth = {
-                    startFrame: DEFAULT_FRAME_BORDER_WIDTH,
-                    endFrame: DEFAULT_FRAME_BORDER_WIDTH
-                };
-                if (subPixelOptimizeLineWidth.hasOwnProperty(name)) {
-                    shape = graphic.subPixelOptimizeRect({
-                        shape: shape,
-                        style: {lineWidth: subPixelOptimizeLineWidth[name]}
-                    }).shape;
-                }
-                return shape;
-            }
         },
 
         _getUpdateArg: function (arg) {

src/component/legend/LegendModel.js

@@ -9,7 +9,7 @@ define(function(require) {
 
         type: 'legend',
 
-        dependencies: ['series'],
+        // dependencies: ['series'],
 
         init: function (option, parentModel, ecModel) {
             this.mergeDefaultAndTheme(option, ecModel);
@@ -29,10 +29,9 @@ define(function(require) {
              * @type {Array.<string>}
              * @private
              */
-            this._seriesNames = zrUtil.map(ecModel.getSeriesAll(), function (series) {
-                return series.name;
-            });
-
+            // this._seriesNames = zrUtil.map(ecModel.getSeriesAll(), function (series) {
+            //     return series.name;
+            // });
         },
 
         /**
@@ -72,8 +71,8 @@ define(function(require) {
          */
         isSelected: function (name) {
             var selected = this.option.selected;
-            return !((name in selected) && !selected[name])
-                && this._seriesNames.indexOf(name) >= 0
+            return !((name in selected) && !selected[name]);
+                // && this._seriesNames.indexOf(name) >= 0
         },
 
         defaultOption: {

src/component/legend/LegendView.js

@@ -127,7 +127,7 @@ define(function (require) {
             ));
 
             // Compose symbols
-            if (symbolType && symbolType !== legendSymbolType) {
+            if (symbolType && symbolType !== legendSymbolType && symbolType != 'none') {
                 var size = height * 0.8;
                 // Put symbol in the center
                 group.add(symbolCreator.createSymbol(

src/component/tooltip.js

@@ -68,18 +68,20 @@ define(function (require) {
 
             this._tooltipContent.hide();
 
-            var seriesGroupByCoordinateSystem = {};
+            var seriesGroupByCoordSys = {};
             ecModel.eachSeries(function (seriesModel) {
                 var coordSys = seriesModel.coordinateSystem;
-                var name = coordSys.name;
-                seriesGroupByCoordinateSystem[name] = seriesGroupByCoordinateSystem[name] || {
-                    coordSys: coordSys,
-                    series: []
-                };
-                seriesGroupByCoordinateSystem[name].series.push(seriesModel);
+                if (coordSys) {
+                    var name = coordSys.name;
+                    seriesGroupByCoordSys[name] = seriesGroupByCoordSys[name] || {
+                        coordSys: coordSys,
+                        series: []
+                    };
+                    seriesGroupByCoordSys[name].series.push(seriesModel);
+                }
             }, this);
 
-            this._coordinateSystems = seriesGroupByCoordinateSystem;
+            this._coordinateSystems = seriesGroupByCoordSys;
         },
 
         _mouseMove: function (e) {

src/coord/cartesian/GridModel.js

@@ -19,7 +19,7 @@ define(function(require) {
         coordinateSystem: null,
 
         defaultOption: {
-            show: true,
+            show: false,
             zlevel: 0,                  // 一级层叠
             z: 0,                       // 二级层叠
             x: 80,

src/data/List.js

@@ -157,7 +157,7 @@ define(function (require) {
 
         var dimensions = this.dimensions;
         var size = data.length;
-        var dimensionInfoMap = this._dimensionInfos
+        var dimensionInfoMap = this._dimensionInfos;
 
         nameList = nameList || [];
 
@@ -173,7 +173,8 @@ define(function (require) {
         var optionModelIndices = storage.$optionModelIndices = new Int32Array(size);
 
         var tempValue = [];
-        var rawValue1D = false;
+        var rawValueTo1D = false;
+        var value1D = dimensions.length === 1;
         for (var idx = 0; idx < data.length; idx++) {
             var value = data[idx];
             // Each data item contains value and option
@@ -190,12 +191,19 @@ define(function (require) {
             }
             // Bar chart, line chart which uses category axis
             // only gives the 'y' value. 'x' value is the indices of cateogry
+            // Use a tempValue to normalize the value to be a (x, y) value
             if (!isNaN(value)) {
-                // Use a tempValue to normalize the value to be a (x, y) value
-                tempValue[0] = idx;
-                tempValue[1] = value;
-                value = tempValue;
-                rawValue1D = true;
+                if (!value1D) {
+                    tempValue[0] = idx;
+                    tempValue[1] = value;
+                    value = tempValue;
+                    rawValueTo1D = true;
+                }
+                // Pie chart is 1D
+                else {
+                    tempValue[0] = value;
+                    value = tempValue;
+                }
             }
 
             // Store the data by dimensions
@@ -220,7 +228,7 @@ define(function (require) {
             indices.push(idx);
         }
 
-        this._rawValueDims = rawValue1D ? dimensions.slice(1, 2) : dimensions.slice();
+        this._rawValueDims = rawValueTo1D ? dimensions.slice(1, 2) : dimensions.slice();
 
         // Use the name in option as data id in two value axis case
         for (var i = 0; i < optionModelIndices.length; i++) {
@@ -303,6 +311,24 @@ define(function (require) {
         return [min, max];
     };
 
+    /**
+     * Get sum of data in one dimension
+     * @param {string} dim
+     * @param {boolean} stack
+     */
+    listProto.getSum = function (dim, stack) {
+        var dimData = this._storage[dim];
+        var sum = 0;
+        if (dimData) {
+            for (var i = 0, len = this.count(); i < len; i++) {
+                var value = this.get(dim, i, stack);
+                if (!isNaN(value)) {
+                    sum += value;
+                }
+            }
+        }
+        return sum;
+    };
     /**
      * Get raw value
      * @param {number} idx

src/echarts.js

@@ -351,11 +351,12 @@ define(function (require) {
          * @private
          */
         _doLayout: function (ecModel, event) {
+            var api = this._extensionAPI;
             zrUtil.each(this._layouts, function (layout) {
-                layout.update(ecModel, event);
+                layout.update(ecModel, api, event);
             });
             zrUtil.each(layoutFuncs, function (layout) {
-                layout(ecModel, event);
+                layout(ecModel, api, event);
             });
         },
 

src/layout/line.js

-define(function (require) {
-
-    'use strict';
-
-    function getSeriesStackId(seriesModel) {
-        return seriesModel.get('stack') || '__ec_stack_' + seriesModel.seriesIndex;
-    }
-
-    return function (seriesType, ecModel, api) {
-        var lastStackCoords = {};
-
-        ecModel.eachSeriesByType(seriesType, function (lineSeries) {
-            var data = lineSeries.getData();
-            var coordSys = lineSeries.coordinateSystem;
-
-            var dims = coordSys.type === 'cartesian2d' ? ['x', 'y'] : ['radius', 'angle'];
-            var stackId = getSeriesStackId(lineSeries);
-
-            var baseAxis = coordSys.getBaseAxis();
-            var valueAxis = coordSys.getOtherAxis(baseAxis);
-            var valueAxisStart = valueAxis.getExtent()[0];
-
-            var baseCoordOffset = baseAxis.dim === 'x' ? 0 : 1;
-
-            lastStackCoords[stackId] = lastStackCoords[stackId] || [];
-            data.each(dims, function (x, y, idx) {
-                if (!isNaN(y) && !isNaN(x)) {
-                    var lastCoord = lastStackCoords[stackId][idx] || valueAxisStart;
-                    var point = coordSys.dataToPoint([x, y]);
-                    var stackPoint = [];
-                    stackPoint[baseCoordOffset] = point[baseCoordOffset];
-                    stackPoint[1 - baseCoordOffset] = lastCoord;
-
-                    lastStackCoords[stackId][idx] = lastCoord;
-
-                    data.setItemLayout(idx, {
-                        point: point,
-                        // Stack points for area charts
-                        stackOn: stackPoint
-                    });
-                }
-            }, true);
-        });
-    }
-});
\ No newline at end of file

src/layout/pie.js

+// TODO minAngle
+
+define(function (require) {
+
+    var numberUtil = require('../util/number');
+    var parsePercent = numberUtil.parsePercent;
+
+    return function (seriesType, ecModel, api) {
+        ecModel.eachSeriesByType(seriesType, function (seriesModel) {
+            var center = seriesModel.get('center');
+            var radius = seriesModel.get('radius');
+
+            var width = api.getWidth();
+            var height = api.getHeight();
+            var size = Math.min(width, height);
+            var cx = parsePercent(center[0], width);
+            var cy = parsePercent(center[1], height);
+            var r0 = parsePercent(radius[0], size) / 2;
+            var r = parsePercent(radius[1], size) / 2;
+
+            var data = seriesModel.getData();
+
+            var startAngle = -seriesModel.get('startAngle') * Math.PI / 180;
+
+            var sum = data.getSum('x');
+            if (sum === 0) {
+                sum = data.count();
+            }
+            var radianPerVal = Math.PI / sum * 2;
+
+            var clockWise = seriesModel.get('clockWise');
+
+            data.each('x', function (value, idx) {
+                var angle = sum === 0 ? radianPerVal : (value * radianPerVal);
+                var endAngle = startAngle + angle;
+                data.setItemLayout(idx, {
+                    startAngle: startAngle,
+                    endAngle: endAngle,
+                    clockwise: clockWise,
+                    cx: cx,
+                    cy: cy,
+                    r0: r0,
+                    r: r
+                });
+
+                startAngle = endAngle;
+            }, true);
+        });
+    }
+});
\ No newline at end of file

src/layout/points.js

 define(function (require) {
 
     return function (seriesType, ecModel, api) {
-        ecModel.eachSeriesByType(seriesType, function (lineSeries) {
-            var data = lineSeries.getData();
-            var coordSys = lineSeries.coordinateSystem;
+        ecModel.eachSeriesByType(seriesType, function (seriesModel) {
+            var data = seriesModel.getData();
+            var coordSys = seriesModel.coordinateSystem;
 
             var dims = coordSys.type === 'cartesian2d' ? ['x', 'y'] : ['radius', 'angle'];
             data.each(dims, function (x, y, idx) {
                 if (!isNaN(y) && !isNaN(x)) {
                     var point = coordSys.dataToPoint([x, y]);
-                    data.setItemLayout(idx, {
-                        point: point
-                    });
+                    data.setItemLayout(idx, point);
                 }
             }, true);
         });

src/model/mixin/areaStyle.js

@@ -6,6 +6,7 @@ define(function (require) {
                 ['shadowBlur'],
                 ['shadowOffsetX'],
                 ['shadowOffsetY'],
+                ['opacity'],
                 ['shadowColor']
             ]
         )

src/util/graphic.js

@@ -164,7 +164,7 @@ define(function(require) {
         this.setStyle(this.__normalStyle);
     }
     var MOUSEOVER = 'mouseover';
-    var MOUSEOUT = 'mouseover';
+    var MOUSEOUT = 'mouseout';
     /**
      * Set hover style of element
      * @param {module:zrender/graphic/Displayable} el

test/area.html

+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+        <div id="main"></div>
+        <script>
+
+            require([
+                'echarts',
+                'echarts/chart/line',
+                'echarts/component/legend',
+                'echarts/component/grid',
+                'echarts/component/tooltip'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main'), null, {
+                    renderer: 'canvas'
+                });
+
+                var xAxisData = [];
+                var data1 = [];
+                var data2 = [];
+                var data3 = [];
+
+                for (var i = 0; i < 10; i++) {
+                    xAxisData.push('类目' + i);
+                    data1.push(+Math.random().toFixed(3));
+                    data2.push(+Math.random().toFixed(3));
+                    data3.push(+Math.random().toFixed(3));
+                }
+
+                var itemStyle = {
+                    normal: {
+                        borderColor: 'white',
+                        borderWidth: 3,
+                        // shadowBlur: 10,
+                        // shadowOffsetX: 0,
+                        // shadowOffsetY: 5,
+                        // shadowColor: 'rgba(0, 0, 0, 0.4)',
+                        lineStyle: {
+                            width: 3,
+                            // shadowBlur: 10,
+                            // shadowOffsetX: 0,
+                            // shadowOffsetY: 5,
+                            // shadowColor: 'rgba(0, 0, 0, 0.4)'
+                        },
+                        areaStyle: {
+                        }
+                    }
+                };
+
+                chart.setOption({
+                    legend: {
+                        data: ['line', 'line2', 'line3']
+                    },
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'line'
+                        }
+                    },
+                    xAxis: {
+                        // data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
+                        data: xAxisData,
+                        boundaryGap: false,
+                        // inverse: true,
+                        splitArea: {
+                            show: true
+                        }
+                    },
+                    yAxis: {
+                        splitLine: {
+                            // show: false
+                        }
+                    },
+                    series: [{
+                        name: 'line',
+                        type: 'line',
+                        stack: 'all',
+                        symbol: 'circle',
+                        symbolSize: 10,
+                        data: data1,
+                        itemStyle: itemStyle
+                    }, {
+                        name: 'line2',
+                        type: 'line',
+                        stack: 'all',
+                        symbol: 'circle',
+                        symbolSize: 10,
+                        data: data2,
+                        itemStyle: itemStyle
+                    }, {
+                        name: 'line3',
+                        type: 'line',
+                        stack: 'all',
+                        symbol: 'circle',
+                        symbolSize: 10,
+                        data: data3,
+                        itemStyle: itemStyle
+                    }]
+                });
+            })
+
+        </script>
+    </body>
+</html>
\ No newline at end of file

test/dynamicData.html

@@ -28,7 +28,7 @@
                 var xAxisData = [];
                 var data1 = [];
                 var count = 0;
-                for (; count < 100; count++) {
+                for (; count < 200; count++) {
                     xAxisData.push('类目' + count);
                     data1.push(+Math.random().toFixed(3));
                 }
@@ -42,11 +42,14 @@
                         // shadowOffsetY: 5,
                         // shadowColor: 'rgba(0, 0, 0, 0.4)',
                         lineStyle: {
-                            width: 3,
+                            width: 2,
                             // shadowBlur: 10,
                             // shadowOffsetX: 0,
                             // shadowOffsetY: 5,
                             // shadowColor: 'rgba(0, 0, 0, 0.4)'
+                        },
+                        areaStyle: {
+                            
                         }
                     }
                 };
@@ -63,9 +66,11 @@
                     },
                     // animation: false,
                     xAxis: {
-                        // data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
+                        axisLabel: {
+                            interval: 20
+                        },
                         data: xAxisData,
-                        // boundaryGap: false
+                        boundaryGap: false
                     },
                     yAxis: {
                         splitLine: {
@@ -84,12 +89,13 @@
                 });
 
                 setInterval(function () {
-                    data1.shift();
-                    data1.push(+Math.random().toFixed(3));
-
-                    xAxisData.shift();
-                    xAxisData.push('类目' + count++);
-console.log('before setoption');
+                    for (var i = 0; i < 1; i++) {
+                        xAxisData.shift();
+                        xAxisData.push('类目' + count);
+                        data1.shift();
+                        data1.push(+Math.random().toFixed(3));
+                        count++;
+                    }
                     chart.setOption({
                         xAxis: {
                             data: xAxisData
@@ -99,8 +105,7 @@ console.log('before setoption');
                             data: data1
                         }]
                     });
-console.log('after setoption');
-                }, 2000);
+                }, 1000);
             })
 
         </script>

test/line.html

@@ -31,7 +31,7 @@
                 var data2 = [];
                 var data3 = [];
 
-                for (var i = 0; i < 10; i++) {
+                for (var i = 0; i < 100; i++) {
                     xAxisData.push('类目' + i);
                     data1.push(+Math.random().toFixed(3));
                     data2.push(+Math.random().toFixed(3));
@@ -42,16 +42,16 @@
                     normal: {
                         borderColor: 'white',
                         borderWidth: 3,
-                        shadowBlur: 10,
-                        shadowOffsetX: 0,
-                        shadowOffsetY: 5,
-                        shadowColor: 'rgba(0, 0, 0, 0.4)',
+                        // shadowBlur: 10,
+                        // shadowOffsetX: 0,
+                        // shadowOffsetY: 5,
+                        // shadowColor: 'rgba(0, 0, 0, 0.4)',
                         lineStyle: {
                             width: 3,
-                            shadowBlur: 10,
-                            shadowOffsetX: 0,
-                            shadowOffsetY: 5,
-                            shadowColor: 'rgba(0, 0, 0, 0.4)'
+                            // shadowBlur: 10,
+                            // shadowOffsetX: 0,
+                            // shadowOffsetY: 5,
+                            // shadowColor: 'rgba(0, 0, 0, 0.4)'
                         }
                     }
                 };
@@ -61,12 +61,19 @@
                         data: ['line', 'line2', 'line3']
                     },
                     tooltip: {
-                        trigger: 'axis'
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'line'
+                        }
                     },
                     xAxis: {
                         // data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
                         data: xAxisData,
-                        boundaryGap: false
+                        boundaryGap: false,
+                        // inverse: true,
+                        splitArea: {
+                            show: true
+                        }
                     },
                     yAxis: {
                         splitLine: {

test/pie.html

+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+        <div id="main"></div>
+        <script>
+
+            require([
+                'echarts',
+                'echarts/chart/pie',
+                'echarts/component/legend',
+                'echarts/component/grid',
+                'echarts/component/tooltip'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main'), null, {
+                    renderer: 'canvas'
+                });
+
+                var xAxisData = [];
+                var data1 = [];
+                var data2 = [];
+                var data3 = [];
+
+                for (var i = 0; i < 100; i++) {
+                    xAxisData.push('类目' + i);
+                    data1.push(+Math.random().toFixed(3));
+                    data2.push(+Math.random().toFixed(3));
+                    data3.push(+Math.random().toFixed(3));
+                }
+
+                var itemStyle = {
+                    normal: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowOffsetY: 5,
+                        shadowColor: 'rgba(0, 0, 0, 0.4)'
+                    }
+                };
+
+                chart.setOption({
+                    legend: {
+                        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
+                    },
+                    tooltip: {
+
+                    },
+                    series: [{
+                        name: 'pie',
+                        type: 'pie',
+                        stack: 'all',
+                        symbol: 'circle',
+                        symbolSize: 10,
+                        data:[
+                            {value:335, name:'直接访问'},
+                            {value:310, name:'邮件营销'},
+                            {value:234, name:'联盟广告'},
+                            {value:135, name:'视频广告'},
+                            {value:1548, name:'搜索引擎'}
+                        ],
+                        itemStyle: itemStyle
+                    }]
+                });
+            })
+
+        </script>
+    </body>
+</html>
\ No newline at end of file

test/polarLine.html

@@ -58,18 +58,21 @@
                     series: [{
                         coordinateSystem: 'polar',
                         name: 'line',
+                        stack: 'all',
                         type: 'line',
                         symbolSize: 10,
                         data: data1
                     }, {
                         coordinateSystem: 'polar',
                         name: 'line2',
+                        stack: 'all',
                         type: 'line',
                         symbolSize: 10,
                         data: data2
                     }, {
                         coordinateSystem: 'polar',
                         name: 'line3',
+                        stack: 'all',
                         type: 'line',
                         symbolSize: 10,
                         data: data3

test/polarLine2.html

@@ -27,8 +27,10 @@
 
                 var data = [];
 
-                for (var i = 0; i < 300; i++) {
-                    data.push([i, (i * 5) % 360]);
+                for (var i = 0; i < 100; i++) {
+                    var theta = i / 100 * 360;
+                    var r = 5 * (1 + Math.sin(theta / 180 * Math.PI));
+                    data.push([r, theta]);
                 }
 
                 chart.setOption({

test/scatter.html

@@ -64,15 +64,7 @@
                     series: [{
                         name: 'scatter',
                         type: 'scatter',
-                        itemStyle: {
-                            normal: {
-                                opacity: 0.8,
-                                shadowBlur: 10,
-                                shadowOffsetX: 0,
-                                shadowOffsetY: 0,
-                                shadowColor: 'rgba(0, 0, 0, 0.5)'
-                            }
-                        },
+                        symbol: 'diamond',
                         symbolSize: function (val) {
                             return val[2] * 40;
                         },
@@ -80,15 +72,6 @@
                     }, {
                         name: 'scatter2',
                         type: 'scatter',
-                        itemStyle: {
-                            normal: {
-                                opacity: 0.8,
-                                shadowBlur: 10,
-                                shadowOffsetX: 0,
-                                shadowOffsetY: 0,
-                                shadowColor: 'rgba(0, 0, 0, 0.5)'
-                            }
-                        },
                         symbolSize: function (val) {
                             return val[2] * 40;
                         },
@@ -96,15 +79,6 @@
                     }, {
                         name: 'scatter3',
                         type: 'scatter',
-                        itemStyle: {
-                            normal: {
-                                opacity: 0.8,
-                                shadowBlur: 10,
-                                shadowOffsetX: 0,
-                                shadowOffsetY: 0,
-                                shadowColor: 'rgba(0, 0, 0, 0.5)'
-                            }
-                        },
                         symbolSize: function (val) {
                             return val[2] * 40;
                         },