echarts 3.6.1 → 3.7.2

package/lib/chart/pie/PieView.js

@@ -96,20 +96,6 @@
 
     var piePieceProto = PiePiece.prototype;
 
-    function getLabelStyle(data, idx, state, labelModel, labelPosition) {
-        var textStyleModel = labelModel.getModel('textStyle');
-        var isLabelInside = labelPosition === 'inside' || labelPosition === 'inner';
-        return {
-            fill: textStyleModel.getTextColor()
-                || (isLabelInside ? '#fff' : data.getItemVisual(idx, 'color')),
-            opacity: data.getItemVisual(idx, 'opacity'),
-            textFont: textStyleModel.getFont(),
-            text: zrUtil.retrieve(
-                data.hostModel.getFormattedLabel(idx, state), data.getName(idx)
-            )
-        };
-    }
-
     piePieceProto.updateData = function (data, idx, firstCreate) {
 
         var sector = this.childAt(0);
@@ -164,6 +150,9 @@
         );
         sector.hoverStyle = itemStyleModel.getModel('emphasis').getItemStyle();
 
+        var cursorStyle = itemModel.getShallow('cursor');
+        cursorStyle && sector.attr('cursor', cursorStyle);
+
         // Toggle selected
         toggleItemSelected(
             this,
@@ -179,7 +168,7 @@
             sector.stopAnimation(true);
             sector.animateTo({
                 shape: {
-                    r: layout.r + 10
+                    r: layout.r + seriesModel.get('hoverOffset')
                 }
             }, 300, 'elasticOut');
         }
@@ -231,11 +220,6 @@
             }
         }, seriesModel, idx);
         labelText.attr({
-            style: {
-                textVerticalAlign: labelLayout.verticalAlign,
-                textAlign: labelLayout.textAlign,
-                textFont: labelLayout.font
-            },
             rotation: labelLayout.rotation,
             origin: [labelLayout.x, labelLayout.y],
             z2: 10
@@ -245,9 +229,23 @@
         var labelHoverModel = itemModel.getModel('label.emphasis');
         var labelLineModel = itemModel.getModel('labelLine.normal');
         var labelLineHoverModel = itemModel.getModel('labelLine.emphasis');
-        var labelPosition = labelModel.get('position') || labelHoverModel.get('position');
+        var visualColor = data.getItemVisual(idx, 'color');
 
-        labelText.setStyle(getLabelStyle(data, idx, 'normal', labelModel, labelPosition));
+        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,
+                opacity: data.getItemVisual(idx, 'opacity')
+            }
+        );
 
         labelText.ignore = labelText.normalIgnore = !labelModel.get('show');
         labelText.hoverIgnore = !labelHoverModel.get('show');
@@ -262,7 +260,6 @@
         });
         labelLine.setStyle(labelLineModel.getModel('lineStyle').getLineStyle());
 
-        labelText.hoverStyle = getLabelStyle(data, idx, 'emphasis', labelHoverModel, labelPosition);
         labelLine.hoverStyle = labelLineHoverModel.getModel('lineStyle').getLineStyle();
 
         var smooth = labelLineModel.get('smooth');

package/lib/chart/pie/labelLayout.js

@@ -190,7 +190,7 @@
 
                 textAlign = isLabelInside ? 'center' : (dx > 0 ? 'left' : 'right');
             }
-            var font = labelModel.getModel('textStyle').getFont();
+            var font = labelModel.getFont();
 
             var labelRotate = labelModel.get('rotate')
                 ? (dx < 0 ? -midAngle + Math.PI : -midAngle) : 0;
@@ -210,8 +210,8 @@
                 linePoints: linePoints,
                 textAlign: textAlign,
                 verticalAlign: 'middle',
-                font: font,
-                rotation: labelRotate
+                rotation: labelRotate,
+                inside: isLabelInside
             };
 
             // Not layout the inside label

package/lib/chart/radar/RadarView.js

@@ -26,15 +26,18 @@
                 if (symbolType === 'none') {
                     return;
                 }
+                var symbolSize = normalizeSymbolSize(
+                    data.getItemVisual(idx, 'symbolSize')
+                );
                 var symbolPath = symbolUtil.createSymbol(
-                    symbolType, -0.5, -0.5, 1, 1, color
+                    symbolType, -1, -1, 2, 2, color
                 );
                 symbolPath.attr({
                     style: {
                         strokeNoScale: true
                     },
                     z2: 100,
-                    scale: normalizeSymbolSize(data.getItemVisual(idx, 'symbolSize'))
+                    scale: [symbolSize[0] / 2, symbolSize[1] / 2]
                 });
                 return symbolPath;
             }
@@ -171,24 +174,17 @@
                     symbolPath.setStyle(itemStyle);
                     symbolPath.hoverStyle = zrUtil.clone(itemHoverStyle);
 
-                    var defaultText = data.get(data.dimensions[symbolPath.__dimIdx], idx);
-                    graphic.setText(symbolPath.style, labelModel, color);
-                    symbolPath.setStyle({
-                        text: labelModel.get('show') ? zrUtil.retrieve(
-                            seriesModel.getFormattedLabel(
-                                idx, 'normal', null, symbolPath.__dimIdx
-                            ),
-                            defaultText
-                        ) : ''
-                    });
-
-                    graphic.setText(symbolPath.hoverStyle, labelHoverModel, color);
-                    symbolPath.hoverStyle.text = labelHoverModel.get('show') ? zrUtil.retrieve(
-                        seriesModel.getFormattedLabel(
-                            idx, 'emphasis', null, symbolPath.__dimIdx
-                        ),
-                        defaultText
-                    ) : '';
+                    graphic.setLabelStyle(
+                        symbolPath.style, symbolPath.hoverStyle, labelModel, labelHoverModel,
+                        {
+                            labelFetcher: data.hostModel,
+                            labelDataIndex: idx,
+                            labelDimIndex: symbolPath.__dimIdx,
+                            defaultText: data.get(data.dimensions[symbolPath.__dimIdx], idx),
+                            autoColor: color,
+                            isRectText: true
+                        }
+                    );
                 });
 
                 function onEmphasis() {

package/lib/chart/sankey/SankeySeries.js

@@ -92,10 +92,8 @@
                 normal: {
                     show: true,
                     position: 'right',
-                    textStyle: {
-                        color: '#000',
-                        fontSize: 12
-                    }
+                    color: '#000',
+                    fontSize: 12
                 },
                 emphasis: {
                     show: true

package/lib/chart/sankey/SankeyView.js

@@ -5,7 +5,6 @@
 
 
     var graphic = require('../../util/graphic');
-    var zrUtil = require('zrender/lib/core/util');
 
     var SankeyShape = graphic.extendShape({
         shape: {
@@ -117,9 +116,7 @@
                 var layout = node.getLayout();
                 var itemModel = node.getModel();
                 var labelModel = itemModel.getModel('label.normal');
-                var textStyleModel = labelModel.getModel('textStyle');
                 var labelHoverModel = itemModel.getModel('label.emphasis');
-                var textStyleHoverModel = labelHoverModel.getModel('textStyle');
 
                 var rect = new graphic.Rect({
                     shape: {
@@ -128,37 +125,24 @@
                         width: node.getLayout().dx,
                         height: node.getLayout().dy
                     },
-                    style: {
-                        // Get formatted label in label.normal option
-                        //  Use node id if it is not specified
-                        text: labelModel.get('show')
-                            ? seriesModel.getFormattedLabel(node.dataIndex, 'normal') || node.id
-                            // Use empty string to hide the label
-                            : '',
-                        textFont: textStyleModel.getFont(),
-                        textFill: textStyleModel.getTextColor(),
-                        textPosition: labelModel.get('position')
-                    }
+                    style: itemModel.getModel('itemStyle.normal').getItemStyle()
                 });
 
-                rect.setStyle(zrUtil.defaults(
-                    {
-                        fill: node.getVisual('color')
-                    },
-                    itemModel.getModel('itemStyle.normal').getItemStyle()
-                ));
+                var hoverStyle = node.getModel('itemStyle.emphasis').getItemStyle();
 
-                graphic.setHoverStyle(rect, zrUtil.extend(
-                    node.getModel('itemStyle.emphasis'),
+                graphic.setLabelStyle(
+                    rect.style, hoverStyle, labelModel, labelHoverModel,
                     {
-                        text: labelHoverModel.get('show')
-                            ? seriesModel.getFormattedLabel(node.dataIndex, 'emphasis') || node.id
-                            : '',
-                        textFont: textStyleHoverModel.getFont(),
-                        textFill: textStyleHoverModel.getTextColor(),
-                        textPosition: labelHoverModel.get('position')
+                        labelFetcher: seriesModel,
+                        labelDataIndex: node.dataIndex,
+                        defaultText: node.id,
+                        isRectText: true
                     }
-                ));
+                );
+
+                rect.setStyle('fill', node.getVisual('color'));
+
+                graphic.setHoverStyle(rect, hoverStyle);
 
                 group.add(rect);
 

package/lib/chart/sankey/sankeyLayout.js

@@ -144,7 +144,7 @@
      * @param {module:echarts/data/Graph~Node} nodes  node of sankey view
      * @param {module:echarts/data/Graph~Edge} edges  edge of sankey view
      * @param {number} height  the whole height of the area to draw the view
-     * @param {numbber} nodeGap  the vertical distance between two nodes
+     * @param {number} nodeGap  the vertical distance between two nodes
      *     in the same column.
      * @param {number} iterations  the number of iterations for the algorithm
      */

package/lib/chart/scatter/ScatterSeries.js

@@ -40,6 +40,7 @@
             large: false,
             // Available when large is true
             largeThreshold: 2000,
+            // cursor: null,
 
             // label: {
                 // normal: {
@@ -48,7 +49,7 @@
                     // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
                     // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
                     //           'inside'|'left'|'right'|'top'|'bottom'
-                    // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
+                    // 默认使用全局文本样式，详见TEXTSTYLE
             //     }
             // },
             itemStyle: {

package/lib/chart/themeRiver/ThemeRiverSeries.js

@@ -293,10 +293,8 @@
                     textAlign: 'right',
                     show: true,
                     position: 'left',
-                    textStyle: {
-                        color: '#000',
-                        fontSize: 11
-                    }
+                    color: '#000',
+                    fontSize: 11
                 },
                 emphasis: {
                     show: true

package/lib/chart/themeRiver/ThemeRiverView.js

@@ -129,15 +129,12 @@
 
                 var hoverItemStyleModel = itemModel.getModel('itemStyle.emphasis');
                 var itemStyleModel = itemModel.getModel('itemStyle.normal');
-                var textStyleModel = labelModel.getModel('textStyle');
 
-                text.setStyle({
+                graphic.setTextStyle(text.style, labelModel, {
                     text: labelModel.get('show')
                         ? seriesModel.getFormattedLabel(indices[j - 1], 'normal')
                             || data.getName(indices[j - 1])
-                        : '',
-                    textFont: textStyleModel.getFont(),
-                    textAlign: labelModel.get('textAlign'),
+                        : null,
                     textVerticalAlign: 'middle'
                 });
 

package/lib/chart/themeRiver/themeRiverLayout.js

@@ -103,7 +103,7 @@
      * Inspired by Lee Byron's paper Stacked Graphs - Geometry & Aesthetics
      *
      * @param  {Array.<Array>} data  the points in each layer
-     * @return {Array}
+     * @return {Object}
      */
     function computeBaseline(data) {
         var layerNum = data.length;

package/lib/chart/treemap/Breadcrumb.js

@@ -100,7 +100,7 @@
                 if (totalWidth > availableSize.width) {
                     totalWidth -= itemWidth - emptyItemWidth;
                     itemWidth = emptyItemWidth;
-                    text = '';
+                    text = null;
                 }
 
                 var el = new graphic.Polygon({

package/lib/chart/treemap/TreemapSeries.js

@@ -83,11 +83,34 @@
             label: {
                 normal: {
                     show: true,
+                    // Do not use textDistance, for ellipsis rect just the same as treemap node rect.
+                    distance: 0,
+                    padding: 5,
                     position: 'inside', // Can be [5, '5%'] or position stirng like 'insideTopLeft', ...
-                    textStyle: {
-                        color: '#fff',
-                        ellipsis: true
-                    }
+                    // formatter: null,
+                    color: '#fff',
+                    ellipsis: true
+                    // align
+                    // verticalAlign
+                }
+            },
+            upperLabel: {                   // Label when node is parent.
+                normal: {
+                    show: false,
+                    position: [0, '50%'],
+                    height: 20,
+                    // formatter: null,
+                    color: '#fff',
+                    ellipsis: true,
+                    // align: null,
+                    verticalAlign: 'middle'
+                },
+                emphasis: {
+                    show: true,
+                    position: [0, '50%'],
+                    color: '#fff',
+                    ellipsis: true,
+                    verticalAlign: 'middle'
                 }
             },
             itemStyle: {
@@ -146,11 +169,8 @@
          * @override
          */
         getInitialData: function (option, ecModel) {
-            var rootName = option.name;
-            rootName == null && (rootName = option.name);
-
             // Create a virtual root.
-            var root = {name: rootName, children: option.data};
+            var root = {name: option.name, children: option.data};
 
             completeTreeValue(root);
 

package/lib/chart/treemap/TreemapView.js

@@ -15,8 +15,10 @@
     var each = zrUtil.each;
 
     var DRAG_THRESHOLD = 3;
-    var PATH_LABEL_NORMAL = ['label', 'normal'];
+    var PATH_LABEL_NOAMAL = ['label', 'normal'];
     var PATH_LABEL_EMPHASIS = ['label', 'emphasis'];
+    var PATH_UPPERLABEL_NORMAL = ['upperLabel', 'normal'];
+    var PATH_UPPERLABEL_EMPHASIS = ['upperLabel', 'emphasis'];
     var Z_BASE = 10; // Should bigger than every z.
     var Z_BG = 1;
     var Z_CONTENT = 2;
@@ -65,12 +67,6 @@
              * @private
              */
             this._state = 'ready';
-
-            /**
-             * @private
-             * @type {boolean}
-             */
-            this._mayClick;
         },
 
         /**
@@ -156,7 +152,7 @@
                 lastsForAnimation, willInvisibleEls
             );
 
-            // Notice: when thisTree and oldTree are the same tree (see list.cloneShadow),
+            // Notice: when thisTree and oldTree are the same tree (see list.cloneShallow),
             // the oldTree is actually losted, so we can not find all of the old graphic
             // elements from tree. So we use this stragegy: make element storage, move
             // from old storage to new storage, clear old storage.
@@ -395,8 +391,6 @@
          * @private
          */
         _onPan: function (dx, dy) {
-            this._mayClick = false;
-
             if (this._state !== 'animating'
                 && (Math.abs(dx) > DRAG_THRESHOLD || Math.abs(dy) > DRAG_THRESHOLD)
             ) {
@@ -429,8 +423,6 @@
          * @private
          */
         _onZoom: function (scale, mouseX, mouseY) {
-            this._mayClick = false;
-
             if (this._state !== 'animating') {
                 // These param must not be cached.
                 var root = this.seriesModel.getData().tree.root;
@@ -478,25 +470,11 @@
          * @private
          */
         _initEvents: function (containerGroup) {
-            // FIXME
-            // 不用click以及silent的原因是，animate时视图设置silent true来避免click生效，
-            // 但是animate中，按下鼠标，animate结束后（silent设回为false）松开鼠标，
-            // 还是会触发click，期望是不触发。
-
-            // Mousedown occurs when drag start, and mouseup occurs when drag end,
-            // click event should not be triggered in that case.
-
-            containerGroup.on('mousedown', function (e) {
-                this._state === 'ready' && (this._mayClick = true);
-            }, this);
-            containerGroup.on('mouseup', function (e) {
-                if (this._mayClick) {
-                    this._mayClick = false;
-                    this._state === 'ready' && onClick.call(this, e);
+            containerGroup.on('click', function (e) {
+                if (this._state !== 'ready') {
+                    return;
                 }
-            }, this);
 
-            function onClick(e) {
                 var nodeClick = this.seriesModel.get('nodeClick', true);
 
                 if (!nodeClick) {
@@ -524,7 +502,8 @@
                         link && window.open(link, linkTarget);
                     }
                 }
-            }
+
+            }, this);
         },
 
         /**
@@ -658,6 +637,9 @@
             return;
         }
 
+        // -------------------------------------------------------------------
+        // Start of closure variables available in "Procedures in renderNode".
+
         var thisLayout = thisNode.getLayout();
 
         if (!thisLayout || !thisLayout.isInView) {
@@ -666,11 +648,20 @@
 
         var thisWidth = thisLayout.width;
         var thisHeight = thisLayout.height;
+        var borderWidth = thisLayout.borderWidth;
         var thisInvisible = thisLayout.invisible;
 
         var thisRawIndex = thisNode.getRawIndex();
         var oldRawIndex = oldNode && oldNode.getRawIndex();
 
+        var thisViewChildren = thisNode.viewChildren;
+        var upperHeight = thisLayout.upperHeight;
+        var isParent = thisViewChildren && thisViewChildren.length;
+        var itemStyleEmphasisModel = thisNode.getModel('itemStyle.emphasis');
+
+        // End of closure ariables available in "Procedures in renderNode".
+        // -----------------------------------------------------------------
+
         // Node group
         var group = giveGraphic('nodeGroup', Group);
 
@@ -690,20 +681,12 @@
 
         // Background
         var bg = giveGraphic('background', Rect, depth, Z_BG);
-        if (bg) {
-            bg.setShape({x: 0, y: 0, width: thisWidth, height: thisHeight});
-            updateStyle(bg, function () {
-                bg.setStyle('fill', thisNode.getVisual('borderColor', true));
-            });
-            group.add(bg);
-        }
-
-        var thisViewChildren = thisNode.viewChildren;
+        bg && renderBackground(group, bg, isParent && thisLayout.upperHeight);
 
         // No children, render content.
-        if (!thisViewChildren || !thisViewChildren.length) {
+        if (!isParent) {
             var content = giveGraphic('content', Rect, depth, Z_CONTENT);
-            content && renderContent(group);
+            content && renderContent(group, content);
         }
 
         return group;
@@ -712,12 +695,44 @@
         // | Procedures in renderNode |
         // ----------------------------
 
-        function renderContent(group) {
+        function renderBackground(group, bg, useUpperLabel) {
+            // For tooltip.
+            bg.dataIndex = thisNode.dataIndex;
+            bg.seriesIndex = seriesModel.seriesIndex;
+
+            bg.setShape({x: 0, y: 0, width: thisWidth, height: thisHeight});
+            var visualBorderColor = thisNode.getVisual('borderColor', true);
+            var emphasisBorderColor = itemStyleEmphasisModel.get('borderColor');
+
+            updateStyle(bg, function () {
+                var normalStyle = {fill: visualBorderColor};
+                var emphasisStyle = {fill: emphasisBorderColor};
+
+                if (useUpperLabel) {
+                    var upperLabelWidth = thisWidth - 2 * borderWidth;
+
+                    prepareText(
+                        normalStyle, emphasisStyle, visualBorderColor, upperLabelWidth, upperHeight,
+                        {x: borderWidth, y: 0, width: upperLabelWidth, height: upperHeight}
+                    );
+                }
+                // For old bg.
+                else {
+                    normalStyle.text = emphasisStyle.text = null;
+                }
+
+                bg.setStyle(normalStyle);
+                graphic.setHoverStyle(bg, emphasisStyle);
+            });
+
+            group.add(bg);
+        }
+
+        function renderContent(group, content) {
             // For tooltip.
             content.dataIndex = thisNode.dataIndex;
             content.seriesIndex = seriesModel.seriesIndex;
 
-            var borderWidth = thisLayout.borderWidth;
             var contentWidth = Math.max(thisWidth - 2 * borderWidth, 0);
             var contentHeight = Math.max(thisHeight - 2 * borderWidth, 0);
 
@@ -732,7 +747,7 @@
             var visualColor = thisNode.getVisual('color', true);
             updateStyle(content, function () {
                 var normalStyle = {fill: visualColor};
-                var emphasisStyle = thisNode.getModel('itemStyle.emphasis').getItemStyle();
+                var emphasisStyle = itemStyleEmphasisModel.getItemStyle();
 
                 prepareText(normalStyle, emphasisStyle, visualColor, contentWidth, contentHeight);
 
@@ -761,50 +776,46 @@
             }
         }
 
-        function prepareText(normalStyle, emphasisStyle, visualColor, contentWidth, contentHeight) {
+        function prepareText(normalStyle, emphasisStyle, visualColor, width, height, upperLabelRect) {
             var nodeModel = thisNode.getModel();
-            var text = nodeModel.get('name');
-            if (thisLayout.isLeafRoot) {
+            var text = zrUtil.retrieve(
+                seriesModel.getFormattedLabel(
+                    thisNode.dataIndex, 'normal', null, null, upperLabelRect ? 'upperLabel' : 'label'
+                ),
+                nodeModel.get('name')
+            );
+            if (!upperLabelRect && thisLayout.isLeafRoot) {
                 var iconChar = seriesModel.get('drillDownIcon', true);
                 text = iconChar ? iconChar + ' ' + text : text;
             }
 
-            setText(
-                text, normalStyle, nodeModel, PATH_LABEL_NORMAL,
-                visualColor, contentWidth, contentHeight
+            var normalLabelModel = nodeModel.getModel(
+                upperLabelRect ? PATH_UPPERLABEL_NORMAL : PATH_LABEL_NOAMAL
             );
-            setText(
-                text, emphasisStyle, nodeModel, PATH_LABEL_EMPHASIS,
-                visualColor, contentWidth, contentHeight
+            var emphasisLabelModel = nodeModel.getModel(
+                upperLabelRect ? PATH_UPPERLABEL_EMPHASIS : PATH_LABEL_EMPHASIS
             );
-        }
 
-        function setText(text, style, nodeModel, labelPath, visualColor, contentWidth, contentHeight) {
-            var labelModel = nodeModel.getModel(labelPath);
-            var labelTextStyleModel = labelModel.getModel('textStyle');
+            var isShow = normalLabelModel.getShallow('show');
 
-            graphic.setText(style, labelModel, visualColor);
+            graphic.setLabelStyle(
+                normalStyle, emphasisStyle, normalLabelModel, emphasisLabelModel,
+                {
+                    defaultText: isShow ? text : null,
+                    autoColor: visualColor,
+                    isRectText: true
+                }
+            );
 
-            // text.align and text.baseline is not included by graphic.setText,
-            // because in most cases the two attributes are not exposed to user,
-            // except in treemap.
-            style.textAlign = labelTextStyleModel.get('align');
-            style.textVerticalAlign = labelTextStyleModel.get('baseline');
+            upperLabelRect && (normalStyle.textRect = zrUtil.clone(upperLabelRect));
 
-            var textRect = labelTextStyleModel.getTextRect(text);
-            if (!labelModel.getShallow('show') || textRect.height > contentHeight) {
-                style.text = '';
-            }
-            else if (textRect.width > contentWidth) {
-                style.text = labelTextStyleModel.get('ellipsis')
-                    ? labelTextStyleModel.truncateText(
-                        text, contentWidth, null, {minChar: 2}
-                    )
-                    : '';
-            }
-            else {
-                style.text = text;
-            }
+            normalStyle.truncate = (isShow && normalLabelModel.get('ellipsis'))
+                ? {
+                    outerWidth: width,
+                    outerHeight: height,
+                    minChar: 2
+                }
+                : null;
         }
 
         function giveGraphic(storageName, Ctor, depth, z) {