echarts 3.5.1 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "echarts",
-  "version": "3.5.1",
+  "version": "3.6.0",
   "description": "A powerful charting and visualization library for browser",
   "keywords": [
     "visualization",
@@ -35,7 +35,7 @@
     "prepublish": "node build/amd2common.js"
   },
   "dependencies": {
-    "zrender": "^3.4.1"
+    "zrender": "^3.5.0"
   },
   "devDependencies": {
     "coordtransform": "^2.0.2",
@@ -45,6 +45,6 @@
     "fs-extra": "^0.26.5",
     "glob": "^7.0.0",
     "webpack": "^1.12.13",
-    "zrender": "^3.4.1"
+    "zrender": "^3.5.0"
   }
 }

package/src/ExtensionAPI.js

@@ -9,14 +9,12 @@ define(function(require) {
         'on', 'off', 'getDataURL', 'getConnectedDataURL', 'getModel', 'getOption',
         'getViewOfComponentModel', 'getViewOfSeriesModel'
     ];
+    // And `getCoordinateSystems` and `getComponentByElement` will be injected in echarts.js
 
-    function ExtensionAPI(chartInstance, coordSysMgr) {
+    function ExtensionAPI(chartInstance) {
         zrUtil.each(echartsAPIList, function (name) {
             this[name] = zrUtil.bind(chartInstance[name], chartInstance);
         }, this);
-
-        // Inject getCoordinateSystems to ecModel
-        this.getCoordinateSystems = zrUtil.bind(coordSysMgr.getCoordinateSystems, coordSysMgr);
     }
 
     return ExtensionAPI;

package/src/chart/bar/BarView.js

@@ -19,8 +19,13 @@ define(function (require) {
         render: function (seriesModel, ecModel, api) {
             var coordinateSystemType = seriesModel.get('coordinateSystem');
 
-            if (coordinateSystemType === 'cartesian2d') {
-                this._renderOnCartesian(seriesModel, ecModel, api);
+            if (coordinateSystemType === 'cartesian2d'
+                || coordinateSystemType === 'polar'
+            ) {
+                this._render(seriesModel, ecModel, api);
+            }
+            else if (__DEV__) {
+                console.warn('Only cartesian2d and polar supported for bar.');
             }
 
             return this.group;
@@ -28,14 +33,22 @@ define(function (require) {
 
         dispose: zrUtil.noop,
 
-        _renderOnCartesian: function (seriesModel, ecModel, api) {
+        _render: function (seriesModel, ecModel, api) {
             var group = this.group;
             var data = seriesModel.getData();
             var oldData = this._data;
 
-            var cartesian = seriesModel.coordinateSystem;
-            var baseAxis = cartesian.getBaseAxis();
-            var isHorizontal = baseAxis.isHorizontal();
+            var coord = seriesModel.coordinateSystem;
+            var baseAxis = coord.getBaseAxis();
+            var isHorizontalOrRadial;
+
+            if (coord.type === 'cartesian2d') {
+                isHorizontalOrRadial = baseAxis.isHorizontal();
+            }
+            else if (coord.type === 'polar') {
+                isHorizontalOrRadial = baseAxis.dim === 'angle';
+            }
+
             var animationModel = seriesModel.isAnimationEnabled() ? seriesModel : null;
 
             data.diff(oldData)
@@ -45,12 +58,17 @@ define(function (require) {
                     }
 
                     var itemModel = data.getItemModel(dataIndex);
-                    var layout = getRectItemLayout(data, dataIndex, itemModel);
-                    var el = createRect(data, dataIndex, itemModel, layout, isHorizontal, animationModel);
+                    var layout = getLayout[coord.type](data, dataIndex, itemModel);
+                    var el = elementCreator[coord.type](
+                        data, dataIndex, itemModel, layout, isHorizontalOrRadial, animationModel
+                    );
                     data.setItemGraphicEl(dataIndex, el);
                     group.add(el);
 
-                    updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHorizontal);
+                    updateStyle(
+                        el, data, dataIndex, itemModel, layout,
+                        seriesModel, isHorizontalOrRadial, coord.type === 'polar'
+                    );
                 })
                 .update(function (newIndex, oldIndex) {
                     var el = oldData.getItemGraphicEl(oldIndex);
@@ -61,24 +79,34 @@ define(function (require) {
                     }
 
                     var itemModel = data.getItemModel(newIndex);
-                    var layout = getRectItemLayout(data, newIndex, itemModel);
+                    var layout = getLayout[coord.type](data, newIndex, itemModel);
 
                     if (el) {
                         graphic.updateProps(el, {shape: layout}, animationModel, newIndex);
                     }
                     else {
-                        el = createRect(data, newIndex, itemModel, layout, isHorizontal, animationModel, true);
+                        el = elementCreator[coord.type](
+                            data, newIndex, itemModel, layout, isHorizontalOrRadial, animationModel, true
+                        );
                     }
 
                     data.setItemGraphicEl(newIndex, el);
                     // Add back
                     group.add(el);
 
-                    updateStyle(el, data, newIndex, itemModel, layout, seriesModel, isHorizontal);
+                    updateStyle(
+                        el, data, newIndex, itemModel, layout,
+                        seriesModel, isHorizontalOrRadial, coord.type === 'polar'
+                    );
                 })
                 .remove(function (dataIndex) {
                     var el = oldData.getItemGraphicEl(dataIndex);
-                    el && removeRect(dataIndex, animationModel, el);
+                    if (coord.type === 'cartesian2d') {
+                        el && removeRect(dataIndex, animationModel, el);
+                    }
+                    else {
+                        el && removeSector(dataIndex, animationModel, el);
+                    }
                 })
                 .execute();
 
@@ -91,7 +119,12 @@ define(function (require) {
             if (ecModel.get('animation')) {
                 if (data) {
                     data.eachItemGraphicEl(function (el) {
-                        removeRect(el.dataIndex, ecModel, el);
+                        if (el.type === 'sector') {
+                            removeSector(el.dataIndex, ecModel, el);
+                        }
+                        else {
+                            removeRect(el.dataIndex, ecModel, el);
+                        }
                     });
                 }
             }
@@ -101,23 +134,50 @@ define(function (require) {
         }
     });
 
-    function createRect(data, dataIndex, itemModel, layout, isHorizontal, animationModel, isUpdate) {
-        var rect = new graphic.Rect({shape: zrUtil.extend({}, layout)});
-
-        // Animation
-        if (animationModel) {
-            var rectShape = rect.shape;
-            var animateProperty = isHorizontal ? 'height' : 'width';
-            var animateTarget = {};
-            rectShape[animateProperty] = 0;
-            animateTarget[animateProperty] = layout[animateProperty];
-            graphic[isUpdate ? 'updateProps' : 'initProps'](rect, {
-                shape: animateTarget
-            }, animationModel, dataIndex);
-        }
+    var elementCreator = {
+
+        cartesian2d: function (
+            data, dataIndex, itemModel, layout, isHorizontal,
+            animationModel, isUpdate
+        ) {
+            var rect = new graphic.Rect({shape: zrUtil.extend({}, layout)});
+
+            // Animation
+            if (animationModel) {
+                var rectShape = rect.shape;
+                var animateProperty = isHorizontal ? 'height' : 'width';
+                var animateTarget = {};
+                rectShape[animateProperty] = 0;
+                animateTarget[animateProperty] = layout[animateProperty];
+                graphic[isUpdate ? 'updateProps' : 'initProps'](rect, {
+                    shape: animateTarget
+                }, animationModel, dataIndex);
+            }
 
-        return rect;
-    }
+            return rect;
+        },
+
+        polar: function (
+            data, dataIndex, itemModel, layout, isRadial,
+            animationModel, isUpdate
+        ) {
+            var sector = new graphic.Sector({shape: zrUtil.extend({}, layout)});
+
+            // Animation
+            if (animationModel) {
+                var sectorShape = sector.shape;
+                var animateProperty = isRadial ? 'r' : 'endAngle';
+                var animateTarget = {};
+                sectorShape[animateProperty] = isRadial ? 0 : layout.startAngle;
+                animateTarget[animateProperty] = layout[animateProperty];
+                graphic[isUpdate ? 'updateProps' : 'initProps'](sector, {
+                    shape: animateTarget
+                }, animationModel, dataIndex);
+            }
+
+            return sector;
+        }
+    };
 
     function removeRect(dataIndex, animationModel, el) {
         // Not show text when animating
@@ -131,28 +191,58 @@ define(function (require) {
         });
     }
 
-    function getRectItemLayout(data, dataIndex, itemModel) {
-        var layout = data.getItemLayout(dataIndex);
-        var fixedLineWidth = getLineWidth(itemModel, layout);
-
-        // fix layout with lineWidth
-        var signX = layout.width > 0 ? 1 : -1;
-        var signY = layout.height > 0 ? 1 : -1;
-        return {
-            x: layout.x + signX * fixedLineWidth / 2,
-            y: layout.y + signY * fixedLineWidth / 2,
-            width: layout.width - signX * fixedLineWidth,
-            height: layout.height - signY * fixedLineWidth
-        };
+    function removeSector(dataIndex, animationModel, el) {
+        // Not show text when animating
+        el.style.text = '';
+        graphic.updateProps(el, {
+            shape: {
+                r: el.shape.r0
+            }
+        }, animationModel, dataIndex, function () {
+            el.parent && el.parent.remove(el);
+        });
     }
 
-    function updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHorizontal) {
+    var getLayout = {
+        cartesian2d: function (data, dataIndex, itemModel) {
+            var layout = data.getItemLayout(dataIndex);
+            var fixedLineWidth = getLineWidth(itemModel, layout);
+
+            // fix layout with lineWidth
+            var signX = layout.width > 0 ? 1 : -1;
+            var signY = layout.height > 0 ? 1 : -1;
+            return {
+                x: layout.x + signX * fixedLineWidth / 2,
+                y: layout.y + signY * fixedLineWidth / 2,
+                width: layout.width - signX * fixedLineWidth,
+                height: layout.height - signY * fixedLineWidth
+            };
+        },
+
+        polar: function (data, dataIndex, itemModel) {
+            var layout = data.getItemLayout(dataIndex);
+            return {
+                cx: layout.cx,
+                cy: layout.cy,
+                r0: layout.r0,
+                r: layout.r,
+                startAngle: layout.startAngle,
+                endAngle: 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 itemStyleModel = itemModel.getModel('itemStyle.normal');
         var hoverStyle = itemModel.getModel('itemStyle.emphasis').getBarItemStyle();
 
-        el.setShape('r', itemStyleModel.get('barBorderRadius') || 0);
+        if (!isPolar && isHorizontal) {
+            el.setShape('r', itemStyleModel.get('barBorderRadius') || 0);
+        }
 
         el.useStyle(zrUtil.defaults(
             {
@@ -166,10 +256,12 @@ define(function (require) {
             ? (layout.height > 0 ? 'bottom' : 'top')
             : (layout.width > 0 ? 'left' : 'right');
 
-        helper.setLabel(
-            el.style, hoverStyle, itemModel, color,
-            seriesModel, dataIndex, labelPositionOutside
-        );
+        if (!isPolar) {
+            helper.setLabel(
+                el.style, hoverStyle, itemModel, color,
+                seriesModel, dataIndex, labelPositionOutside
+            );
+        }
 
         graphic.setHoverStyle(el, hoverStyle);
     }

package/src/chart/bar/BaseBarSeries.js

@@ -10,12 +10,6 @@ define(function(require) {
         type: 'series.__base_bar__',
 
         getInitialData: function (option, ecModel) {
-            if (__DEV__) {
-                var coordSys = option.coordinateSystem;
-                if (coordSys !== 'cartesian2d') {
-                    throw new Error('Bar only support cartesian2d coordinateSystem');
-                }
-            }
             return createListFromArray(option.data, this, ecModel);
         },
 
@@ -47,6 +41,8 @@ define(function(require) {
 
             // 最小高度改为0
             barMinHeight: 0,
+            // 最小角度为0，仅对极坐标系下的柱状图有效
+            barMinAngle: 0,
 
             // barMaxWidth: null,
             // 默认自适应

package/src/chart/bar.js

@@ -11,6 +11,7 @@ define(function (require) {
     var echarts = require('../echarts');
 
     echarts.registerLayout(zrUtil.curry(barLayoutGrid, 'bar'));
+
     // Visual coding for legend
     echarts.registerVisual(function (ecModel) {
         ecModel.eachSeriesByType('bar', function (seriesModel) {

package/src/chart/boxplot/BoxplotSeries.js

@@ -21,7 +21,7 @@ define(function(require) {
          * and echarts do not need to know it.
          * @readOnly
          */
-        valueDimensions: ['min', 'Q1', 'median', 'Q3', 'max'],
+        defaultValueDimensions: ['min', 'Q1', 'median', 'Q3', 'max'],
 
         /**
          * @type {Array.<string>}

package/src/chart/boxplot/boxplotLayout.js

@@ -109,17 +109,33 @@ define(function (require) {
     function layoutSingleSeries(seriesModel, offset, boxWidth) {
         var coordSys = seriesModel.coordinateSystem;
         var data = seriesModel.getData();
-        var dimensions = seriesModel.dimensions;
-        var chartLayout = seriesModel.get('layout');
         var halfWidth = boxWidth / 2;
+        var chartLayout = seriesModel.get('layout');
+        var variableDim = chartLayout === 'horizontal' ? 0 : 1;
+        var constDim = 1 - variableDim;
+        var coordDims = ['x', 'y'];
+        var vDims = [];
+        var cDim;
+
+        zrUtil.each(data.dimensions, function (dimName) {
+            var dimInfo = data.getDimensionInfo(dimName);
+            var coordDim = dimInfo.coordDim;
+            if (coordDim === coordDims[constDim]) {
+                vDims.push(dimName);
+            }
+            else if (coordDim === coordDims[variableDim]) {
+                cDim = dimName;
+            }
+        });
+
+        if (cDim == null || vDims.length < 5) {
+            return;
+        }
 
-        data.each(dimensions, function () {
+        data.each([cDim].concat(vDims), function () {
             var args = arguments;
-            var dimLen = dimensions.length;
             var axisDimVal = args[0];
-            var idx = args[dimLen];
-            var variableDim = chartLayout === 'horizontal' ? 0 : 1;
-            var constDim = 1 - variableDim;
+            var idx = args[vDims.length + 1];
 
             var median = getPoint(args[3]);
             var end1 = getPoint(args[1]);

package/src/chart/candlestick/CandlestickSeries.js

@@ -5,9 +5,6 @@ define(function(require) {
     var zrUtil = require('zrender/core/util');
     var SeriesModel = require('../../model/Series');
     var whiskerBoxCommon = require('../helper/whiskerBoxCommon');
-    var formatUtil = require('../../util/format');
-    var encodeHTML = formatUtil.encodeHTML;
-    var addCommas = formatUtil.addCommas;
 
     var CandlestickSeries = SeriesModel.extend({
 
@@ -18,7 +15,7 @@ define(function(require) {
         /**
          * @readOnly
          */
-        valueDimensions: ['open', 'close', 'lowest', 'highest'],
+        defaultValueDimensions: ['open', 'close', 'lowest', 'highest'],
 
         /**
          * @type {Array.<string>}
@@ -74,24 +71,8 @@ define(function(require) {
             return 'open';
         },
 
-        /**
-         * @override
-         */
-        formatTooltip: function (dataIndex, mutipleSeries) {
-            // It rearly use mutiple candlestick series in one cartesian,
-            // so only consider one series in this default tooltip.
-            var valueHTML = zrUtil.map(this.valueDimensions, function (dim) {
-                return encodeHTML(dim + ': ' + addCommas(this.getData().get(dim, dataIndex)));
-            }, this).join('<br />');
-
-            var html = [];
-            this.name != null && html.push(encodeHTML(this.name));
-            valueHTML != null && html.push(valueHTML);
-
-            return html.join('<br />');
-        },
-
-        brushSelector: function (itemLayout, selectors) {
+        brushSelector: function (dataIndex, data, selectors) {
+            var itemLayout = data.getItemLayout(dataIndex);
             return selectors.rect(itemLayout.brushRect);
         }
 

package/src/chart/candlestick/candlestickLayout.js

@@ -1,5 +1,6 @@
 define(function (require) {
 
+    var zrUtil = require('zrender/core/util');
     var retrieve = require('zrender/core/util').retrieve;
     var parsePercent = require('../../util/number').parsePercent;
 
@@ -9,18 +10,33 @@ define(function (require) {
 
             var coordSys = seriesModel.coordinateSystem;
             var data = seriesModel.getData();
-            var dimensions = seriesModel.dimensions;
+            var candleWidth = calculateCandleWidth(seriesModel, data);
             var chartLayout = seriesModel.get('layout');
+            var variableDim = chartLayout === 'horizontal' ? 0 : 1;
+            var constDim = 1 - variableDim;
+            var coordDims = ['x', 'y'];
+            var vDims = [];
+            var cDim;
+
+            zrUtil.each(data.dimensions, function (dimName) {
+                var dimInfo = data.getDimensionInfo(dimName);
+                var coordDim = dimInfo.coordDim;
+                if (coordDim === coordDims[constDim]) {
+                    vDims.push(dimName);
+                }
+                else if (coordDim === coordDims[variableDim]) {
+                    cDim = dimName;
+                }
+            });
 
-            var candleWidth = calculateCandleWidth(seriesModel, data);
+            if (cDim == null || vDims.length < 4) {
+                return;
+            }
 
-            data.each(dimensions, function () {
+            data.each([cDim].concat(vDims), function () {
                 var args = arguments;
-                var dimLen = dimensions.length;
                 var axisDimVal = args[0];
-                var idx = args[dimLen];
-                var variableDim = chartLayout === 'horizontal' ? 0 : 1;
-                var constDim = 1 - variableDim;
+                var idx = args[vDims.length + 1];
 
                 var openVal = args[1];
                 var closeVal = args[2];