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
