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