Add pie

src/chart/line/LineView.js

-// TODO Area
-// TODO Null data
+// TODO Smooth
+// TODO '-' data
 define(function(require) {
 
     'use strict';

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/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) {

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