| <!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> | |
| <!-- <script src="ut/lib/canteen.js"></script> --> | |
| <link rel="stylesheet" href="lib/reset.css" /> | |
| </head> | |
| <body> | |
| <style> | |
| </style> | |
| <div id="main_geo_svg_organ"></div> | |
| <div id="main_geo_svg_regions"></div> | |
| <div id="main_geo_svg_line_path"></div> | |
| <div id="main_geo_svg_heatmap"></div> | |
| <div id="main_geo_svg_building"></div> | |
| <div id="main_geo_svg_traffic"></div> | |
| <script> | |
| function listenAndPrintEvent(chart) { | |
| if (!chart) { | |
| return; | |
| } | |
| const out = { | |
| }; | |
| chart.on('geoselectchanged', function (params) { | |
| out.geoselectechanged = { | |
| allSelected: params.allSelected | |
| }; | |
| console.log('geoselectechanged', params); | |
| chart.__testHelper.updateInfo(out, 'event'); | |
| }); | |
| chart.on('selectchanged', function (params) { | |
| out.selectechanged = { | |
| selected: params.selected | |
| }; | |
| console.log('selectechanged', params); | |
| chart.__testHelper.updateInfo(out, 'event'); | |
| }); | |
| chart.on('click', function (params) { | |
| out.click = { | |
| componentIndex: params.componentIndex, | |
| componentType: params.componentType, | |
| geoIndex: params.geoIndex, | |
| name: params.name | |
| }; | |
| console.log('click', params); | |
| chart.__testHelper.updateInfo(out, 'event'); | |
| }); | |
| } | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| 'data/svg/Veins_Medical_Diagram_clip_art.svg' | |
| ], function (echarts, svg) { | |
| var option; | |
| echarts.registerMap('seatmap', { | |
| svg: svg | |
| }); | |
| option = { | |
| tooltip: { | |
| }, | |
| geo: { | |
| left: 10, | |
| right: '50%', | |
| map: 'seatmap', | |
| roam: true, | |
| selectedMode: 'multiple', | |
| // height: 100, | |
| // zoom: 1.5 | |
| emphasis: { | |
| focus: 'self', | |
| itemStyle: { | |
| color: null | |
| }, | |
| label: { | |
| position: 'bottom', | |
| distance: 20, | |
| textBorderColor: '#fff', | |
| textBorderWidth: 2 | |
| } | |
| }, | |
| blur: { | |
| }, | |
| select: { | |
| itemStyle: { | |
| color: '#b50205' | |
| }, | |
| label: { | |
| show: false, | |
| textBorderColor: '#fff', | |
| textBorderWidth: 2 | |
| } | |
| } | |
| }, | |
| grid: { | |
| left: '60%' | |
| }, | |
| xAxis: { | |
| splitLine: { | |
| show: false | |
| } | |
| }, | |
| yAxis: { | |
| data: ['heart', 'large-intestine', 'small-intestine', 'spleen', 'kidney', 'lung', 'liver'] | |
| }, | |
| series: [{ | |
| type: 'bar', | |
| emphasis: { | |
| focus: 'self' | |
| }, | |
| data: [121, 321, 141, 52, 198, 289, 139] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main_geo_svg_organ', { | |
| title: [ | |
| 'pure geo component with svg resource', | |
| 'click seat: check **allSelected** correct.' | |
| ], | |
| option: option, | |
| info: {}, | |
| infoKey: 'event', | |
| height: 500 | |
| // buttons: [{text: 'btn-txt', onclick: function () {}}], | |
| // recordCanvas: true, | |
| }); | |
| listenAndPrintEvent(chart); | |
| if (chart) { | |
| chart.on('mouseover', { seriesIndex: 0 }, function (event) { | |
| chart.dispatchAction({ | |
| type: 'highlight', | |
| geoIndex: 0, | |
| name: event.name | |
| }); | |
| }); | |
| chart.on('mouseout', { seriesIndex: 0 }, function (event) { | |
| chart.dispatchAction({ | |
| type: 'downplay', | |
| geoIndex: 0, | |
| name: event.name | |
| }); | |
| }); | |
| // chart.on('mouseover', { geoIndex: 0 }, function (event) { | |
| // chart.dispatchAction({ | |
| // type: 'highlight', | |
| // seriesIndex: 0, | |
| // name: event.name | |
| // }); | |
| // }); | |
| // chart.on('mouseout', { geoIndex: 0 }, function (event) { | |
| // chart.dispatchAction({ | |
| // type: 'downplay', | |
| // seriesIndex: 0, | |
| // name: event.name | |
| // }); | |
| // }); | |
| } | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| 'data/svg/Sicily_prehellenic_topographic_map.svg' | |
| ], function (echarts, svg) { | |
| var option; | |
| echarts.registerMap('sicily', { | |
| svg: svg | |
| }); | |
| option = { | |
| tooltip: { | |
| }, | |
| geo: [{ | |
| map: 'sicily', | |
| roam: true, | |
| selectedMode: 'multiple', | |
| itemStyle: { | |
| color: null | |
| }, | |
| tooltip: { | |
| show: true, | |
| confine: true, | |
| formatter: function (params) { | |
| return [ | |
| 'This is the introduction:', | |
| 'xxxxxxxxxxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxxxxxxxxxx' | |
| ].join('<br>'); | |
| } | |
| }, | |
| emphasis: { | |
| label: { | |
| show: false | |
| } | |
| }, | |
| select: { | |
| itemStyle: { | |
| color: '#b50205' | |
| }, | |
| label: { | |
| show: false | |
| } | |
| }, | |
| regions: [{ | |
| name: 'Sikeloi', | |
| tooltip: { | |
| formatter: [ | |
| 'Sikeloi:', | |
| 'xxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxx', | |
| ].join('<br>'), | |
| textStyle: { color: '#555' }, | |
| backgroundColor: '#ccc' | |
| } | |
| }, { | |
| name: 'Sikanoi', | |
| tooltip: { | |
| formatter: [ | |
| 'Sikanoi', | |
| 'xxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxx', | |
| ].join('<br>'), | |
| textStyle: { color: '#555' }, | |
| backgroundColor: '#ccc' | |
| } | |
| }, { | |
| name: 'Elymoi', | |
| tooltip: { | |
| formatter: [ | |
| 'Elymoi', | |
| 'xxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxx', | |
| ].join('<br>'), | |
| textStyle: { color: '#555' }, | |
| backgroundColor: '#ccc' | |
| } | |
| }], | |
| z: 0 | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main_geo_svg_regions', { | |
| title: [ | |
| 'symbol and label use the same name in SVG.', | |
| 'Hover each symbol and text, tooltip should be displayed.', | |
| 'Hover the three area, tooltip should be displayed.', | |
| 'Click, check **selected**.' | |
| ], | |
| option: option, | |
| info: {}, | |
| infoKey: 'event', | |
| height: 500 | |
| }); | |
| listenAndPrintEvent(chart); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| 'data/svg/Map_of_Iceland.svg' | |
| ], function (echarts, svg) { | |
| var option; | |
| echarts.registerMap('Map_of_Iceland', { | |
| svg: svg | |
| }); | |
| option = { | |
| tooltip: { | |
| alwaysShowContent: true, | |
| enterable: true, | |
| extraCssText: 'user-select: text' | |
| }, | |
| geo: [{ | |
| map: 'Map_of_Iceland', | |
| roam: true, | |
| selectedMode: 'single', | |
| tooltip: { | |
| show: true, | |
| // confine: true | |
| }, | |
| label: { | |
| fontSize: 20, | |
| textBorderColor: '#fff', | |
| textBorderWidth: 2 | |
| }, | |
| emphasis: { | |
| itemStyle: { | |
| color: null, | |
| borderColor: '#b50805', | |
| borderWidth: 5 | |
| } | |
| }, | |
| select: { | |
| itemStyle: { | |
| color: null, | |
| borderColor: '#b50205', | |
| borderWidth: 5 | |
| } | |
| }, | |
| regions: [{ | |
| name: 'trip1', | |
| label: { | |
| formatter: 'Western Trip' | |
| }, | |
| tooltip: { | |
| position: 'right', | |
| formatter: [ | |
| 'Western Trip:', | |
| 'xxxxxxxxxxxxxxxxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxxxxxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxxxxxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxxxxxxxxxxxxxxxx', | |
| 'xxxxxxxxxxxxxxxxxxxxxxxxxxx' | |
| ].join('<br>') | |
| } | |
| }, { | |
| name: 'trip2', | |
| label: { | |
| formatter: 'Eastern Trip' | |
| }, | |
| tooltip: { | |
| position: 'left', | |
| formatter: [ | |
| 'Western Trip:', | |
| 'xxxxxxxxxxxx', | |
| 'xxxxxxxxxxxx', | |
| 'xxxxxxxxxxxx', | |
| 'xxxxxxxxxxxx', | |
| 'xxxxxxxxxxxx', | |
| 'xxxxxxxxxxxx', | |
| 'xxxxxxxxxxxx', | |
| 'xxxxxxxxxxxx', | |
| 'xxxxxxxxxxxx', | |
| 'xxxxxxxxxxxx', | |
| 'xxxxxxxxxxxx' | |
| ].join('<br>') | |
| } | |
| }] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main_geo_svg_line_path', { | |
| title: [ | |
| 'Select some route in SVG via API.', | |
| 'Some route should be highlighted (check selectedMode **single**).', | |
| 'label should be displayed.' | |
| ], | |
| option: option, | |
| info: {}, | |
| infoKey: 'event', | |
| height: 500, | |
| buttons: [{ | |
| text: 'highlight trip1', | |
| onclick: function () { | |
| chart.dispatchAction({ | |
| type: 'geoSelect', | |
| geoIndex: 0, | |
| name: 'trip1' | |
| }); | |
| chart.dispatchAction({ | |
| type: 'showTip', | |
| geoIndex: 0, | |
| name: 'trip1' | |
| }); | |
| } | |
| }, { | |
| text: 'highlight trip2', | |
| onclick: function () { | |
| chart.dispatchAction({ | |
| type: 'geoSelect', | |
| geoIndex: 0, | |
| name: 'trip2' | |
| }); | |
| chart.dispatchAction({ | |
| type: 'showTip', | |
| geoIndex: 0, | |
| name: 'trip2' | |
| }); | |
| } | |
| }] | |
| }); | |
| listenAndPrintEvent(chart); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| 'data/svg/Beef_cuts_France.svg' | |
| ], function (echarts, svg) { | |
| var option; | |
| echarts.registerMap('Beef_cuts_France', { | |
| svg: svg | |
| }); | |
| // seminar_room | |
| // reading_room | |
| option = { | |
| tooltip: { | |
| }, | |
| visualMap: { | |
| top: 'middle', | |
| left: 20, | |
| min: 5, | |
| max: 100, | |
| text: ['Price'], | |
| realtime: true, | |
| calculable: true, | |
| inRange: { | |
| color: ['#dbac00', '#db6e00', '#cf0000'] | |
| } | |
| }, | |
| series: [{ | |
| name: 'French Beef Cuts', | |
| type: 'map', | |
| map: 'Beef_cuts_France', | |
| roam: true, | |
| emphasis: { | |
| label: { | |
| show: false | |
| } | |
| }, | |
| data: [ | |
| { name: 'Queue', value: 15 }, | |
| { name: 'Langue', value: 35 }, | |
| { name: 'Plat de joue', value: 15 }, | |
| { name: 'Gros bout de poitrine', value: 25 }, | |
| { name: 'Jumeau à pot-au-feu', value: 45 }, | |
| { name: 'Onglet', value: 85 }, | |
| { name: 'Plat de tranche', value: 25 }, | |
| { name: 'Araignée', value: 15 }, | |
| { name: 'Gîte à la noix', value: 55 }, | |
| { name: 'Bavette d\'aloyau', value: 25 }, | |
| { name: 'Tende de tranche', value: 65 }, | |
| { name: 'Rond de gîte', value: 45 }, | |
| { name: 'Bavettede de flanchet', value: 85 }, | |
| { name: 'Flanchet', value: 35 }, | |
| { name: 'Hampe', value: 75 }, | |
| { name: 'Plat de côtes', value: 65 }, | |
| { name: 'Tendron Milieu de poitrine', value: 65 }, | |
| { name: 'Macreuse à pot-au-feu', value: 85 }, | |
| { name: 'Rumsteck', value: 75 }, | |
| { name: 'Faux-filet', value: 65 }, | |
| { name: 'Côtes Entrecôtes', value: 55 }, | |
| { name: 'Basses côtes', value: 45 }, | |
| { name: 'Collier', value: 85 }, | |
| { name: 'Jumeau à biftek', value: 15 }, | |
| { name: 'Paleron', value: 65 }, | |
| { name: 'Macreuse à bifteck', value: 45 }, | |
| { name: 'Gîte', value: 85 }, | |
| { name: 'Aiguillette baronne', value: 65 }, | |
| { name: 'Filet', value: 95 }, | |
| ] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main_geo_svg_heatmap', { | |
| title: [ | |
| 'Select some route in SVG via API.', | |
| ], | |
| option: option, | |
| height: 500 | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| 'data/svg/MacOdrum-LV5-floorplan-web.svg' | |
| ], function (echarts, svg) { | |
| var option; | |
| echarts.registerMap('MacOdrum-LV5-floorplan-web', { | |
| svg: svg | |
| }); | |
| // seminar_room | |
| // reading_room | |
| option = { | |
| title: { | |
| text: 'Visit Route', | |
| left: 'center', | |
| bottom: 10 | |
| }, | |
| tooltip: { | |
| }, | |
| geo: { | |
| map: 'MacOdrum-LV5-floorplan-web', | |
| roam: true, | |
| // height: 100, | |
| // zoom: 1.5 | |
| emphasis: { | |
| itemStyle: { | |
| color: null | |
| }, | |
| label: { | |
| show: false | |
| } | |
| } | |
| }, | |
| series: [{ | |
| name: 'Route', | |
| type: 'lines', | |
| coordinateSystem: 'geo', | |
| geoIndex: 0, | |
| emphasis: { | |
| label: { | |
| show: false | |
| } | |
| }, | |
| polyline: true, | |
| lineStyle: { | |
| color: '#c46e54', | |
| width: 5, | |
| opacity: 1 | |
| }, | |
| zlevel: 1, | |
| effect: { | |
| show: true, | |
| period: 8, | |
| color: '#a10000', | |
| constantSpeed: 80, | |
| trailLength: 0.0001, | |
| symbolSize: [20, 12], | |
| symbol: 'path://M35.5 40.5c0-22.16 17.84-40 40-40s40 17.84 40 40c0 1.6939-.1042 3.3626-.3067 5H35.8067c-.2025-1.6374-.3067-3.3061-.3067-5zm90.9621-2.6663c-.62-1.4856-.9621-3.1182-.9621-4.8337 0-6.925 5.575-12.5 12.5-12.5s12.5 5.575 12.5 12.5a12.685 12.685 0 0 1-.1529 1.9691l.9537.5506-15.6454 27.0986-.1554-.0897V65.5h-28.7285c-7.318 9.1548-18.587 15-31.2715 15s-23.9535-5.8452-31.2715-15H15.5v-2.8059l-.0937.0437-8.8727-19.0274C2.912 41.5258.5 37.5549.5 33c0-6.925 5.575-12.5 12.5-12.5S25.5 26.075 25.5 33c0 .9035-.0949 1.784-.2753 2.6321L29.8262 45.5h92.2098z' | |
| }, | |
| data: [{ | |
| coords: [ | |
| [110.6189462165178, 456.64349563895087], | |
| [124.10988522879458, 450.8570048730469], | |
| [123.9272226116071, 389.9520693708147], | |
| [61.58708083147317, 386.87942320312504], | |
| [61.58708083147317, 72.8954315876116], | |
| [258.29514854771196, 72.8954315876116], | |
| [260.75457021484374, 336.8559607533482], | |
| [280.5277985253906, 410.2406672084263], | |
| [275.948185765904, 528.0254369698661], | |
| [111.06907909458701, 552.795792593471], | |
| [118.87138231445309, 701.365737015904], | |
| [221.36468155133926, 758.7870354617745], | |
| [307.86195445452006, 742.164737297712], | |
| [366.8489324762834, 560.9895157073103], | |
| [492.8750778390066, 560.9895157073103], | |
| [492.8750778390066, 827.9639780566406], | |
| [294.9255269587053, 827.9639780566406], | |
| [282.79803391043527, 868.2476088113839] | |
| ] | |
| }] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main_geo_svg_building', { | |
| title: [ | |
| 'Select some route in SVG via API.', | |
| ], | |
| option: option, | |
| height: 700, | |
| infoKey: 'SVG coord', | |
| info: {} | |
| }); | |
| if (chart) { | |
| chart.getZr().on('click', function (event) { | |
| var x = event.offsetX; | |
| var y = event.offsetY; | |
| console.log(x, y); | |
| var svgCoord = chart.convertFromPixel({ geoIndex: 0 }, [x, y]); | |
| console.log(svgCoord); | |
| chart.__testHelper.updateInfo( | |
| {x: svgCoord[0], y: svgCoord[1]}, | |
| 'SVG coord' | |
| ); | |
| }); | |
| } | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| 'data/svg/ksia-ext-plan-min.svg' | |
| ], function (echarts, svg) { | |
| var option; | |
| echarts.registerMap('ksia-ext-plan', { | |
| svg: svg | |
| }); | |
| // seminar_room | |
| // reading_room | |
| option = { | |
| tooltip: { | |
| }, | |
| geo: { | |
| map: 'ksia-ext-plan', | |
| roam: true, | |
| // left: 0, | |
| // right: 0, | |
| // top: 0, | |
| // bottom: 0, | |
| // height: 100, | |
| // zoom: 1.5 | |
| emphasis: { | |
| itemStyle: { | |
| color: null | |
| }, | |
| label: { | |
| show: false | |
| } | |
| } | |
| }, | |
| series: [{ | |
| name: 'Route', | |
| type: 'lines', | |
| coordinateSystem: 'geo', | |
| geoIndex: 0, | |
| emphasis: { | |
| label: { | |
| show: false | |
| } | |
| }, | |
| polyline: true, | |
| lineStyle: { | |
| color: '#c46e54', | |
| width: 0 | |
| }, | |
| effect: { | |
| show: true, | |
| period: 8, | |
| color: '#a10000', | |
| // constantSpeed: 80, | |
| trailLength: 0, | |
| symbolSize: [12, 30], | |
| symbol: 'path://M87.1667 3.8333L80.5.5h-60l-6.6667 3.3333L.5 70.5v130l10 10h80l10 -10v-130zM15.5 190.5l15 -20h40l15 20zm75 -65l-15 5v35l15 15zm-80 0l15 5v35l-15 15zm65 0l15 -5v-40l-15 20zm-50 0l-15 -5v-40l15 20zm 65,-55 -15,25 c -15,-5 -35,-5 -50,0 l -15,-25 c 25,-15 55,-15 80,0 z' | |
| }, | |
| z: 100, | |
| data: [{ | |
| effect: { | |
| color: '#a10000', | |
| constantSpeed: 100, | |
| delay: 0, | |
| }, | |
| coords: [ | |
| [50.875133928571415, 242.66287667410717], | |
| [62.03696428571425, 264.482421875], | |
| [72.63357421874997, 273.62779017857144], | |
| [92.78291852678569, 285.869140625], | |
| [113.43637834821425, 287.21854073660717], | |
| [141.44788783482142, 288.92947823660717], | |
| [191.71686104910714, 289.5507114955357], | |
| [198.3060072544643, 294.0673828125], | |
| [204.99699497767858, 304.60288783482144], | |
| [210.79177734375003, 316.7373046875], | |
| [212.45179408482142, 329.3656529017857], | |
| [210.8885267857143, 443.3925083705358], | |
| [215.35936941964286, 453.00634765625], | |
| [224.38761997767858, 452.15087890625], | |
| [265.71490792410714, 452.20179966517856], | |
| [493.3408844866072, 453.77525111607144], | |
| [572.8892940848216, 448.77992466517856], | |
| [608.9513755580358, 448.43366350446433], | |
| [619.99099609375, 450.8778599330358], | |
| [624.2479715401787, 456.2194475446429], | |
| [628.1434095982145, 463.9899553571429], | |
| [629.8492550223216, 476.0276227678571], | |
| [631.2750362723216, 535.7322126116071], | |
| [624.6757059151787, 546.6496233258929], | |
| [617.1801702008929, 552.6480887276786], | |
| [603.7269056919645, 554.5066964285714], | |
| [588.0178515625, 557.5517578125], | |
| [529.4386104910716, 556.2991071428571], | |
| [422.1994921875001, 551.38525390625], | |
| [291.66921875, 552.5767996651786], | |
| [219.4279380580357, 547.4949079241071], | |
| [209.53912667410714, 541.5931919642858], | |
| [206.70793247767858, 526.1947544642858], | |
| [206.70793247767858, 507.4049944196429], | |
| [206.12234375000003, 468.7663225446429], | |
| [204.48778738839286, 459.44782366071433], | |
| [197.56256417410714, 452.8943219866071], | |
| [170.31995814732142, 456.27546037946433], | |
| [1.8078906249999704, 460.5935407366071] | |
| ] | |
| }, { | |
| effect: { | |
| color: '#00067d', | |
| constantSpeed: 80, | |
| delay: 0, | |
| }, | |
| coords: [ | |
| [779.4595368303574, 287.98744419642856], | |
| [689.07009765625, 291.0477818080357], | |
| [301.83300223214286, 290.49783761160717], | |
| [229.31165736607142, 291.73011997767856], | |
| [220.73660156250003, 297.4077845982143], | |
| [214.74832031250003, 308.52378627232144], | |
| [213.82156250000003, 421.35400390625], | |
| [213.19523716517858, 443.0564313616071], | |
| [222.31005301339286, 455.95465959821433], | |
| [271.71846540178575, 454.37611607142856], | |
| [359.64843191964286, 455.9393833705358], | |
| [580.2524358258929, 448.11286272321433], | |
| [627.7156752232145, 460.7463030133929], | |
| [632.3290959821429, 536.6386021205358], | |
| [628.9123130580358, 548.4776785714286], | |
| [612.5667494419645, 556.8235909598214], | |
| [543.7167912946429, 555.4741908482143], | |
| [429.1756361607143, 551.9402901785714], | |
| [293.42089285714286, 551.2172154017858], | |
| [226.20039899553575, 556.0699637276786], | |
| [215.49176339285714, 562.7253069196429], | |
| [213.21051339285714, 591.6024693080358], | |
| [212.00878348214286, 625.6735491071429], | |
| [197.43017020089286, 645.0743582589286], | |
| [187.41405691964286, 647.0857282366071], | |
| [101.79589285714286, 649.0207170758929], | |
| [69.96023437499997, 650.1613420758929], | |
| [56.48150948660714, 656.8268694196429], | |
| [51.11446149553569, 665.2542550223214] | |
| ] | |
| }, { | |
| effect: { | |
| color: '#997405', | |
| constantSpeed: 60, | |
| delay: 0, | |
| }, | |
| coords: [ | |
| [2.5920703124999704, 450.66908482142856], | |
| [204.0651450892857, 453.13364955357144], | |
| [378.72844029017864, 453.13874162946433], | |
| [551.1817745535716, 456.1532505580358], | |
| [578.3734598214287, 456.91196986607144], | |
| [601.2317885044645, 458.9895368303571], | |
| [614.1503850446429, 462.1669921875], | |
| [618.99294921875, 479.68882533482144], | |
| [620.0826534598216, 513.5969587053571], | |
| [615.6932840401787, 528.7306082589286], | |
| [608.4829045758929, 533.2625558035714], | |
| [592.7127455357145, 534.9582170758929], | |
| [583.09890625, 527.5492466517858], | |
| [578.6535239955358, 516.4077845982143], | |
| [578.6535239955358, 498.36146763392856], | |
| [577.9966462053571, 477.0613141741071], | |
| [575.3691350446429, 469.1940569196429], | |
| [569.0753292410716, 462.63037109375], | |
| [553.9518638392858, 460.6444614955358], | |
| [298.10051060267864, 465.61432756696433], | |
| [193.49908761160714, 460.1759905133929], | |
| [116.40505859374997, 465.78236607142856], | |
| [3.5137360491071092, 463.47565569196433] | |
| ] | |
| }] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main_geo_svg_traffic', { | |
| title: [ | |
| 'Select some route in SVG via API.', | |
| ], | |
| option: option, | |
| height: 700, | |
| // infoKey: 'SVG coord', | |
| // info: {} | |
| }); | |
| if (chart) { | |
| chart.getZr().on('click', function (event) { | |
| var x = event.offsetX; | |
| var y = event.offsetY; | |
| var svgCoord = chart.convertFromPixel({ geoIndex: 0 }, [x, y]); | |
| console.log(svgCoord); | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |