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 2019/11/21 19:41:41 UTC
[incubator-echarts] 01/02: fix: fix #11547 and add test cases.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch fix/legend-highlight
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit b9ce268d5af9243c8611cd6ccdc55c209089130f
Author: SHUANG SU <su...@gmail.com>
AuthorDate: Fri Nov 22 03:32:57 2019 +0800
fix: fix #11547 and add test cases.
---
src/component/legend/LegendView.js | 10 +-
test/hoverStyle2.html | 227 ++++++++++++++++++++++++++++++++++
test/runTest/actions/__meta__.json | 1 +
test/runTest/actions/hoverStyle2.json | 1 +
4 files changed, 234 insertions(+), 5 deletions(-)
diff --git a/src/component/legend/LegendView.js b/src/component/legend/LegendView.js
index 9e6806b..ecb379e 100644
--- a/src/component/legend/LegendView.js
+++ b/src/component/legend/LegendView.js
@@ -238,7 +238,7 @@ export default echarts.extendComponentView({
);
// FIXME: consider different series has items with the same name.
- itemGroup.on('click', curry(dispatchSelectAction, name, null, api, excludeSeriesId))
+ itemGroup.on('click', curry(dispatchSelectAction, null, name, api, excludeSeriesId))
// Should not specify the series name, consider legend controls
// more than one pie series.
.on('mouseover', curry(dispatchHighlightAction, null, name, api, excludeSeriesId))
@@ -518,15 +518,15 @@ function setSymbolStyle(symbol, symbolType, legendModelItemStyle, borderColor, i
return symbol.setStyle(itemStyle);
}
-function dispatchSelectAction(name, dataName, api, excludeSeriesId) {
+function dispatchSelectAction(seriesName, dataName, api, excludeSeriesId) {
// downplay before unselect
- dispatchDownplayAction(name, dataName, api, excludeSeriesId);
+ dispatchDownplayAction(seriesName, dataName, api, excludeSeriesId);
api.dispatchAction({
type: 'legendToggleSelect',
- name: name
+ name: seriesName != null ? seriesName : dataName
});
// highlight after select
- dispatchHighlightAction(name, dataName, api, excludeSeriesId);
+ dispatchHighlightAction(seriesName, dataName, api, excludeSeriesId);
}
function dispatchHighlightAction(seriesName, dataName, api, excludeSeriesId) {
diff --git a/test/hoverStyle2.html b/test/hoverStyle2.html
new file mode 100644
index 0000000..945d3e6
--- /dev/null
+++ b/test/hoverStyle2.html
@@ -0,0 +1,227 @@
+<!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>
+ <!-- <script src="ut/lib/canteen.js"></script> -->
+ <link rel="stylesheet" href="lib/reset.css" />
+ </head>
+ <body>
+ <style>
+ .test-title {
+ background: #146402;
+ color: #fff;
+ }
+ #info {
+ position: fixed;
+ left: 0;
+ top: 0;
+ background: #333;
+ color: #fff;
+ padding: 2px 5px;
+ z-index: 9999;
+ box-shadow: 0 0 2px #333;
+ }
+ </style>
+
+ <br>
+ <br>
+ <br>
+
+ <div id="info"></div>
+
+ <div id="main0"></div>
+
+
+
+
+
+ <script>
+ var USE_HOVER_LAYER_KEY = '__EC_TEST_USE_HOVER_LAYER_KEY___';
+
+ var useHoverLayer = getUseHoverLayer();
+ var hoverLayerThreshold = useHoverLayer ? 0 : null;
+ var infoEl = document.getElementById('info');
+ genInfo();
+
+ function setUseHoverLayer(useHoverLayer) {
+ window.localStorage.setItem(USE_HOVER_LAYER_KEY, useHoverLayer ? 'true' : '');
+ }
+ function getUseHoverLayer() {
+ return !!window.localStorage.getItem(USE_HOVER_LAYER_KEY);
+ }
+
+ function genInfo(zrRefreshTimestamp) {
+ infoEl.innerHTML = [
+ '<span style="color:yellow">'
+ + (useHoverLayer ? 'Using HoverLayer' : 'NOT using HoverLayer')
+ + '</span>',
+ 'hoverLayerThreshold: ' + hoverLayerThreshold,
+ 'zr refresh base layer at: <span style="color:yellow">' + (zrRefreshTimestamp || null) + '</span>'
+ ].join('<br>');
+ }
+
+ function genHoverLayerBtns() {
+ return [{
+ text: 'NOT use hoverLayer',
+ onclick: function () {
+ setUseHoverLayer(false);
+ location.reload();
+ }
+ }, {
+ text: 'Use hoverLayer',
+ onclick: function () {
+ setUseHoverLayer(true);
+ location.reload();
+ }
+ }]
+ }
+
+ var originalCreate = testHelper.create;
+ testHelper.create = function (echarts, dom, opt) {
+ if (opt.option.hoverLayerThreshold === void 0) {
+ throw new Error('"hoverLayerThreshold" should be set');
+ }
+
+ var buttons = opt.buttons || [];
+ opt.buttons = buttons = genHoverLayerBtns().concat(buttons);
+ var chart = originalCreate.call(this, echarts, dom, opt);
+
+ if (chart) {
+ var zr = chart.getZr();
+ var originalRefreshImmediately = zr.refreshImmediately;
+ zr.refreshImmediately = function () {
+ var result = originalRefreshImmediately.apply(this, arguments);
+ // Make sure refreshImmediately is not called when `useHoverLayer`.
+ genInfo(+new Date());
+ return result;
+ };
+ }
+
+ return chart;
+ }
+ </script>
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var option;
+
+ option = {
+ hoverLayerThreshold: hoverLayerThreshold,
+ xAxis: {},
+ yAxis: {},
+ grid: {
+ right: '50%'
+ },
+ legend: {
+ selector: true
+ },
+ series: [{
+ type: 'line',
+ name: 'b',
+ symbol: 'circle',
+ symbolSize: 20,
+ emphasis: {
+ itemStyle: {
+ color: 'blue'
+ }
+ },
+ data: [[11, 242], [23, 442]]
+ }, {
+ type: 'line',
+ name: 'c',
+ symbol: 'circle',
+ symbolSize: 20,
+ emphasis: {
+ itemStyle: {
+ color: 'blue'
+ }
+ },
+ data: [[11, 222], [23, 244]]
+ }, {
+ type: 'scatter',
+ name: 'd',
+ symbol: 'rect',
+ symbolSize: 20,
+ emphasis: {
+ itemStyle: {
+ color: 'blue'
+ }
+ },
+ data: [[11, 322], [23, 344]]
+ }, {
+ type: 'pie',
+ center: ['75%', '50%'],
+ data: [{
+ name: 'pieA', value: 50,
+ }, {
+ name: 'pieB', value: 30
+ }]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ '(A) Click legend "b" and then click "反选". ',
+ ' The displayed symbol should in **normal style**.',
+ '(B) Click legend "b" to hide and then click the button to toggle legend item "b".',
+ ' The displayed symbol should in **normal style**.',
+ '(C) Click legend "b" and click again',
+ ' The displayed symbol should in **emphasis style**.',
+ '(D) Click legend "pieA" and click again',
+ ' The displayed symbol should in **emphasis style**.',
+ ],
+ height: 300,
+ option: option,
+ buttons: [{
+ text: 'toggle legend item "b"',
+ onclick: function () {
+ chart.dispatchAction({
+ type: 'legendToggleSelect',
+ name: 'b'
+ });
+ }
+ }]
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ });
+ </script>
+
+
+ </body>
+</html>
+
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index d9f3b07..57b7d9b 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -81,6 +81,7 @@
"heatmap-map": 1,
"homepage3": 1,
"hoverStyle": 12,
+ "hoverStyle2": 1,
"label-position": 1,
"largeLine-tooltip": 1,
"legend": 6,
diff --git a/test/runTest/actions/hoverStyle2.json b/test/runTest/actions/hoverStyle2.json
new file mode 100644
index 0000000..225e49e
--- /dev/null
+++ b/test/runTest/actions/hoverStyle2.json
@@ -0,0 +1 @@
+[{"name":"Action 1","ops":[{"type":"mousemove","time":71,"x":535,"y":220},{"type":"mousemove","time":289,"x":504,"y":223},{"type":"mousemove","time":532,"x":506,"y":221},{"type":"mousemove","time":591,"x":505,"y":221},{"type":"mousemove","time":818,"x":246,"y":245},{"type":"mousemove","time":1035,"x":165,"y":246},{"type":"mousemove","time":1241,"x":112,"y":268},{"type":"mousemove","time":1472,"x":111,"y":268},{"type":"mousemove","time":1608,"x":108,"y":268},{"type":"mousemove","time":182 [...]
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org