This is an automated email from the ASF dual-hosted git repository. sushuang pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/master by this push: new 761de46 fix(custom series): the hover style should be always set but should not cache in hover state, otherwise the previous cache will be not reset and the previous hover style will remain; fix #11103. 761de46 is described below commit 761de46f80a7999554990bd99953d7374b573396 Author: sushuang <sushuang0...@gmail.com> AuthorDate: Mon Sep 9 22:15:41 2019 +0800 fix(custom series): the hover style should be always set but should not cache in hover state, otherwise the previous cache will be not reset and the previous hover style will remain; fix #11103. --- src/chart/custom.js | 16 ++---- test/hoverStyle.html | 134 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 138 insertions(+), 12 deletions(-) diff --git a/src/chart/custom.js b/src/chart/custom.js index 453af47..a48f187 100644 --- 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 index 807aa40..e5bf376 100644 --- a/test/hoverStyle.html +++ b/test/hoverStyle.html @@ -54,6 +54,9 @@ under the License. <div id="info"></div> + <div id="maina1"></div> + <div id="maina2"></div> + <div id="mainb1"></div> <div id="mainb2"></div> <div id="mainb3"></div> @@ -156,6 +159,137 @@ under the License. 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 = { + hoverLayerThreshold: hoverLayerThreshold, xAxis: { }, yAxis: { --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org