| <!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/simpleRequire.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; | |
| } | |
| #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="mainb1"></div> | |
| <div id="mainb2"></div> | |
| <div id="mainb3"></div> | |
| <div id="mainb4"></div> | |
| <div id="main0"></div> | |
| <div id="main1"></div> | |
| <div id="main2"></div> | |
| <div id="main3"></div> | |
| <div id="main4"></div> | |
| <div id="main5"></div> | |
| <div id="main6"></div> | |
| <div id="main7"></div> | |
| <div id="main8"></div> | |
| <div id="maina1"></div> | |
| <div id="maina2"></div> | |
| <div id="maina3"></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); | |
| typeof __VRT_RELOAD__ !== 'undefined' ? __VRT_RELOAD__() : location.reload(); | |
| } | |
| }, { | |
| text: 'Use hoverLayer', | |
| onclick: function () { | |
| setUseHoverLayer(true); | |
| typeof __VRT_RELOAD__ !== 'undefined' ? __VRT_RELOAD__() : 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> | |
| var option; | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var option = { | |
| hoverLayerThreshold: hoverLayerThreshold, | |
| xAxis: { | |
| axisLine: {show: false}, | |
| axisTick: {show: false}, | |
| splitLine: {show: false}, | |
| axisLabel: {show: false} | |
| }, | |
| yAxis: { | |
| axisLine: {show: false}, | |
| axisTick: {show: false}, | |
| splitLine: {show: false}, | |
| axisLabel: {show: false} | |
| }, | |
| series: { | |
| type: 'line', | |
| markPoint: { | |
| data: [{ | |
| type: 'max', | |
| name: 'a' | |
| }] | |
| }, | |
| data: [[12,34]] | |
| } | |
| }; | |
| var chart = testHelper.create(echarts, 'maina1', { | |
| option: option, | |
| height: 150, | |
| title: [ | |
| 'Only a pin displayed', | |
| 'The text of the "pin" should be **inside**', | |
| 'Hover "pin", should be normal' | |
| ] | |
| }); | |
| }); | |
| </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' | |
| } | |
| }, | |
| 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 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, 'maina3', { | |
| 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: { | |
| }, | |
| grid: { | |
| right: 120 | |
| }, | |
| visualMap: { | |
| min: 100, | |
| max: 800, | |
| top: 10, | |
| right: 10, | |
| splitNumber: 3, | |
| type: 'piecewise', | |
| demension: 1, | |
| hoverLink: true, | |
| inRange: { | |
| color: ['blue', 'red'] | |
| }, | |
| outOfRange: { | |
| color: 'black' | |
| } | |
| }, | |
| series: [{ | |
| type: 'scatter', | |
| symbolSize: 30, | |
| data: [ | |
| { | |
| value: [12, 331], | |
| label: { | |
| show: true, | |
| formatter: 'position top\neven hoverred', | |
| fontSize: 20, | |
| position: 'top' | |
| } | |
| }, | |
| [55, 131], [55, 531] | |
| ] | |
| }, { | |
| type: 'scatter', | |
| symbol: 'rect', | |
| symbolSize: 40, | |
| label: { | |
| show: true, | |
| formatter: 'label inside\nhover red\n{c}' | |
| }, | |
| emphasis: { | |
| label: { | |
| color: 'red' | |
| } | |
| }, | |
| data: [ | |
| [112, 331], [115, 131], [165, 531] | |
| ] | |
| }, { | |
| type: 'scatter', | |
| symbol: 'triangle', | |
| symbolSize: 40, | |
| label: { | |
| show: true, | |
| formatter: 'label inside\n{c}', | |
| silent: true | |
| }, | |
| emphasis: { | |
| label: { | |
| position: 'top', | |
| formatter: 'hover become top\n{c}' | |
| } | |
| }, | |
| data: [ | |
| [212, 331], [215, 131], [265, 531] | |
| ] | |
| }, { | |
| type: 'scatter', | |
| symbol: 'rect', | |
| symbolSize: 40, | |
| label: { | |
| show: true, | |
| formatter: 'label stroke orange hover blue\n{c}', | |
| textBorderWidth: 3, | |
| textBorderColor: 'orange' | |
| }, | |
| emphasis: { | |
| label: { | |
| formatter: 'hover become stroke blue', | |
| textBorderColor: 'blue' | |
| } | |
| }, | |
| data: [ | |
| [312, 51] | |
| ] | |
| }, { | |
| type: 'custom', | |
| renderItem: function (params, api) { | |
| var coords = api.coord([312, 351]); | |
| return { | |
| type: 'rect', | |
| shape: { | |
| x: coords[0], | |
| y: coords[1], | |
| width: 50, | |
| height: 50 | |
| }, | |
| // check api.style | |
| style: api.style({ | |
| text: 'label stroke orange hover blue', | |
| textStrokeWidth: 2, | |
| textStroke: 'orange' | |
| }), | |
| styleEmphasis: api.styleEmphasis({ | |
| textStroke: 'blue' | |
| }) | |
| }; | |
| }, | |
| data: [ | |
| [312, 151] | |
| ] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'mainb1', { | |
| title: [ | |
| 'visualMap should be normal (and hoverLink should **scale circles**)', | |
| '(inRange: has color, outOfRange: "black")', | |
| 'Click visualMap when hoverlink, circle color should be changed, but **keep scaled**.', | |
| 'Click button highlight dataIndex 0, only "middle blue" highlighted', | |
| 'Then hover **blue** visualMap, all blue highlighted, and then unhover, "middle blue" should keep highlighted' | |
| ], | |
| option: option, | |
| height: 300, | |
| buttons: [{ | |
| text: 'highlight dataIndex 0', | |
| onclick: function () { | |
| chart.dispatchAction({ | |
| type: 'highlight', | |
| dataIndex: 0 | |
| }); | |
| } | |
| }, { | |
| text: 'downplay dataIndex 0', | |
| onclick: function () { | |
| chart.dispatchAction({ | |
| type: 'downplay', | |
| dataIndex: 0 | |
| }); | |
| } | |
| }] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| hoverLayerThreshold: hoverLayerThreshold, | |
| xAxis: { | |
| }, | |
| yAxis: { | |
| }, | |
| series: [{ | |
| type: 'scatter', | |
| symbolSize: 30, | |
| data: [ | |
| [12, 131], | |
| [55, 431], | |
| [55, 331] | |
| ] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'mainb2', { | |
| title: [ | |
| 'setOption onclick and hover animation should be normal:', | |
| 'click any symbol, all symbols should become blue' | |
| ], | |
| option: option, | |
| height: 200 | |
| }); | |
| chart && chart.on('click', function () { | |
| chart.setOption({ | |
| color: ['blue'] | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| hoverLayerThreshold: hoverLayerThreshold, | |
| xAxis: { | |
| }, | |
| yAxis: { | |
| }, | |
| series: [{ | |
| type: 'scatter', | |
| symbolSize: 100, | |
| data: [ | |
| {value: [0, 0], itemStyle: {color: 'blue'}}, | |
| {value: [0, 1], itemStyle: {color: 'red'}} | |
| ] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'mainb3', { | |
| title: [ | |
| 'hover the blue symbol, the z2 can be top', | |
| 'unhover, **z2 should be back** to bottom' | |
| ], | |
| option: option, | |
| height: 200 | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| hoverLayerThreshold: hoverLayerThreshold, | |
| series: [{ | |
| type: 'graph', | |
| symbolSize: 20, | |
| focusNodeAdjacency: true, | |
| data: [ | |
| {value: 100, name: 'aa', x: 100, y: 200}, | |
| {value: 150, name: 'bb', x: 450, y: 300}, | |
| {value: 200, name: 'cc', x: 200, y: 100}, | |
| {value: 250, name: 'dd', x: 450, y: 250, | |
| emphasis: { | |
| itemStyle: { | |
| color: 'blue' | |
| } | |
| } | |
| } | |
| ], | |
| links: [ | |
| {source: 'aa', target: 'bb'}, | |
| {source: 'aa', target: 'dd'}, | |
| {source: 'cc', target: 'bb'} | |
| ], | |
| lineStyle: { | |
| color: 'green', | |
| type: 'dashed', // [4, 6], | |
| width: 3 | |
| }, | |
| emphasis: { | |
| lineStyle: { | |
| color: 'orange', | |
| type: 'solid', | |
| width: 8 | |
| } | |
| } | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'mainb4', { | |
| title: [ | |
| 'normal style is **line: green dashed width 3, node: default color**,', | |
| 'should become **line: orange solid width 8, node: only "dd" blue** when hovered' | |
| ], | |
| option: option, | |
| height: 200 | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| hoverLayerThreshold: hoverLayerThreshold, | |
| 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', | |
| 'zrBaseLayer should not be refreshed if NOT using hoverLayer' | |
| ], | |
| option: option, | |
| height: 200 | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| hoverLayerThreshold: hoverLayerThreshold, | |
| tooltip: {}, | |
| xAxis: { | |
| }, | |
| yAxis: { | |
| splitNumber: 2, | |
| scale: true | |
| }, | |
| series: [{ | |
| type: 'scatter', | |
| symbolSize: 30, | |
| // silent: true, | |
| label: { | |
| show: true, | |
| // silent: true, | |
| position: 'top' | |
| }, | |
| itemStyle: { | |
| color: 'green', | |
| opacity: 1 | |
| }, | |
| emphasis: { | |
| label: { | |
| position: 'top' | |
| } | |
| }, | |
| data: [[12, 3312212121], [20, 3311212221], [55, 3311212221]] | |
| }] | |
| }; | |
| testHelper.create(echarts, 'main1', { | |
| title: [ | |
| 'normal label inside, hover label outside top.', | |
| 'lifted color should be able to restore after hover twice.' | |
| ], | |
| option: option, | |
| height: 200 | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| hoverLayerThreshold: hoverLayerThreshold, | |
| tooltip: {}, | |
| xAxis: { | |
| }, | |
| yAxis: { | |
| splitNumber: 2, | |
| scale: true | |
| }, | |
| series: [{ | |
| type: 'scatter', | |
| symbolSize: 30, | |
| label: { | |
| show: true, | |
| silent: 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 = { | |
| hoverLayerThreshold: hoverLayerThreshold, | |
| tooltip: {}, | |
| xAxis: { | |
| }, | |
| yAxis: { | |
| splitNumber: 2, | |
| scale: true | |
| }, | |
| series: [{ | |
| type: 'scatter', | |
| id: 's', | |
| symbolSize: 30, | |
| label: { | |
| show: true, | |
| silent: 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 yellow', | |
| onclick: function () { | |
| chart.setOption({ | |
| series: [{ | |
| id: 's', | |
| emphasis: { | |
| itemStyle: { | |
| color: 'yellow' | |
| }, | |
| label: { | |
| fontSize: 30 | |
| } | |
| } | |
| }] | |
| }); | |
| } | |
| }, { | |
| text: 'setOption to modify hoverStyle blue', | |
| onclick: function () { | |
| chart.setOption({ | |
| series: [{ | |
| id: 's', | |
| emphasis: { | |
| itemStyle: { | |
| color: 'blue' | |
| }, | |
| label: { | |
| fontSize: 50 | |
| } | |
| } | |
| }] | |
| }); | |
| } | |
| }, { | |
| text: 'downplay dataIndex 0', | |
| onclick: function () { | |
| chart.dispatchAction({ | |
| type: 'downplay', | |
| seriesIndex: 0, | |
| dataIndex: 0 | |
| }); | |
| } | |
| }] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| hoverLayerThreshold: hoverLayerThreshold, | |
| tooltip: {}, | |
| xAxis: { | |
| }, | |
| yAxis: { | |
| splitNumber: 2, | |
| scale: true | |
| }, | |
| series: [{ | |
| type: 'custom', | |
| renderItem: function (params, api) { | |
| return { | |
| type: 'group', | |
| children: [{ | |
| type: 'rect', | |
| shape: {x: 100, y: 30, width: 100, height: 50}, | |
| style: {fill: '#333'} | |
| }, { | |
| type: 'rect', | |
| shape: {x: 130, y: 50, width: 100, height: 50}, | |
| style: {fill: '#555'} | |
| }, { | |
| type: 'rect', | |
| shape: {x: 160, y: 70, width: 100, height: 50}, | |
| style: {fill: '#777'} | |
| }] | |
| }; | |
| }, | |
| data: [[12, 331221], [55, 331221]] | |
| }] | |
| }; | |
| testHelper.create(echarts, 'main4', { | |
| title: [ | |
| 'custom series: all highlighted when hover, keep z correct' | |
| ], | |
| option: option, | |
| height: 200 | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| hoverLayerThreshold: hoverLayerThreshold, | |
| tooltip: {}, | |
| xAxis: { | |
| }, | |
| yAxis: { | |
| splitNumber: 2, | |
| scale: true | |
| }, | |
| series: [{ | |
| type: 'line', | |
| symbolSize: 20, | |
| data: [[21, 22], [44, 11]] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main5', { | |
| title: [ | |
| 'Test default symbol hover style (scale) (Only test **Not use hoverLayer**)', | |
| 'trigger hover by API: **should scaled**.', | |
| '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 = { | |
| hoverLayerThreshold: hoverLayerThreshold, | |
| tooltip: {}, | |
| series: [{ | |
| type: 'pie', | |
| data: [ | |
| {value: 12, name: 'Click this sector:\nit keep color-lifted and scaled'}, | |
| {value: 15, name: 'zxcv'}, | |
| {value: 17, name: 'Click this sector:\nit becomes yellow, keep color-lifted and scaled'} | |
| ] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main6', { | |
| title: [ | |
| 'Pie **hightlight priority** of API and mouse:', | |
| 'Hover on sector, **should scaled and color lifted**.', | |
| 'trigger hover by API: **should scaled and color-lifted**.', | |
| 'Test mouse hover and leave, should NOT return to normal.', | |
| 'Only click downplay to return normal', | |
| 'Click the top-right sector, it **keep scaled and color-lifted**', | |
| '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 | |
| }); | |
| } | |
| }] | |
| }); | |
| chart && chart.on('click', function (e) { | |
| if (e.dataIndex === 0) { | |
| chart.dispatchAction({ | |
| type: 'highlight', | |
| seriesIndex: 0, | |
| dataIndex: 0 | |
| }); | |
| } | |
| else if (e.dataIndex === 2) { | |
| option.series[0].data[2].itemStyle = {color: 'yellow'}; | |
| chart.setOption(option); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| hoverLayerThreshold: hoverLayerThreshold, | |
| tooltip: {}, | |
| series: [{ | |
| type: 'funnel', | |
| label: { | |
| show: false | |
| }, | |
| emphasis: { | |
| label: {show: true} | |
| }, | |
| data: [ | |
| {value: 12, name: 'poiu'}, | |
| {value: 15, name: 'zxcv'}, | |
| {value: 17, name: 'casdf'} | |
| ] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main7', { | |
| title: [ | |
| 'Click button highlight dataIndex 0 show label', | |
| 'Then hover and unhover the sector, highlight state will not changed' | |
| ], | |
| 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', 'data/map/js/china'], function (echarts) { | |
| var option = { | |
| hoverLayerThreshold: hoverLayerThreshold, | |
| tooltip: {}, | |
| legend: {}, | |
| geo: [{ | |
| type: 'map', | |
| map: 'china', | |
| roam: true, | |
| scaleLimit: { | |
| min: 1.5, | |
| max: 10 | |
| }, | |
| selectedMode: 'multiple', | |
| // emphasis: { | |
| // itemStyle: { | |
| // color: 'none', | |
| // borderWidth: 2 | |
| // } | |
| // }, | |
| select: { | |
| itemStyle: { | |
| color: 'green' | |
| } | |
| } | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main8', { | |
| title: [ | |
| 'Click button toggleSelected 内蒙古', | |
| 'Then hover and unhover the region, highlight state will not changed' | |
| ], | |
| option: option, | |
| height: 400, | |
| buttons: [{ | |
| text: 'toggleSelected 内蒙古', | |
| onclick: function () { | |
| chart.dispatchAction({ | |
| type: 'geoToggleSelect', | |
| geoIndex: 0, | |
| name: '内蒙古' | |
| }); | |
| } | |
| }] | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |