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