echarts 3.6.1 → 3.7.2

package/src/chart/chord/chordCircularLayout.js

@@ -47,7 +47,7 @@ define(function (require) {
         if (opts.sort && opts.sort != 'none') {
             groups.sort(compareGroups);
             if (opts.sort === 'descending') {
-                groups.revert();
+                groups.reverse();
             }
         }
 
@@ -58,7 +58,7 @@ define(function (require) {
             if (opts.sortSub && opts.sortSub != 'none') {
                 group.subGroups.sort(compareGroups);
                 if (opts.sortSub === 'descending') {
-                    group.subGroups.revert();
+                    group.subGroups.reverse();
                 }
             }
 

package/src/chart/custom.js

@@ -6,11 +6,15 @@ define(function (require) {
     var labelHelper = require('./helper/labelHelper');
     var createListFromArray = require('./helper/createListFromArray');
     var barGrid = require('../layout/barGrid');
+    var DataDiffer = require('../data/DataDiffer');
 
     var ITEM_STYLE_NORMAL_PATH = ['itemStyle', 'normal'];
     var ITEM_STYLE_EMPHASIS_PATH = ['itemStyle', 'emphasis'];
     var LABEL_NORMAL = ['label', 'normal'];
     var LABEL_EMPHASIS = ['label', 'emphasis'];
+    // Use prefix to avoid index to be the same as el.name,
+    // which will cause weird udpate animation.
+    var GROUP_DIFF_PREFIX = 'e\0\0';
 
     /**
      * To reduce total package size of each coordinate systems, the modules `prepareCustom`
@@ -42,7 +46,7 @@ define(function (require) {
         dependencies: ['grid', 'polar', 'geo', 'singleAxis', 'calendar'],
 
         defaultOption: {
-            coordinateSystem: 'cartesian2d',
+            coordinateSystem: 'cartesian2d', // Can be set as 'none'
             zlevel: 0,
             z: 2,
             legendHoverLink: true
@@ -110,7 +114,12 @@ define(function (require) {
                 .execute();
 
             this._data = data;
-        }
+        },
+
+        /**
+         * @override
+         */
+        dispose: zrUtil.noop
     });
 
 
@@ -154,6 +163,7 @@ define(function (require) {
         }
 
         el.__customGraphicType = graphicType;
+        el.name = elOption.name;
 
         return el;
     }
@@ -180,6 +190,14 @@ define(function (require) {
             zrUtil.each(['x', 'y'], function (prop) {
                 prepareStyleTransition(prop, targetStyle, elOptionStyle, el.style, isInit);
             });
+            // Compatible with previous: both support
+            // textFill and fill, textStroke and stroke in 'text' element.
+            !elOptionStyle.hasOwnProperty('textFill') && elOptionStyle.fill && (
+                elOptionStyle.textFill = elOptionStyle.fill
+            );
+            !elOptionStyle.hasOwnProperty('textStroke') && elOptionStyle.stroke && (
+                elOptionStyle.textStroke = elOptionStyle.stroke
+            );
         }
 
         if (el.type !== 'group') {
@@ -204,7 +222,7 @@ define(function (require) {
         // z2 must not be null/undefined, otherwise sort error may occur.
         el.attr({z2: elOption.z2 || 0, silent: elOption.silent});
 
-        el.styleEmphasis !== false && graphicUtil.setHoverStyle(el, el.styleEmphasis);
+        elOption.styleEmphasis !== false && graphicUtil.setHoverStyle(el, elOption.styleEmphasis);
     }
 
     function prepareStyleTransition(prop, targetStyle, elOptionStyle, oldElStyle, isInit) {
@@ -217,13 +235,21 @@ define(function (require) {
     function makeRenderItem(customSeries, data, ecModel, api) {
         var renderItem = customSeries.get('renderItem');
         var coordSys = customSeries.coordinateSystem;
+        var prepareResult = {};
 
-        if (__DEV__) {
-            zrUtil.assert(renderItem, 'series.render is required.');
-            zrUtil.assert(prepareCustoms[coordSys.type], 'This coordSys does not support custom series.');
-        }
+        if (coordSys) {
+            if (__DEV__) {
+                zrUtil.assert(renderItem, 'series.render is required.');
+                zrUtil.assert(
+                    coordSys.prepareCustoms || prepareCustoms[coordSys.type],
+                    'This coordSys does not support custom series.'
+                );
+            }
 
-        var prepareResult = prepareCustoms[coordSys.type](coordSys);
+            prepareResult = coordSys.prepareCustoms
+                ? coordSys.prepareCustoms()
+                : prepareCustoms[coordSys.type](coordSys);
+        }
 
         var userAPI = zrUtil.defaults({
             getWidth: api.getWidth,
@@ -237,7 +263,7 @@ define(function (require) {
             barLayout: barLayout,
             currentSeriesIndices: currentSeriesIndices,
             font: font
-        }, prepareResult.api);
+        }, prepareResult.api || {});
 
         var userParams = {
             context: {},
@@ -286,7 +312,7 @@ define(function (require) {
 
         /**
          * @public
-         * @param {nubmer|string} dim
+         * @param {number|string} dim
          * @param {number} [dataIndexInside=currDataIndexInside]
          * @return {number|string} value
          */
@@ -314,10 +340,19 @@ define(function (require) {
             var opacity = data.getItemVisual(dataIndexInside, 'opacity');
             opacity != null && (itemStyle.opacity = opacity);
 
-            labelHelper.setTextToStyle(
-                data, dataIndexInside, currLabelValueDim, itemStyle,
-                customSeries, currLabelNormalModel, currVisualColor
-            );
+            if (currLabelValueDim != null) {
+                graphicUtil.setTextStyle(itemStyle, currLabelNormalModel, null, {
+                    autoColor: currVisualColor,
+                    isRectText: true
+                });
+
+                itemStyle.text = currLabelNormalModel.getShallow('show')
+                    ? zrUtil.retrieve2(
+                        customSeries.getFormattedLabel(dataIndexInside, 'normal'),
+                        data.get(currLabelValueDim, dataIndexInside)
+                    )
+                    : null;
+            }
 
             extra && zrUtil.extend(itemStyle, extra);
             return itemStyle;
@@ -334,10 +369,19 @@ define(function (require) {
 
             var itemStyle = currItemModel.getModel(ITEM_STYLE_EMPHASIS_PATH).getItemStyle();
 
-            labelHelper.setTextToStyle(
-                data, dataIndexInside, currLabelValueDim, itemStyle,
-                customSeries, currLabelEmphasisModel, currVisualColor
-            );
+            if (currLabelValueDim != null) {
+                graphicUtil.setTextStyle(itemStyle, currLabelEmphasisModel, null, {
+                    isRectText: true
+                }, true);
+
+                itemStyle.text = currLabelEmphasisModel.getShallow('show')
+                    ? zrUtil.retrieve3(
+                        customSeries.getFormattedLabel(dataIndexInside, 'emphasis'),
+                        customSeries.getFormattedLabel(dataIndexInside, 'normal'),
+                        data.get(currLabelValueDim, dataIndexInside)
+                    )
+                    : null;
+            }
 
             extra && zrUtil.extend(itemStyle, extra);
             return itemStyle;
@@ -430,13 +474,83 @@ define(function (require) {
         !el && (el = createEl(elOption));
         updateEl(el, dataIndex, elOption, animatableModel, data, isInit);
 
-        elOptionType === 'group' && zrUtil.each(elOption.children, function (childOption, index) {
-            doCreateOrUpdate(el.childAt(index), dataIndex, childOption, animatableModel, el, data);
-        });
+        if (elOptionType === 'group') {
+            var oldChildren = el.children() || [];
+            var newChildren = elOption.children || [];
+
+            if (elOption.diffChildrenByName) {
+                // lower performance.
+                diffGroupChildren({
+                    oldChildren: oldChildren,
+                    newChildren: newChildren,
+                    dataIndex: dataIndex,
+                    animatableModel: animatableModel,
+                    group: el,
+                    data: data
+                });
+            }
+            else {
+                // better performance.
+                var index = 0;
+                for (; index < newChildren.length; index++) {
+                    doCreateOrUpdate(
+                        el.childAt(index),
+                        dataIndex,
+                        newChildren[index],
+                        animatableModel,
+                        el,
+                        data
+                    );
+                }
+                for (; index < oldChildren.length; index++) {
+                    oldChildren[index] && el.remove(oldChildren[index]);
+                }
+            }
+        }
 
         group.add(el);
 
         return el;
     }
 
+    function diffGroupChildren(context) {
+        (new DataDiffer(
+            context.oldChildren,
+            context.newChildren,
+            getKey,
+            getKey,
+            context
+        ))
+            .add(processAddUpdate)
+            .update(processAddUpdate)
+            .remove(processRemove)
+            .execute();
+    }
+
+    function getKey(item, idx) {
+        var name = item && item.name;
+        return name != null ? name : GROUP_DIFF_PREFIX + idx;
+    }
+
+    function processAddUpdate(newIndex, oldIndex) {
+        var context = this.context;
+        var childOption = newIndex != null ? context.newChildren[newIndex] : null;
+        var child = oldIndex != null ? context.oldChildren[oldIndex] : null;
+
+        doCreateOrUpdate(
+            child,
+            context.dataIndex,
+            childOption,
+            context.animatableModel,
+            context.group,
+            context.data
+        );
+    }
+
+    function processRemove(oldIndex) {
+        var context = this.context;
+        var child = context.oldChildren[oldIndex];
+        child && context.group.remove(child);
+    }
+
 });

package/src/chart/funnel/FunnelSeries.js

@@ -78,7 +78,6 @@ define(function(require) {
                     show: true,
                     position: 'outer'
                     // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
-                    // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                 },
                 emphasis: {
                     show: true

package/src/chart/funnel/FunnelView.js

@@ -38,21 +38,6 @@ define(function (require) {
 
     var funnelPieceProto = FunnelPiece.prototype;
 
-    function getLabelStyle(data, idx, state, labelModel) {
-        var textStyleModel = labelModel.getModel('textStyle');
-        var position = labelModel.get('position');
-        var isLabelInside = position === 'inside' || position === 'inner' || position === 'center';
-        return {
-            fill: textStyleModel.getTextColor()
-                || (isLabelInside ? '#fff' : data.getItemVisual(idx, 'color')),
-            textFont: textStyleModel.getFont(),
-            text: zrUtil.retrieve(
-                data.hostModel.getFormattedLabel(idx, state),
-                data.getName(idx)
-            )
-        };
-    }
-
     var opacityAccessPath = ['itemStyle', 'normal', 'opacity'];
     funnelPieceProto.updateData = function (data, idx, firstCreate) {
 
@@ -133,11 +118,6 @@ define(function (require) {
             }
         }, seriesModel, idx);
         labelText.attr({
-            style: {
-                textAlign: labelLayout.textAlign,
-                textVerticalAlign: labelLayout.verticalAlign,
-                textFont: labelLayout.font
-            },
             rotation: labelLayout.rotation,
             origin: [labelLayout.x, labelLayout.y],
             z2: 10
@@ -147,8 +127,22 @@ define(function (require) {
         var labelHoverModel = itemModel.getModel('label.emphasis');
         var labelLineModel = itemModel.getModel('labelLine.normal');
         var labelLineHoverModel = itemModel.getModel('labelLine.emphasis');
+        var visualColor = data.getItemVisual(idx, 'color');
 
-        labelText.setStyle(getLabelStyle(data, idx, 'normal', labelModel));
+        graphic.setLabelStyle(
+            labelText.style, labelText.hoverStyle = {}, labelModel, labelHoverModel,
+            {
+                labelFetcher: data.hostModel,
+                labelDataIndex: idx,
+                defaultText: data.getName(idx),
+                autoColor: visualColor,
+                useInsideStyle: !!labelLayout.inside
+            },
+            {
+                textAlign: labelLayout.textAlign,
+                textVerticalAlign: labelLayout.verticalAlign
+            }
+        );
 
         labelText.ignore = labelText.normalIgnore = !labelModel.get('show');
         labelText.hoverIgnore = !labelHoverModel.get('show');
@@ -162,7 +156,6 @@ define(function (require) {
         });
         labelLine.setStyle(labelLineModel.getModel('lineStyle').getLineStyle());
 
-        labelText.hoverStyle = getLabelStyle(data, idx, 'emphasis', labelHoverModel);
         labelLine.hoverStyle = labelLineHoverModel.getModel('lineStyle').getLineStyle();
     };
 

package/src/chart/funnel/funnelLayout.js

@@ -35,7 +35,7 @@ define(function (require) {
         return indices;
     }
 
-    function labelLayout (data) {
+    function labelLayout(data) {
         data.each(function (idx) {
             var itemModel = data.getItemModel(idx);
             var labelModel = itemModel.getModel('label.normal');

package/src/chart/gauge/GaugeSeries.js

@@ -76,9 +76,7 @@ define(function (require) {
                 show: true,
                 distance: 5,
                 // formatter: null,
-                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                    color: 'auto'
-                }
+                color: 'auto'
             },
             pointer: {
                 show: true,
@@ -95,10 +93,8 @@ define(function (require) {
                 // x, y，单位px
                 offsetCenter: [0, '-40%'],
                 // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                textStyle: {
-                    color: '#333',
-                    fontSize: 15
-                }
+                color: '#333',
+                fontSize: 15
             },
             detail: {
                 show: true,
@@ -106,15 +102,14 @@ define(function (require) {
                 borderWidth: 0,
                 borderColor: '#ccc',
                 width: 100,
-                height: 40,
+                height: null, // self-adaption
+                padding: [5, 10],
                 // x, y，单位px
                 offsetCenter: [0, '40%'],
                 // formatter: null,
                 // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                textStyle: {
-                    color: 'auto',
-                    fontSize: 30
-                }
+                color: 'auto',
+                fontSize: 30
             }
         }
     });

package/src/chart/gauge/GaugeView.js

@@ -174,7 +174,6 @@ define(function (require) {
 
             var splitLineStyle = splitLineModel.getModel('lineStyle').getLineStyle();
             var tickLineStyle = tickModel.getModel('lineStyle').getLineStyle();
-            var textStyleModel = labelModel.getModel('textStyle');
 
             for (var i = 0; i <= splitNumber; i++) {
                 var unitX = Math.cos(angle);
@@ -207,26 +206,18 @@ define(function (require) {
                         labelModel.get('formatter')
                     );
                     var distance = labelModel.get('distance');
+                    var autoColor = getColor(i / splitNumber);
 
-                    var text = new graphic.Text({
-                        style: {
+                    group.add(new graphic.Text({
+                        style: graphic.setTextStyle({}, labelModel, {
                             text: label,
                             x: unitX * (r - splitLineLen - distance) + cx,
                             y: unitY * (r - splitLineLen - distance) + cy,
-                            fill: textStyleModel.getTextColor(),
-                            textFont: textStyleModel.getFont(),
                             textVerticalAlign: unitY < -0.4 ? 'top' : (unitY > 0.4 ? 'bottom' : 'middle'),
                             textAlign: unitX < -0.4 ? 'left' : (unitX > 0.4 ? 'right' : 'center')
-                        },
+                        }, {autoColor: autoColor}),
                         silent: true
-                    });
-                    if (text.style.fill === 'auto') {
-                        text.setStyle({
-                            fill: getColor(i / splitNumber)
-                        });
-                    }
-
-                    group.add(text);
+                    }));
                 }
 
                 // Axis tick
@@ -352,34 +343,28 @@ define(function (require) {
         ) {
             var titleModel = seriesModel.getModel('title');
             if (titleModel.get('show')) {
-                var textStyleModel = titleModel.getModel('textStyle');
                 var offsetCenter = titleModel.get('offsetCenter');
                 var x = posInfo.cx + parsePercent(offsetCenter[0], posInfo.r);
                 var y = posInfo.cy + parsePercent(offsetCenter[1], posInfo.r);
 
-                var text = new graphic.Text({
-                    style: {
+                var minVal = +seriesModel.get('min');
+                var maxVal = +seriesModel.get('max');
+                var value = seriesModel.getData().get('value', 0);
+                var autoColor = getColor(
+                    numberUtil.linearMap(value, [minVal, maxVal], [0, 1], true)
+                );
+
+                this.group.add(new graphic.Text({
+                    silent: true,
+                    style: graphic.setTextStyle({}, titleModel, {
                         x: x,
                         y: y,
                         // FIXME First data name ?
                         text: seriesModel.getData().getName(0),
-                        fill: textStyleModel.getTextColor(),
-                        textFont: textStyleModel.getFont(),
                         textAlign: 'center',
                         textVerticalAlign: 'middle'
-                    }
-                });
-
-                if (text.style.fill === 'auto') {
-                    var minVal = +seriesModel.get('min');
-                    var maxVal = +seriesModel.get('max');
-                    var value = seriesModel.getData().get('value', 0);
-                    text.setStyle('fill', getColor(
-                        numberUtil.linearMap(value, [minVal, maxVal], [0, 1], true)
-                    ));
-                }
-
-                this.group.add(text);
+                    }, {autoColor: autoColor, forceRich: true})
+                }));
             }
         },
 
@@ -390,37 +375,31 @@ define(function (require) {
             var minVal = +seriesModel.get('min');
             var maxVal = +seriesModel.get('max');
             if (detailModel.get('show')) {
-                var textStyleModel = detailModel.getModel('textStyle');
                 var offsetCenter = detailModel.get('offsetCenter');
                 var x = posInfo.cx + parsePercent(offsetCenter[0], posInfo.r);
                 var y = posInfo.cy + parsePercent(offsetCenter[1], posInfo.r);
                 var width = parsePercent(detailModel.get('width'), posInfo.r);
                 var height = parsePercent(detailModel.get('height'), posInfo.r);
                 var value = seriesModel.getData().get('value', 0);
-                var rect = new graphic.Rect({
-                    shape: {
-                        x: x - width / 2,
-                        y: y - height / 2,
-                        width: width,
-                        height: height
-                    },
-                    style: {
+                var autoColor = getColor(
+                    numberUtil.linearMap(value, [minVal, maxVal], [0, 1], true)
+                );
+
+                this.group.add(new graphic.Text({
+                    silent: true,
+                    style: graphic.setTextStyle({}, detailModel, {
+                        x: x,
+                        y: y,
                         text: formatLabel(
                             // FIXME First data name ?
                             value, detailModel.get('formatter')
                         ),
-                        fill: detailModel.get('backgroundColor'),
-                        textFill: textStyleModel.getTextColor(),
-                        textFont: textStyleModel.getFont()
-                    }
-                });
-                if (rect.style.textFill === 'auto') {
-                    rect.setStyle('textFill', getColor(
-                        numberUtil.linearMap(value, [minVal, maxVal], [0, 1], true)
-                    ));
-                }
-                rect.setStyle(detailModel.getItemStyle(['color']));
-                this.group.add(rect);
+                        textWidth: isNaN(width) ? null : width,
+                        textHeight: isNaN(height) ? null : height,
+                        textAlign: 'center',
+                        textVerticalAlign: 'middle'
+                    }, {autoColor: autoColor, forceRich: true})
+                }));
             }
         }
     });

package/src/chart/graph/GraphSeries.js

@@ -37,7 +37,7 @@ define(function (require) {
 
         mergeDefaultAndTheme: function (option) {
             GraphSeries.superApply(this, 'mergeDefaultAndTheme', arguments);
-            modelUtil.defaultEmphasis(option.edgeLabel, modelUtil.LABEL_OPTIONS);
+            modelUtil.defaultEmphasis(option.edgeLabel, ['show']);
         },
 
         getInitialData: function (option, ecModel) {
@@ -228,6 +228,7 @@ define(function (require) {
             zoom: 1,
             // Symbol size scale ratio in roam
             nodeScaleRatio: 0.6,
+            // cursor: null,
 
             // categories: [],
 

package/src/chart/graph/GraphView.js

@@ -18,6 +18,35 @@ define(function (require) {
         return item.getVisual('opacity') || item.getModel().get(opacityPath);
     }
 
+    function fadeOutItem(item, opacityPath, opacityRatio) {
+        var el = item.getGraphicEl();
+
+        var opacity = getItemOpacity(item, opacityPath);
+        if (opacityRatio != null) {
+            opacity == null && (opacity = 1);
+            opacity *= opacityRatio;
+        }
+
+        el.downplay && el.downplay();
+        el.traverse(function (child) {
+            if (child.type !== 'group') {
+                child.setStyle('opacity', opacity);
+            }
+        });
+    }
+
+    function fadeInItem(item, opacityPath) {
+        var opacity = getItemOpacity(item, opacityPath);
+        var el = item.getGraphicEl();
+
+        el.highlight && el.highlight();
+        el.traverse(function (child) {
+            if (child.type !== 'group') {
+                child.setStyle('opacity', opacity);
+            }
+        });
+    }
+
     require('../../echarts').extendChartView({
 
         type: 'graph',
@@ -125,7 +154,8 @@ define(function (require) {
 
             }, this);
 
-            var circularRotateLabel = seriesModel.get('layout') === 'circular' && seriesModel.get('circular.rotateLabel');
+            var circularRotateLabel = seriesModel.get('layout') === 'circular'
+                && seriesModel.get('circular.rotateLabel');
             var cx = data.getLayout('cx');
             var cy = data.getLayout('cy');
             data.eachItemGraphicEl(function (el, idx) {
@@ -142,8 +172,9 @@ define(function (require) {
                     }
                     var textPosition = isLeft ? 'left' : 'right';
                     symbolPath.setStyle({
-                        textRotation: rad,
-                        textPosition: textPosition
+                        textRotation: -rad,
+                        textPosition: textPosition,
+                        textOrigin: 'center'
                     });
                     symbolPath.hoverStyle && (symbolPath.hoverStyle.textPosition = textPosition);
                 }
@@ -174,38 +205,12 @@ define(function (require) {
             var graph = data.graph;
             var dataType = el.dataType;
 
-            function fadeOutItem(item, opacityPath) {
-                var opacity = getItemOpacity(item, opacityPath);
-                var el = item.getGraphicEl();
-                if (opacity == null) {
-                    opacity = 1;
-                }
-
-                el.traverse(function (child) {
-                    child.trigger('normal');
-                    if (child.type !== 'group') {
-                        child.setStyle('opacity', opacity * 0.1);
-                    }
-                });
-            }
-
-            function fadeInItem(item, opacityPath) {
-                var opacity = getItemOpacity(item, opacityPath);
-                var el = item.getGraphicEl();
-
-                el.traverse(function (child) {
-                    child.trigger('emphasis');
-                    if (child.type !== 'group') {
-                        child.setStyle('opacity', opacity);
-                    }
-                });
-            }
             if (dataIndex !== null && dataType !== 'edge') {
                 graph.eachNode(function (node) {
-                    fadeOutItem(node, nodeOpacityPath);
+                    fadeOutItem(node, nodeOpacityPath, 0.1);
                 });
                 graph.eachEdge(function (edge) {
-                    fadeOutItem(edge, lineOpacityPath);
+                    fadeOutItem(edge, lineOpacityPath, 0.1);
                 });
 
                 var node = graph.getNodeByIndex(dataIndex);
@@ -223,23 +228,12 @@ define(function (require) {
 
         unfocusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
             var graph = this._model.getData().graph;
+
             graph.eachNode(function (node) {
-                var opacity = getItemOpacity(node, nodeOpacityPath);
-                node.getGraphicEl().traverse(function (child) {
-                    child.trigger('normal');
-                    if (child.type !== 'group') {
-                        child.setStyle('opacity', opacity);
-                    }
-                });
+                fadeOutItem(node, nodeOpacityPath);
             });
             graph.eachEdge(function (edge) {
-                var opacity = getItemOpacity(edge, lineOpacityPath);
-                edge.getGraphicEl().traverse(function (child) {
-                    child.trigger('normal');
-                    if (child.type !== 'group') {
-                        child.setStyle('opacity', opacity);
-                    }
-                });
+                fadeOutItem(edge, lineOpacityPath);
             });
         },