Fix hover style on textStroke bug in custom series.

src/chart/custom.js

@@ -25,6 +25,7 @@ import createListFromArray from './helper/createListFromArray';
 import {getLayoutOnAxis} from '../layout/barGrid';
 import DataDiffer from '../data/DataDiffer';
 import SeriesModel from '../model/Series';
+import Model from '../model/Model';
 import ChartView from '../view/Chart';
 
 import prepareCartesian2d from '../coord/cartesian/prepareCustom';
@@ -33,7 +34,7 @@ import prepareSingleAxis from '../coord/single/prepareCustom';
 import preparePolar from '../coord/polar/prepareCustom';
 import prepareCalendar from '../coord/calendar/prepareCustom';
 
-
+var CACHED_LABEL_STYLE_PROPERTIES = graphicUtil.CACHED_LABEL_STYLE_PROPERTIES;
 var ITEM_STYLE_NORMAL_PATH = ['itemStyle'];
 var ITEM_STYLE_EMPHASIS_PATH = ['emphasis', 'itemStyle'];
 var LABEL_NORMAL = ['label'];
@@ -42,6 +43,7 @@ var LABEL_EMPHASIS = ['emphasis', 'label'];
 // 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`
  * of each coordinate systems are not required by each coordinate systems directly, but
@@ -451,19 +453,24 @@ function makeRenderItem(customSeries, data, ecModel, api) {
         var opacity = data.getItemVisual(dataIndexInside, 'opacity');
         opacity != null && (itemStyle.opacity = opacity);
 
-        graphicUtil.setTextStyle(itemStyle, currLabelNormalModel, null, {
+        var labelModel = extra
+            ? applyExtraBefore(extra, currLabelNormalModel)
+            : currLabelNormalModel;
+
+        graphicUtil.setTextStyle(itemStyle, labelModel, null, {
             autoColor: currVisualColor,
             isRectText: true
         });
 
-        itemStyle.text = currLabelNormalModel.getShallow('show')
+        itemStyle.text = labelModel.getShallow('show')
             ? zrUtil.retrieve2(
                 customSeries.getFormattedLabel(dataIndexInside, 'normal'),
                 getDefaultLabel(data, dataIndexInside)
             )
             : null;
 
-        extra && zrUtil.extend(itemStyle, extra);
+        extra && applyExtraAfter(itemStyle, extra);
+
         return itemStyle;
     }
 
@@ -478,11 +485,15 @@ function makeRenderItem(customSeries, data, ecModel, api) {
 
         var itemStyle = currItemModel.getModel(ITEM_STYLE_EMPHASIS_PATH).getItemStyle();
 
-        graphicUtil.setTextStyle(itemStyle, currLabelEmphasisModel, null, {
+        var labelModel = extra
+            ? applyExtraBefore(extra, currLabelEmphasisModel)
+            : currLabelEmphasisModel;
+
+        graphicUtil.setTextStyle(itemStyle, labelModel, null, {
             isRectText: true
         }, true);
 
-        itemStyle.text = currLabelEmphasisModel.getShallow('show')
+        itemStyle.text = labelModel.getShallow('show')
             ? zrUtil.retrieve3(
                 customSeries.getFormattedLabel(dataIndexInside, 'emphasis'),
                 customSeries.getFormattedLabel(dataIndexInside, 'normal'),
@@ -490,7 +501,8 @@ function makeRenderItem(customSeries, data, ecModel, api) {
             )
             : null;
 
-        extra && zrUtil.extend(itemStyle, extra);
+        extra && applyExtraAfter(itemStyle, extra);
+
         return itemStyle;
     }
 
@@ -719,6 +731,29 @@ function processAddUpdate(newIndex, oldIndex) {
     );
 }
 
+// `graphic#applyDefaultTextStyle` will cache
+// textFill, textStroke, textStrokeWidth.
+// We have to do this trick.
+function applyExtraBefore(extra, model) {
+    var dummyModel = new Model({}, model);
+    zrUtil.each(CACHED_LABEL_STYLE_PROPERTIES, function (stylePropName, modelPropName) {
+        if (extra.hasOwnProperty(stylePropName)) {
+            dummyModel.option[modelPropName] = extra[stylePropName];
+        }
+    });
+    return dummyModel;
+}
+
+function applyExtraAfter(itemStyle, extra) {
+    for (var key in extra) {
+        if (extra.hasOwnProperty(key)
+            || !CACHED_LABEL_STYLE_PROPERTIES.hasOwnProperty(key)
+        ) {
+            itemStyle[key] = extra[key];
+        }
+    }
+}
+
 function processRemove(oldIndex) {
     var context = this.context;
     var child = context.oldChildren[oldIndex];

src/util/graphic.js

@@ -312,12 +312,12 @@ function singleEnterEmphasis(el) {
     // where properties of `emphasis` may not appear in `normal`. We previously use
     // module:echarts/util/model#defaultEmphasis to merge `normal` to `emphasis`.
     // But consider rich text and setOption in merge mode, it is impossible to cover
-    // all properties in merge. So we use merge mode when setting style here. 
+    // all properties in merge. So we use merge mode when setting style here.
     // But we choose the merge strategy that only properties that is not `null/undefined`.
-    // Because when making a textStyle (espacially rich text), it is not easy to distinguish 
+    // Because when making a textStyle (espacially rich text), it is not easy to distinguish
     // `hasOwnProperty` and `null/undefined` in code, so we trade them as the same for simplicity.
-    // But this strategy brings a trouble that `null/undefined` can not be used to remove 
-    // style any more in `emphasis`. Users can both set properties directly on normal and 
+    // But this strategy brings a trouble that `null/undefined` can not be used to remove
+    // style any more in `emphasis`. Users can both set properties directly on normal and
     // emphasis to avoid this issue, or we might support `'none'` for this case if required.
     targetStyle.extendFrom(hoverStl);
 
@@ -902,6 +902,13 @@ function getAutoColor(color, opt) {
     return color !== 'auto' ? color : (opt && opt.autoColor) ? opt.autoColor : null;
 }
 
+// key: label model property nane, value: style property name.
+export var CACHED_LABEL_STYLE_PROPERTIES = {
+    color: 'textFill',
+    textBorderColor: 'textStroke',
+    textBorderWidth: 'textStrokeWidth'
+};
+
 /**
  * Give some default value to the input `textStyle` object, based on the current settings
  * in this `textStyle` object.
@@ -943,6 +950,8 @@ function applyDefaultTextStyle(textStyle) {
             )
         )
     ) {
+        // If intend to cache more properties here, modify the
+        // `CACHED_LABEL_STYLE_PROPERTIES`.
         insideRollback = {
             textFill: null,
             textStroke: textStyle.textStroke,

test/hoverStyle.html

@@ -218,6 +218,51 @@ under the License.
                         data: [
                             [212, 331], [215, 131], [265, 531]
                         ]
+                    }, {
+                        type: 'scatter',
+                        symbol: 'rect',
+                        symbolSize: 40,
+                        label: {
+                            show: true,
+                            formatter: 'label stroke orange hover blue\n{c}',
+                            textBorderWidth: 3,
+                            textBorderColor: 'orange'
+                        },
+                        emphasis: {
+                            label: {
+                                formatter: 'hover become stroke blue',
+                                textBorderColor: 'blue'
+                            }
+                        },
+                        data: [
+                            [312, 51]
+                        ]
+                    }, {
+                        type: 'custom',
+                        renderItem: function (params, api) {
+                            var coords = api.coord([312, 351]);
+                            return {
+                                type: 'rect',
+                                shape: {
+                                    x: coords[0],
+                                    y: coords[1],
+                                    width: 50,
+                                    height: 50
+                                },
+                                // check api.style
+                                style: api.style({
+                                    text: 'label stroke orange hover blue',
+                                    textStrokeWidth: 2,
+                                    textStroke: 'orange'
+                                }),
+                                styleEmphasis: api.styleEmphasis({
+                                    textStroke: 'blue'
+                                })
+                            };
+                        },
+                        data: [
+                            [312, 151]
+                        ]
                     }]
                 };
 
@@ -343,7 +388,7 @@ under the License.
                             {value: 100, name: 'aa', x: 100, y: 200},
                             {value: 150, name: 'bb', x: 450, y: 300},
                             {value: 200, name: 'cc', x: 200, y: 100},
-                            {value: 250, name: 'dd', x: 450, y: 250, 
+                            {value: 250, name: 'dd', x: 450, y: 250,
                                 emphasis: {
                                     itemStyle: {
                                         color: 'blue'
@@ -373,7 +418,7 @@ under the License.
 
                 var chart = testHelper.create(echarts, 'mainb4', {
                     title: [
-                        'normal style is **line: green dashed width 3, node: red**,', 
+                        'normal style is **line: green dashed width 3, node: red**,',
                         'should become **line: orange solid width 8, node: only "dd" blue** when hovered'
                     ],
                     option: option,