| <!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> |
| |
