fix(custom series): the hover style should be always set but should n…

…ot cache in hover state, otherwise the previous cache will be not reset and the previous hover style will remain; fix #11103.
apache · Sep 9, 2019 · 761de46 · 761de46
1 parent b3a9782
commit 761de46
Show file tree

Hide file tree

Showing 2 changed files with 138 additions and 12 deletions.
diff --git a/src/chart/custom.js b/src/chart/custom.js
@@ -318,19 +318,11 @@ function updateEl(el, dataIndex, elOption, animatableModel, data, isInit, isRoot
     // If `elOption.styleEmphasis` is `false`, remove hover style. The
     // logic is ensured by `graphicUtil.setElementHoverStyle`.
     var styleEmphasis = elOption.styleEmphasis;
-    var disableStyleEmphasis = styleEmphasis === false;
-    if (!(
-        // Try to escapse setting hover style for performance.
-        (el.__cusHasEmphStl && styleEmphasis == null)
-        || (!el.__cusHasEmphStl && disableStyleEmphasis)
-    )) {
-        // Should not use graphicUtil.setHoverStyle, since the styleEmphasis
-        // should not be share by group and its descendants.
-        graphicUtil.setElementHoverStyle(el, styleEmphasis);
-        el.__cusHasEmphStl = !disableStyleEmphasis;
-    }
+    // hoverStyle should always be set here, because if the hover style
+    // may already be changed, where the inner cache should be reset.
+    graphicUtil.setElementHoverStyle(el, styleEmphasis);
     if (isRoot) {
-        graphicUtil.setAsHighDownDispatcher(el, !disableStyleEmphasis);
+        graphicUtil.setAsHighDownDispatcher(el, styleEmphasis !== false);
     }
 }
 

diff --git a/test/hoverStyle.html b/test/hoverStyle.html
@@ -54,6 +54,9 @@
 
         <div id="info"></div>
 
+        <div id="maina1"></div>
+        <div id="maina2"></div>
+
         <div id="mainb1"></div>
         <div id="mainb2"></div>
         <div id="mainb3"></div>
@@ -152,6 +155,137 @@
 
 
 
+        <script>
+            require(['echarts'], function (echarts) {
+                var option = {
+                    hoverLayerThreshold: hoverLayerThreshold,
+                    backgroundColor: '#eee',
+                    animation: false,
+                    grid: {left: 400, top: 50},
+                    xAxis: {},
+                    yAxis: {},
+                    visualMap: {
+                        type: 'piecewise',
+                        orient: 'horizontal',
+                        top: 10,
+                        left: 0,
+                        pieces: [
+                            {min: 1000, color: 'red'},
+                            {min: 600, max: 1000, color: 'blue'},
+                            {min: 0, max: 600, color: 'green'}
+                        ],
+                        outOfRange: {
+                            color: '#aaa'
+                        }
+                    },
+                    series: [{
+                        type: 'custom',
+                        coordinateSystem: 'none',
+                        renderItem: function (params, api) {
+                            var pos = [api.value(0), api.value(1)];
+                            return {
+                                type: 'circle',
+                                shape: {cx: pos[0], cy: pos[1], r: 20},
+                                style: api.style({lineWidth: 1, stroke: '#777'})
+                            };
+                        },
+                        data: [
+                            [100, 100, 0],
+                            [200, 100, 800],
+                            [300, 100, 1500]
+                        ]
+                    }, {
+                        type: 'scatter',
+                        symbolSize: 20,
+                        data: [
+                            [100, 100, 0],
+                            [200, 100, 800],
+                            [300, 100, 1500]
+                        ]
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'maina1', {
+                    title: [
+                        '`visualMap.hoverLink` is the by default (`true`)',
+                        '**Click** a visualMap item, and then **mouseout**. The hover style of the circles should be OK.'
+                    ],
+                    option: option,
+                    height: 200
+                });
+            });
+        </script>
+
+
+
+        <script>
+            require(['echarts'], function (echarts) {
+                var option = {
+                    hoverLayerThreshold: hoverLayerThreshold,
+                    backgroundColor: '#eee',
+                    animation: false,
+                    grid: {left: 400, top: 50},
+                    xAxis: {},
+                    yAxis: {},
+                    visualMap: {
+                        type: 'piecewise',
+                        orient: 'horizontal',
+                        top: 10,
+                        left: 0,
+                        pieces: [
+                            {min: 1000, color: 'red'},
+                            {min: 600, max: 1000, color: 'blue'},
+                            {min: 0, max: 600, color: 'green'}
+                        ],
+                        outOfRange: {
+                            color: '#aaa'
+                        },
+                        hoverLink: false
+                    },
+                    series: [{
+                        type: 'custom',
+                        coordinateSystem: 'none',
+                        renderItem: function (params, api) {
+                            var pos = [api.value(0), api.value(1)];
+                            return {
+                                type: 'circle',
+                                shape: {cx: pos[0], cy: pos[1], r: 20},
+                                style: api.style({lineWidth: 1, stroke: '#777'})
+                            };
+                        },
+                        data: [
+                            [100, 100, 0],
+                            [200, 100, 800],
+                            [300, 100, 1500]
+                        ]
+                    }, {
+                        type: 'scatter',
+                        symbolSize: 20,
+                        data: [
+                            [100, 100, 0],
+                            [200, 100, 800],
+                            [300, 100, 1500]
+                        ]
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'maina2', {
+                    title: [
+                        '`visualMap.hoverLink` is `false`',
+                        '**mouseover** a circle, and then **click** the coresponding visualMap item',
+                        'and then **mouseover** the circle again, and then **mouseout**.',
+                        'The hover style of the circles should be OK.'
+                    ],
+                    option: option,
+                    height: 200
+                });
+            });
+
+        </script>
+
+
+
+
         <script>
             require(['echarts'], function (echarts) {
                 var option = {