You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2018/06/13 18:51:09 UTC
[incubator-echarts] branch master updated: some enhance of hover
style. (1) provide detailed API to set hover style. (2) enable to remove
hover style. (3) tweak the default text style setting. (4) fix the conflict
between hover and API emphasis for Symbol.
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 ba0a58b some enhance of hover style. (1) provide detailed API to set hover style. (2) enable to remove hover style. (3) tweak the default text style setting. (4) fix the conflict between hover and API emphasis for Symbol.
new 534aa14 Merge branch 'master' of https://github.com/apache/incubator-echarts
ba0a58b is described below
commit ba0a58b24edbd909a5b0ac96ff307d59a7545bac
Author: sushuang <su...@gmail.com>
AuthorDate: Thu Jun 14 00:45:18 2018 +0800
some enhance of hover style.
(1) provide detailed API to set hover style.
(2) enable to remove hover style.
(3) tweak the default text style setting.
(4) fix the conflict between hover and API emphasis for Symbol.
---
src/chart/helper/Symbol.js | 50 +++----
src/util/graphic.js | 337 +++++++++++++++++++++++++--------------------
test/hoverStyle.html | 286 ++++++++++++++++++++++++++++++++++++++
3 files changed, 504 insertions(+), 169 deletions(-)
diff --git a/src/chart/helper/Symbol.js b/src/chart/helper/Symbol.js
index 1333c7a..834ff29 100644
--- a/src/chart/helper/Symbol.js
+++ b/src/chart/helper/Symbol.js
@@ -332,31 +332,9 @@ symbolProto._updateCommon = function (data, idx, symbolSize, seriesScope) {
// Do not use symbol.trigger('emphasis'), but use symbol.highlight() instead.
graphic.setHoverStyle(symbolPath);
- var scale = getScale(symbolSize);
+ symbolPath.__symbolOriginalScale = getScale(symbolSize);
if (hoverAnimation && seriesModel.isAnimationEnabled()) {
- var onEmphasis = function() {
- // Do not support this hover animation util some scenario required.
- // Animation can only be supported in hover layer when using `el.incremetal`.
- if (this.incremental) {
- return;
- }
- var ratio = scale[1] / scale[0];
- this.animateTo({
- scale: [
- Math.max(scale[0] * 1.1, scale[0] + 3),
- Math.max(scale[1] * 1.1, scale[1] + 3 * ratio)
- ]
- }, 400, 'elasticOut');
- };
- var onNormal = function() {
- if (this.incremental) {
- return;
- }
- this.animateTo({
- scale: scale
- }, 400, 'elasticOut');
- };
symbolPath.on('mouseover', onEmphasis)
.on('mouseout', onNormal)
.on('emphasis', onEmphasis)
@@ -364,6 +342,32 @@ symbolProto._updateCommon = function (data, idx, symbolSize, seriesScope) {
}
};
+function onEmphasis() {
+ // Do not support this hover animation util some scenario required.
+ // Animation can only be supported in hover layer when using `el.incremetal`.
+ if (this.incremental || graphic.isInEmphasis(this)) {
+ return;
+ }
+ var scale = this.__symbolOriginalScale;
+ var ratio = scale[1] / scale[0];
+ this.animateTo({
+ scale: [
+ Math.max(scale[0] * 1.1, scale[0] + 3),
+ Math.max(scale[1] * 1.1, scale[1] + 3 * ratio)
+ ]
+ }, 400, 'elasticOut');
+}
+
+function onNormal() {
+ if (this.incremental || graphic.isInEmphasis(this)) {
+ return;
+ }
+ this.animateTo({
+ scale: this.__symbolOriginalScale
+ }, 400, 'elasticOut');
+}
+
+
/**
* @param {Function} cb
* @param {Object} [opt]
diff --git a/src/util/graphic.js b/src/util/graphic.js
index 46a6f94..bef342a 100644
--- a/src/util/graphic.js
+++ b/src/util/graphic.js
@@ -245,204 +245,234 @@ function liftColor(color) {
return typeof color === 'string' ? colorTool.lift(color, -0.1) : color;
}
-/**
- * @private
- */
function cacheElementStl(el) {
- if (el.__hoverStlDirty) {
- var stroke = el.style.stroke;
- var fill = el.style.fill;
-
- // Create hoverStyle on mouseover
- var hoverStyle = el.__hoverStl;
- hoverStyle.fill = hoverStyle.fill
- || (hasFillOrStroke(fill) ? liftColor(fill) : null);
- hoverStyle.stroke = hoverStyle.stroke
- || (hasFillOrStroke(stroke) ? liftColor(stroke) : null);
-
- var normalStyle = {};
- for (var name in hoverStyle) {
- // See comment in `doSingleEnterHover`.
- if (hoverStyle[name] != null) {
- normalStyle[name] = el.style[name];
- }
- }
+ if (!el.__hoverStlDirty) {
+ return;
+ }
+ el.__hoverStlDirty = false;
- el.__normalStl = normalStyle;
+ var hoverStyle = el.__hoverStl;
+ if (!hoverStyle) {
+ el.__normalStl = null;
+ return;
+ }
+
+ var normalStyle = el.__normalStl = {};
- el.__hoverStlDirty = false;
+ // Create default hoverStyle on mouseover
+ var stroke = el.style.stroke;
+ var fill = el.style.fill;
+ hoverStyle.fill = hoverStyle.fill
+ || (hasFillOrStroke(fill) ? liftColor(fill) : null);
+ hoverStyle.stroke = hoverStyle.stroke
+ || (hasFillOrStroke(stroke) ? liftColor(stroke) : null);
+
+ for (var name in hoverStyle) {
+ // See comment in `doSingleEnterHover`.
+ if (hoverStyle[name] != null) {
+ normalStyle[name] = el.style[name];
+ }
}
}
-/**
- * @private
- */
function doSingleEnterHover(el) {
- if (el.__isHover) {
+ var hoverStl = el.__hoverStl;
+
+ if (!hoverStl || el.__isHover) {
return;
}
- cacheElementStl(el);
-
if (el.useHoverLayer) {
- el.__zr && el.__zr.addHover(el, el.__hoverStl);
+ el.__zr && el.__zr.addHover(el, hoverStl);
}
else {
- var style = el.style;
- var insideRollbackOpt = style.insideRollbackOpt;
-
- // Consider case: only `position: 'top'` is set on emphasis, then text
- // color should be returned to `autoColor`, rather than remain '#fff'.
- // So we should rollback then apply again after style merging.
- insideRollbackOpt && rollbackInsideStyle(style);
-
- // styles can be:
- // {
- // label: {
- // show: false,
- // position: 'outside',
- // fontSize: 18
- // },
- // emphasis: {
- // label: {
- // show: true
- // }
- // }
- // },
- // 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, where
- // only properties that is not `null/undefined` can be set. The disadventage:
- // null/undefined can not be used to remove style any more in `emphasis`.
- style.extendFrom(el.__hoverStl);
-
- // Do not save `insideRollback`.
- if (insideRollbackOpt) {
- applyInsideStyle(style, style.insideOriginalTextPosition, insideRollbackOpt);
-
- // textFill may be rollbacked to null.
- if (style.textFill == null) {
- style.textFill = insideRollbackOpt.autoColor;
- }
- }
-
- el.dirty(false);
- el.z2 += 1;
+ doSingleApplyHoverStyle(el);
}
el.__isHover = true;
}
-/**
- * @inner
- */
+function doSingleApplyHoverStyle(el) {
+ var style = el.style;
+ var hoverStl = el.__hoverStl;
+
+ if (!hoverStl) {
+ return;
+ }
+
+ // Consider case: only `position: 'top'` is set on emphasis, then text
+ // color should be returned to `autoColor`, rather than remain '#fff'.
+ // So we should rollback then apply again after style merging.
+ rollbackDefaultTextStyle(style);
+
+ cacheElementStl(el);
+
+ // styles can be:
+ // {
+ // label: {
+ // show: false,
+ // position: 'outside',
+ // fontSize: 18
+ // },
+ // emphasis: {
+ // label: {
+ // show: true
+ // }
+ // }
+ // },
+ // 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, where
+ // only properties that is not `null/undefined` can be set. The disadventage:
+ // null/undefined can not be used to remove style any more in `emphasis`.
+ style.extendFrom(hoverStl);
+
+ applyDefaultTextStyle(style);
+
+ el.dirty(false);
+ el.z2 += 1;
+}
+
function doSingleLeaveHover(el) {
if (!el.__isHover) {
return;
}
- var normalStl = el.__normalStl;
if (el.useHoverLayer) {
el.__zr && el.__zr.removeHover(el);
}
else {
- // Consider null/undefined value, should use
- // `setStyle` but not `extendFrom(stl, true)`.
- normalStl && el.setStyle(normalStl);
- el.z2 -= 1;
+ doSingleRestoreHoverStyle(el);
}
el.__isHover = false;
}
-/**
- * @inner
- */
-function doEnterHover(el) {
- el.type === 'group'
- ? el.traverse(function (child) {
- if (child.type !== 'group') {
- doSingleEnterHover(child);
- }
- })
- : doSingleEnterHover(el);
+function doSingleRestoreHoverStyle(el) {
+ var style = el.style;
+ var normalStl = el.__normalStl;
+
+ if (normalStl) {
+ rollbackDefaultTextStyle(style);
+
+ // Consider null/undefined value, should use
+ // `setStyle` but not `extendFrom(stl, true)`.
+ el.setStyle(normalStl);
+
+ applyDefaultTextStyle(style);
+
+ el.z2 -= 1;
+ }
}
-function doLeaveHover(el) {
- el.type === 'group'
+function traverseCall(el, method) {
+ el.isGroup
? el.traverse(function (child) {
- if (child.type !== 'group') {
- doSingleLeaveHover(child);
- }
+ !child.isGroup && method(child);
})
- : doSingleLeaveHover(el);
+ : method(el);
}
/**
- * @inner
+ * Set hover style of element.
+ *
+ * @param {module:zrender/Element} el Should not be `zrender/container/Group`.
+ * @param {Object|boolean} [hoverStl] The specified hover style.
+ * If set as `false`, disable the hover style.
+ * Similarly, The `el.hoverStyle` can alse be set
+ * as `false` to disable the hover style.
+ * Otherwise, use the default hover style if not provided.
+ * @param {Object} [opt]
+ * @param {boolean} [opt.hoverSilentOnTouch=false] See `graphic.setAsHoverStyleTrigger`
*/
-function setElementHoverStl(el, hoverStl) {
- // If element has sepcified hoverStyle, then use it instead of given hoverStyle
- // Often used when item group has a label element and it's hoverStyle is different
- el.__hoverStl = el.hoverStyle || hoverStl || {};
+export function setElementHoverStyle(el, hoverStl) {
+ hoverStl = el.__hoverStl = hoverStl !== false && (hoverStl || {});
el.__hoverStlDirty = true;
if (el.__isHover) {
- cacheElementStl(el);
+ if (el.useHoverLayer) {
+ // Update hover style on hover layer.
+ el.__zr && el.__zr.addHover(el, hoverStl);
+ }
+ else {
+ doSingleRestoreHoverStyle(el);
+ doSingleApplyHoverStyle(el);
+ }
}
}
/**
- * @inner
+ * @param {module:zrender/Element} el
+ * @return {boolean}
*/
+export function isInEmphasis(el) {
+ return el && el.__isEmphasis;
+}
+
function onElementMouseOver(e) {
if (this.__hoverSilentOnTouch && e.zrByTouch) {
return;
}
// Only if element is not in emphasis status
- !this.__isEmphasis && doEnterHover(this);
+ !this.__isEmphasis && traverseCall(this, doSingleEnterHover);
}
-/**
- * @inner
- */
function onElementMouseOut(e) {
if (this.__hoverSilentOnTouch && e.zrByTouch) {
return;
}
// Only if element is not in emphasis status
- !this.__isEmphasis && doLeaveHover(this);
+ !this.__isEmphasis && traverseCall(this, doSingleLeaveHover);
}
-/**
- * @inner
- */
function enterEmphasis() {
this.__isEmphasis = true;
- doEnterHover(this);
+ traverseCall(this, doSingleEnterHover);
}
-/**
- * @inner
- */
function leaveEmphasis() {
this.__isEmphasis = false;
- doLeaveHover(this);
+ traverseCall(this, doSingleLeaveHover);
}
/**
* Set hover style of element.
- * This method can be called repeatly without side-effects.
+ *
+ * [Caveat]:
+ * This method can be called repeatly and achieve the same result.
+ *
+ * [Usage]:
+ * Call the method for a "root" element once. Do not call it for each descendants.
+ * If the descendants elemenets of a group has itself hover style different from the
+ * root group, we can simply mount the style on `el.hoverStyle` for them, but should
+ * not call this method for them.
+ *
* @param {module:zrender/Element} el
- * @param {Object} [hoverStyle]
+ * @param {Object|boolean} [hoverStyle] See `graphic.setElementHoverStyle`.
* @param {Object} [opt]
+ * @param {boolean} [opt.hoverSilentOnTouch=false] See `graphic.setAsHoverStyleTrigger`.
+ */
+export function setHoverStyle(el, hoverStyle, opt) {
+ el.isGroup
+ ? el.traverse(function (child) {
+ // If element has sepcified hoverStyle, then use it instead of given hoverStyle
+ // Often used when item group has a label element and it's hoverStyle is different
+ !child.isGroup && setElementHoverStyle(child, child.hoverStyle || hoverStyle);
+ })
+ : setElementHoverStyle(el, el.hoverStyle || hoverStyle);
+
+ setAsHoverStyleTrigger(el, opt);
+}
+
+/**
+ * @param {Object|boolean} [opt] If `false`, means disable trigger.
* @param {boolean} [opt.hoverSilentOnTouch=false]
* In touch device, mouseover event will be trigger on touchstart event
* (see module:zrender/dom/HandlerProxy). By this mechanism, we can
- * conviniently use hoverStyle when tap on touch screen without additional
+ * conveniently use hoverStyle when tap on touch screen without additional
* code for compatibility.
* But if the chart/component has select feature, which usually also use
* hoverStyle, there might be conflict between 'select-highlight' and
@@ -450,24 +480,22 @@ function leaveEmphasis() {
* In this case, hoverSilentOnTouch should be used to disable hover-highlight
* on touch device.
*/
-export function setHoverStyle(el, hoverStyle, opt) {
- el.__hoverSilentOnTouch = opt && opt.hoverSilentOnTouch;
+export function setAsHoverStyleTrigger(el, opt) {
+ var disable = opt === false;
+ el.__hoverSilentOnTouch = opt != null && opt.hoverSilentOnTouch;
- el.type === 'group'
- ? el.traverse(function (child) {
- if (child.type !== 'group') {
- setElementHoverStl(child, hoverStyle);
- }
- })
- : setElementHoverStl(el, hoverStyle);
+ // Simple optimize, since this method might be
+ // called for each elements of a group in some cases.
+ if (!disable || el.__hoverStyleTrigger) {
+ var method = disable ? 'off' : 'on';
- // Duplicated function will be auto-ignored, see Eventful.js.
- el.on('mouseover', onElementMouseOver)
- .on('mouseout', onElementMouseOut);
+ // Duplicated function will be auto-ignored, see Eventful.js.
+ el[method]('mouseover', onElementMouseOver)[method]('mouseout', onElementMouseOut);
+ // Emphasis, normal can be triggered manually
+ el[method]('emphasis', enterEmphasis)[method]('normal', leaveEmphasis);
- // Emphasis, normal can be triggered manually
- el.on('emphasis', enterEmphasis)
- .on('normal', leaveEmphasis);
+ el.__hoverStyleTrigger = !disable;
+ }
}
/**
@@ -704,15 +732,14 @@ function setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, isEm
globalTextStyle.textBorderWidth
);
+ // Save original textPosition, because style.textPosition will be repalced by
+ // real location (like [10, 30]) in zrender.
+ textStyle.insideRawTextPosition = textStyle.textPosition;
+
if (!isEmphasis) {
if (isBlock) {
- // Always set `insideRollback`, for clearing previous.
- var originalTextPosition = textStyle.textPosition;
- textStyle.insideRollback = applyInsideStyle(textStyle, originalTextPosition, opt);
- // Save original textPosition, because style.textPosition will be repalced by
- // real location (like [10, 30]) in zrender.
- textStyle.insideOriginalTextPosition = originalTextPosition;
textStyle.insideRollbackOpt = opt;
+ applyDefaultTextStyle(textStyle);
}
// Set default finally.
@@ -765,12 +792,22 @@ function getAutoColor(color, opt) {
return color !== 'auto' ? color : (opt && opt.autoColor) ? opt.autoColor : null;
}
-function applyInsideStyle(textStyle, textPosition, opt) {
+// When text position is `inside` and `textFill` not specified, we
+// provide a mechanism to auto make text border for better view. But
+// text position changing when hovering or being emphasis should be
+// considered, where the `insideRollback` enables to restore the style.
+function applyDefaultTextStyle(textStyle) {
+ if (textStyle.textFill != null) {
+ return;
+ }
+
+ var opt = textStyle.insideRollbackOpt;
var useInsideStyle = opt.useInsideStyle;
+ var textPosition = textStyle.insideRawTextPosition;
var insideRollback;
+ var autoColor = opt.autoColor;
- if (textStyle.textFill == null
- && useInsideStyle !== false
+ if (useInsideStyle !== false
&& (useInsideStyle === true
|| (opt.isRectText
&& textPosition
@@ -788,20 +825,28 @@ function applyInsideStyle(textStyle, textPosition, opt) {
textStyle.textFill = '#fff';
// Consider text with #fff overflow its container.
if (textStyle.textStroke == null) {
- textStyle.textStroke = opt.autoColor;
+ textStyle.textStroke = autoColor;
textStyle.textStrokeWidth == null && (textStyle.textStrokeWidth = 2);
}
}
+ else if (autoColor != null) {
+ insideRollback = {textFill: null};
+ textStyle.textFill = autoColor;
+ }
- return insideRollback;
+ // Always set `insideRollback`, for clearing previous.
+ if (insideRollback) {
+ textStyle.insideRollback = insideRollback;
+ }
}
-function rollbackInsideStyle(style) {
+function rollbackDefaultTextStyle(style) {
var insideRollback = style.insideRollback;
if (insideRollback) {
style.textFill = insideRollback.textFill;
style.textStroke = insideRollback.textStroke;
style.textStrokeWidth = insideRollback.textStrokeWidth;
+ style.insideRollback = null;
}
}
diff --git a/test/hoverStyle.html b/test/hoverStyle.html
new file mode 100644
index 0000000..e2167f7
--- /dev/null
+++ b/test/hoverStyle.html
@@ -0,0 +1,286 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <script src="lib/esl.js"></script>
+ <script src="lib/config.js"></script>
+ <script src="lib/jquery.min.js"></script>
+ <script src="lib/facePrint.js"></script>
+ <script src="lib/testHelper.js"></script>
+ <link rel="stylesheet" href="lib/reset.css" />
+ </head>
+ <body>
+ <style>
+ .test-title {
+ background: #146402;
+ color: #fff;
+ }
+ </style>
+
+
+ <div id="main0"></div>
+ <div id="main1"></div>
+ <div id="main2"></div>
+ <div id="main3"></div>
+
+
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var option = {
+ tooltip: {},
+ xAxis: {
+ },
+ yAxis: {
+ splitNumber: 2,
+ scale: true
+ },
+ series: [{
+ type: 'scatter',
+ symbolSize: 30,
+ emphasis: {
+ label: {
+ show: true
+ }
+ },
+ data: [[12, 331221], [55, 331221]]
+ }]
+ };
+
+ testHelper.create(echarts, 'main0', {
+ title: [
+ 'normal no label, hover show label inside',
+ 'TEST: hover twice, should be normal'
+ ],
+ option: option,
+ height: 200
+ });
+ });
+ </script>
+
+
+
+
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var option = {
+ tooltip: {},
+ xAxis: {
+ },
+ yAxis: {
+ splitNumber: 2,
+ scale: true
+ },
+ series: [{
+ type: 'scatter',
+ symbolSize: 30,
+ label: {
+ show: true
+ },
+ itemStyle: {
+ color: 'green',
+ opacity: 1
+ },
+ emphasis: {
+ label: {
+ position: 'top'
+ }
+ },
+ data: [[12, 331221], [55, 331221]]
+ }]
+ };
+
+ testHelper.create(echarts, 'main1', {
+ title: [
+ 'normal label inside, hover label outside top.'
+ ],
+ option: option,
+ height: 200
+ });
+ });
+ </script>
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var option = {
+ tooltip: {},
+ xAxis: {
+ },
+ yAxis: {
+ splitNumber: 2,
+ scale: true
+ },
+ series: [{
+ type: 'scatter',
+ symbolSize: 30,
+ label: {
+ show: true
+ },
+ itemStyle: {
+ color: 'green',
+ opacity: 1
+ },
+ emphasis: {
+ itemStyle: {
+ color: 'red'
+ },
+ label: {
+ position: 'top'
+ }
+ },
+ data: [[12, 331221], [55, 331221]]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main2', {
+ title: [
+ 'normal style: green',
+ 'trigger hover by API (red, text top).',
+ 'Test mouse hover and leave, should NOT return to normal.',
+ 'Only click downplay to return normal'
+ ],
+ option: option,
+ height: 200,
+ buttons: [{
+ text: 'highlight dataIndex 0',
+ onclick: function () {
+ chart.dispatchAction({
+ type: 'highlight',
+ seriesIndex: 0,
+ dataIndex: 0
+ });
+ }
+ }, {
+ text: 'downplay dataIndex 0',
+ onclick: function () {
+ chart.dispatchAction({
+ type: 'downplay',
+ seriesIndex: 0,
+ dataIndex: 0
+ });
+ }
+ }]
+ });
+ });
+ </script>
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var option = {
+ tooltip: {},
+ xAxis: {
+ },
+ yAxis: {
+ splitNumber: 2,
+ scale: true
+ },
+ series: [{
+ type: 'scatter',
+ id: 's',
+ symbolSize: 30,
+ label: {
+ show: true
+ },
+ itemStyle: {
+ color: 'green',
+ opacity: 1
+ },
+ emphasis: {
+ itemStyle: {
+ color: 'red'
+ },
+ label: {
+ position: 'top'
+ }
+ },
+ data: [[12, 331221], [55, 331221]]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main3', {
+ title: [
+ 'trigger hover by API (red, text top).',
+ 'setOption to change hoverStyle.'
+ ],
+ option: option,
+ height: 200,
+ buttons: [{
+ text: 'highlight dataIndex 0',
+ onclick: function () {
+ chart.dispatchAction({
+ type: 'highlight',
+ seriesIndex: 0,
+ dataIndex: 0
+ });
+ }
+ }, {
+ text: 'setOption to modify hoverStyle',
+ onclick: function () {
+ chart.setOption({
+ series: [{
+ id: 's',
+ emphasis: {
+ itemStyle: {
+ color: 'yellow'
+ },
+ label: {
+ fontSize: 30
+ }
+ }
+ }]
+ });
+ }
+ }, {
+ text: 'downplay dataIndex 0',
+ onclick: function () {
+ chart.dispatchAction({
+ type: 'downplay',
+ seriesIndex: 0,
+ dataIndex: 0
+ });
+ }
+ }]
+ });
+ });
+ </script>
+
+
+
+
+ </body>
+</html>
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
sushuang@apache.org.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org