geo-svg.html

<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <!-- <script src="ut/lib/canteen.js"></script> -->
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>


        <div id="main_simple_geo_json"></div>
        <div id="main_simple_geo_svg"></div>
        <div id="main_simple_geo_svg_coord"></div>
        <div id="main_geo_json_focus_blur"></div>
        <div id="main_geo_svg_emphasis_select"></div>
        <div id="main_pure_geo_svg"></div>
        <div id="main_pure_map_svg"></div>
        <div id="main_map_geo_svg"></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'/*, 'map/js/china' */], function (echarts) {
            const testGeoJson1 = {
                'type': 'FeatureCollection',
                'features': [
                    {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'Polygon',
                            'coordinates': [
                                [[2000, 2000], [5000, 2000], [5000, 5000], [2000, 5000]]
                            ]
                        },
                        'properties': {
                            'name': 'Afghanistan',
                            'childNum': 1
                        }
                    }
                ]
            };

            echarts.registerMap('testGeoJson1', testGeoJson1);

            option = {
                tooltip: {
                },
                geo: {
                    map: 'testGeoJson1',
                    roam: true,
                    selectedMode: 'single',
                    // height: '100%',
                    // center
                    // layoutCenter: ['30%', 40],
                    // layoutSize: 40,
                    // boundingCoords
                    zoom: 1,
                    aspectScale: 1
                }
            };

            var chart = testHelper.create(echarts, 'main_simple_geo_json', {
                title: [
                    'simple geo geoJSON location:',
                    'Should be a square and 80% of canvas height.',
                    'At the center of the canvas.'
                ],
                option: option,
                info: {},
                infoKey: 'event',
                height: 200
            });

            listenAndPrintEvent(chart);

        });
        </script>


        <script>
        require(['echarts'/*, 'map/js/china' */], function (echarts) {
            const svg = [
                '<?xml version="1.0" encoding="utf-8"?>',
                '<svg xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" version="1.2" fill-rule="evenodd" xml:space="preserve">',
                '<path d="M 0,0 L 0,100 100,100 100,0 Z" fill="none" stroke="rgb(56,93,138)" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>',
                '</svg>'
            ].join('')

            echarts.registerMap('testGeoSVG', { svg: svg });

            option = {
                tooltip: {
                },
                geo: {
                    map: 'testGeoSVG',
                    roam: true,
                    selectedMode: 'single',
                    // height: '100%',
                    // center
                    // layoutCenter: ['30%', 40],
                    // layoutSize: 40,
                    // boundingCoords
                    // zoom: 1,
                    // aspectScale: 1
                }
            };

            var chart = testHelper.create(echarts, 'main_simple_geo_svg', {
                title: [
                    'Should be a square and 80% of canvas height.',
                    'At the center of the canvas.'
                ],
                option: option,
                info: {},
                infoKey: 'event',
                height: 200
            });

            listenAndPrintEvent(chart);

        });
        </script>


        <script>
        require(['echarts'/*, 'map/js/china' */], function (echarts) {
            const svg = [
                '<?xml version="1.0" encoding="utf-8"?>',
                '<svg xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" fill-rule="evenodd" xml:space="preserve">',
                '<path name="left_rect" d="M 0,0 L 0,100 100,100 100,0 Z" fill="#765" stroke="rgb(56,93,138)" stroke-width="0" stroke-linecap="square" stroke-linejoin="miter"/>',
                '<path name="right_rect" d="M 150,0 L 150,100 250,100 250,0 Z" fill="#567" stroke="rgb(56,93,138)" stroke-width="0" stroke-linecap="square" stroke-linejoin="miter"/>',
                '</svg>'
            ].join('')

            echarts.registerMap('testGeoSVG_coord', { svg: svg });

            option = {
                animation: false,
                tooltip: {
                },
                geo: {
                    map: 'testGeoSVG_coord',
                    roam: true,
                    top: 0,
                    bottom: 0,
                    left: 0,
                    right: 0,
                },
                series: [{
                    type: 'scatter',
                    geoIndex: 0,
                    coordinateSystem: 'geo',
                    symbolSize: 30,
                    data: [{
                        value: [200, 50],
                        itemStyle: {
                            color: 'blue'
                        }
                    }]
                }]
            };

            var chart = testHelper.create(echarts, 'main_simple_geo_svg_coord', {
                title: [
                    'A **blue circle** should be in the center of the right rect.',
                    '**Click** inside the rect or outside the rect.',
                    'Check SVG coord displayed (via convertFromPixel).',
                    '(The left rect is 100*100 and left-top corner is (0,0))',
                    '**Click btn1**, check Pixel.point[1] should be around 100',
                    '**Click btn2**, check Pixel.point[1] should be around 200'
                ],
                option: option,
                infoKey: 'SVG coord',
                info: {},
                height: 200,
                buttons: [{
                    text: 'converToPixel({ geoIndex: 0 }, "left_rect")',
                    onclick: function () {
                        var point = chart.convertToPixel({ geoIndex: 0 }, 'left_rect');
                        console.log(point);
                        chart.__testHelper.updateInfo(
                            { point: point },
                            'Pixel'
                        );
                    }
                }, {
                    text: 'convertToPixel({ geoIndex: 0 }, [100, 100])',
                    onclick: function () {
                        var point = chart.convertToPixel({ geoIndex: 0 }, [100, 100]);
                        console.log(point);
                        chart.__testHelper.updateInfo(
                            { point: point },
                            'Pixel'
                        );
                    }
                }]
            });

            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'/*, 'map/js/china' */], function (echarts) {
            const testGeoJson1 = {
                'type': 'FeatureCollection',
                'features': [
                    {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'Polygon',
                            'coordinates': [
                                [[2000, 2000], [5000, 2000], [5000, 5000], [2000, 5000]]
                            ]
                        },
                        'properties': {
                            'name': 'Afghanistan'
                        }
                    },
                    {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'Polygon',
                            'coordinates': [
                                [[6000, 2300], [9300, 2300], [9000, 5000]]
                            ]
                        },
                        'properties': {
                            'name': 'BBB'
                        }
                    }
                ]
            };

            echarts.registerMap('testGeoJson2', testGeoJson1);

            option = {
                tooltip: {
                },
                geo: {
                    map: 'testGeoJson2',
                    roam: true,
                    selectedMode: 'single',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'self'
                    },
                    // height: '100%',
                    // center
                    // layoutCenter: ['30%', 40],
                    // layoutSize: 40,
                    // boundingCoords
                    zoom: 1,
                    aspectScale: 1
                }
            };

            var chart = testHelper.create(echarts, 'main_geo_json_focus_blur', {
                title: [
                    'check geoJSON focus-blur',
                    '**Click** them, check click info'
                ],
                option: option,
                info: {},
                infoKey: 'event',
                height: 200
            });

            listenAndPrintEvent(chart);

        });
        </script>


        <script>
        require(['echarts'/*, 'map/js/china' */], function (echarts) {
            const svg = [
                '<?xml version="1.0" encoding="utf-8"?>',
                '<svg xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" fill-rule="evenodd" xml:space="preserve">',
                '<path name="a" d="M 0,0 L 0,100 100,100 100,0 Z" transform="rotate(45)" fill="rgb(16,193,138)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>',
                '<path name="a" d="M 110,0 L 110,100 210,100 210,0 Z" fill="rgb(16,193,138)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>',
                '<g name="b">',
                    '<path d="M 0,110 L 0,210 100,110 Z" fill="rgb(16,193,138)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>',
                    '<path d="M 110,110 L 110,210 210,110 Z" fill="rgb(16,193,138)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>',
                '</g>',
                '<radialGradient id="XMLID_1_" cx="0" cy="220" r="59.4363" gradientUnits="userSpaceOnUse">',
                    '<stop  offset="0" style="stop-color:#E6E6E6"/>',
                    '<stop  offset="1" style="stop-color:#4D4D4D"/>',
                '</radialGradient>',
                '<path name="c" d="M 0,220 L 0,320 100,220 Z" fill="url(#XMLID_1_)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>',
                '<radialGradient id="XMLID_2_" cx="110" cy="220" r="59.4363" gradientUnits="userSpaceOnUse">',
                    '<stop  offset="0" style="stop-color:#E6E6E6"/>',
                    '<stop  offset="1" style="stop-color:#4D4D4D"/>',
                '</radialGradient>',
                '<path name="c" d="M 110,220 L 110,320 210,220 Z" fill="url(#XMLID_2_)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>',
                '</svg>'
            ].join('')

            echarts.registerMap('testGeoSVG_select_hover', { svg: svg });

            option = {
                // tooltip: {
                // },
                geo: {
                    map: 'testGeoSVG_select_hover',
                    roam: true,
                    selectedMode: 'single',
                    // height: '100%',
                    // center
                    // layoutCenter: ['30%', 40],
                    // layoutSize: 40,
                    // boundingCoords
                    zoom: 1,
                    aspectScale: 1,
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'self',
                        label: {
                            show: true,
                            fontSize: 100
                        }
                    },
                    select: {
                        itemStyle: {
                            color: 'red'
                        }
                    }
                }
            };

            var chart = testHelper.create(echarts, 'main_geo_svg_emphasis_select', {
                title: [
                    'click buttons',
                    'hover check',
                    'check focus-blur',
                    'check label no scale/rotate'
                ],
                option: option,
                info: {},
                infoKey: 'event',
                height: 200,
                button: [{
                    text: 'highlight a',
                    onclick: function () {
                        chart.dispatchAction({ type: 'highlight', geoIndex: 0, name: 'a' });
                    }
                }, {
                    text: 'downplay a',
                    onclick: function () {
                        chart.dispatchAction({ type: 'downplay', geoIndex: 0, name: 'a' });
                    }
                }, {
                    text: 'select a',
                    onclick: function () {
                        chart.dispatchAction({ type: 'geoSelect', geoIndex: 0, name: 'a' });
                    }
                }, {
                    text: 'unselect a',
                    onclick: function () {
                        chart.dispatchAction({ type: 'geoUnSelect', geoIndex: 0, name: 'a' });
                    }
                }, {
                    text: 'highlight b',
                    onclick: function () {
                        chart.dispatchAction({ type: 'highlight', geoIndex: 0, name: 'b' });
                    }
                }, {
                    text: 'downplay b',
                    onclick: function () {
                        chart.dispatchAction({ type: 'downplay', geoIndex: 0, name: 'b' });
                    }
                }, {
                    text: 'select b',
                    onclick: function () {
                        chart.dispatchAction({ type: 'geoSelect', geoIndex: 0, name: 'b' });
                    }
                }, {
                    text: 'unselect b',
                    onclick: function () {
                        chart.dispatchAction({ type: 'geoUnSelect', geoIndex: 0, name: 'b' });
                    }
                }]
            });

            listenAndPrintEvent(chart);

            if (chart) {
                chart.on('highlight', function () {
                });
            }

        });
        </script>


        <script>
        require(['echarts'/*, 'map/js/china' */], function (echarts) {
            var option;
            $.ajax({
                url: '../../vis-data/map/svg/seats/seatmap-example.svg',
                dataType: 'text'
            }).done(function (svg) {

                echarts.registerMap('seatmap', {
                    svg: svg
                });

                option = {
                    tooltip: {
                    },
                    geo: {
                        map: 'seatmap',
                        roam: true,
                        selectedMode: 'multiple',
                        tooltip: {
                            show: true
                        },
                        // height: 100,
                        // zoom: 1.5
                        emphasis: {
                            label: {
                                textBorderColor: '#fff',
                                textBorderWidth: 2
                            }
                        },
                        select: {
                            itemStyle: {
                                color: '#b50205'
                            },
                            label: {
                                show: false,
                                textBorderColor: '#fff',
                                textBorderWidth: 2
                            }
                        }
                    },
                    // series: {
                    //     type: 'scatter',
                    //     coordinateSystem: 'geo',
                    //     // ?????????????????????????
                    //     geoIndex: 0,
                    //     data: [[11, 22], [33, 44]]
                    // }
                };

                var chart = testHelper.create(echarts, 'main_pure_geo_svg', {
                    title: [
                        'pure geo component with svg resource',
                        'click seat: check **allSelected** correct.',
                        'hover seat: check **tooltip** and **label** correct.'
                    ],
                    option: option,
                    info: {},
                    infoKey: 'event',
                    height: 300
                    // buttons: [{text: 'btn-txt', onclick: function () {}}],
                    // recordCanvas: true,
                });

                listenAndPrintEvent(chart);

            });

        });
        </script>


        <script>
        require(['echarts'/*, 'map/js/china' */], function (echarts) {
            var option;
            $.ajax({
                url: '../../vis-data/map/svg/seats/seatmap-example.svg',
                dataType: 'text'
            }).done(function (svg) {

                echarts.registerMap('seatmap', {
                    svg: svg
                });

                option = {
                    tooltip: {
                    },
                    series: {
                        type: 'map',
                        map: 'seatmap',
                        roam: true,
                        selectedMode: 'multiple',
                        // height: 100,
                        // zoom: 1.5
                        emphasis: {
                            label: {
                                textBorderColor: '#fff',
                                textBorderWidth: 2
                            }
                        },
                        select: {
                            itemStyle: {
                                color: '#b50205'
                            },
                            label: {
                                show: false,
                                textBorderColor: '#fff',
                                textBorderWidth: 2
                            }
                        }
                    }
                };

                var chart = testHelper.create(echarts, 'main_pure_map_svg', {
                    title: [
                        'pure map series with svg resource',
                        'Hover seat: check **tooltip** correct.'
                    ],
                    option: option,
                    info: {},
                    infoKey: 'event',
                    height: 300
                    // buttons: [{text: 'btn-txt', onclick: function () {}}],
                    // recordCanvas: true,
                });

                listenAndPrintEvent(chart);

            });

        });
        </script>


        <script>
        require(['echarts'/*, 'map/js/china' */], function (echarts) {
            var option;
            $.ajax({
                url: '../../vis-data/map/svg/seats/seatmap-example.svg',
                dataType: 'text'
            }).done(function (svg) {

                echarts.registerMap('seatmap', {
                    svg: svg
                });

                option = {
                    tooltip: {
                    },
                    geo: {
                        map: 'seatmap',
                        roam: true,
                        selectedMode: 'multiple',
                        // height: 100,
                        // zoom: 1.5
                        tooltip: {
                            show: true
                        },
                        emphasis: {
                            label: {
                                textBorderColor: '#fff',
                                textBorderWidth: 2
                            }
                        },
                        select: {
                            itemStyle: {
                                color: '#b50205'
                            },
                            label: {
                                show: false,
                                textBorderColor: '#fff',
                                textBorderWidth: 2
                            }
                        }
                    },
                    series: {
                        type: 'map',
                        selectedMode: 'multiple',
                        coordinateSystem: 'geo',
                        geoIndex: 0
                    }
                };

                var chart = testHelper.create(echarts, 'main_map_geo_svg', {
                    title: [
                        'map series on declared geo with svg resource',
                        'Hover seat: check **tooltip** correct.'
                    ],
                    option: option,
                    info: {},
                    infoKey: 'event',
                    height: 300
                    // buttons: [{text: 'btn-txt', onclick: function () {}}],
                    // recordCanvas: true,
                });

                listenAndPrintEvent(chart);

            });

        });
        </script>


    </body>
</html>