githubmirror/echarts

test/label-layout.html
924 строки35 KB
pissang
test: use require to replace original jquery loading
10 май 2021, 09:02
10 май 2021, 09:02f07de0b
<!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="main0"></div>
        <div id="main1"></div>
        <div id="main2"></div>


        <!-- TODO: Tree, Sankey, Map  -->
        <div id="main3"></div>
        <div id="main4"></div>
        <div id="main5"></div>
        <div id="main6"></div>
        <div id="main7"></div>
        <div id="main8"></div>
        <div id="main9"></div>
        <div id="main10"></div>
        <div id="main11"></div>
        <div id="main12"></div>
        <div id="main13"></div>



        <script>
        require(['echarts'/*, 'map/js/china' */], function (echarts) {
            var option;
            option = {
                legend: {
                    data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis:  {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: ['周一','周二','周三','周四','周五','周六','周日']
                },
                series: [
                    {
                        name: '直接访问',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true
                        },
                        labelLayout: {
                            hideOverlap: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [13244, 302, 301, 334, 390, 330, 320]
                    },
                    {
                        name: '邮件营销',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true
                        },
                        labelLayout: {
                            hideOverlap: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '联盟广告',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true
                        },
                        labelLayout: {
                            hideOverlap: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '视频广告',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true
                        },
                        labelLayout: {
                            hideOverlap: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150, 212, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '搜索引擎',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true
                        },
                        labelLayout: {
                            hideOverlap: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [820, 832, 901, 934, 1290, 1330, 1320]
                    }
                ]
            }
            var chart = testHelper.create(echarts, 'main0', {
                title: [
                    'Overlap of stacked bar.',
                    'Case from #6514'
                ],
                option: option
            });
        });
        </script>


        <script>
            require(['echarts'/*, 'map/js/china' */], function (echarts) {
                var option;
                var base = +new Date(1968, 9, 3);
                var oneDay = 24 * 3600 * 1000;
                var date = [];

                var data = [Math.round(Math.random() * 300)];

                for (var i = 1; i < 50; i++) {
                    var now = new Date(base += oneDay);
                    date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
                }
                option = {
                    grid: {
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: date
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%']
                    },
                    series: [
                        {
                            name:'large area',
                            type:'line',
                            smooth:true,
                            label: {
                                show: true,
                                position: 'top'
                            },
                            labelLayout: {
                                hideOverlap: true
                            },
                            itemStyle: {
                                color: 'rgb(255, 70, 131)'
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgb(255, 158, 68)'
                                }, {
                                    offset: 1,
                                    color: 'rgb(255, 70, 131)'
                                }])
                            },
                            data: data
                        }
                    ]
                };
                var chart = testHelper.create(echarts, 'main1', {
                    width: 600,
                    title: [
                        'Overlap of line.'
                    ],
                    option: option
                });
            });
        </script>





        <script>
            require(['echarts'/*, 'map/js/china' */], function (echarts) {

                const data = [{
                    "name": "United States",
                    "value": [213242, 22.86439111423725, "United States"]
                }, {
                    "name": "Italy",
                    "value": [110574, 11.856047040759652, "Italy"]
                }, {
                    "name": "Spain",
                    "value": [104118, 11.163817043697554, "Spain"]
                }, {
                    "name": "China",
                    "value": [82361, 8.830971931231625, "China"]
                }, {
                    "name": "Germany",
                    "value": [77872, 8.349649059978255, "Germany"]
                }, {
                    "name": "France",
                    "value": [57749, 6.192005901539504, "France"]
                }, {
                    "name": "Iran",
                    "value": [47593, 5.103051773571311, "Iran"]
                }, {
                    "name": "United Kingdom",
                    "value": [29865, 3.202207072840695, "United Kingdom"]
                }, {
                    "name": "Switzerland",
                    "value": [17768, 1.905133610253925, "Switzerland"]
                }, {
                    "name": "Turkey",
                    "value": [15679, 1.6811453103991045, "Turkey"]
                }, {
                    "name": "Belgium",
                    "value": [13964, 1.4972583145872247, "Belgium"]
                }, {
                    "name": "Netherlands",
                    "value": [13696, 1.4685226207810533, "Netherlands"]
                }, {
                    "name": "Austria",
                    "value": [10711, 1.1484627476041078, "Austria"]
                }, {
                    "name": "Korea, South",
                    "value": [9887, 1.0601112114239395, "Korea, South"]
                }, {
                    "name": "Canada",
                    "value": [9560, 1.0250493760708872, "Canada"]
                }, {
                    "name": "Portugal",
                    "value": [8251, 0.8846948119205952, "Portugal"]
                }, {
                    "name": "Brazil",
                    "value": [6836, 0.7329746375335339, "Brazil"]
                }, {
                    "name": "Israel",
                    "value": [6092, 0.6532009203999837, "Israel"]
                }, {
                    "name": "Sweden",
                    "value": [4947, 0.5304308852952593, "Sweden"]
                }, {
                    "name": "Norway",
                    "value": [4863, 0.52142417529631, "Norway"]
                }, {
                    "name": "Australia",
                    "value": [4862, 0.5213169525582273, "Australia"]
                }, {
                    "name": "Czechia",
                    "value": [3508, 0.37613736519421254, "Czechia"]
                }, {
                    "name": "Ireland",
                    "value": [3447, 0.3695967781711661, "Ireland"]
                }, {
                    "name": "Denmark",
                    "value": [3290, 0.35276280829217765, "Denmark"]
                }, {
                    "name": "Chile",
                    "value": [3031, 0.3249921191287509, "Chile"]
                }, {
                    "name": "Malaysia",
                    "value": [2908, 0.31180372234457526, "Malaysia"]
                }, {
                    "name": "Russia",
                    "value": [2777, 0.2977575436557378, "Russia"]
                }, {
                    "name": "Ecuador",
                    "value": [2748, 0.29464808425133865, "Ecuador"]
                }, {
                    "name": "Poland",
                    "value": [2554, 0.2738468730632893, "Poland"]
                }, {
                    "name": "Romania",
                    "value": [2460, 0.2637679356835128, "Romania"]
                }];

                var option = {
                    backgroundColor: '#333',
                    visualMap: {
                        dimension: 0,
                        left: 10,
                        itemWidth: 12,
                        min: data[29].value[0],
                        max: data[0].value[0],
                        text: ['High', 'Low'],
                        textStyle: {
                            color: '#ddd'
                        },
                        inRange: {
                            color: ['lightskyblue', 'yellow', 'orangered', 'red']
                        }
                    },
                    series: [{
                        type: 'pie',
                        data: data,
                        roseType: 'radius',
                        radius: ['30%', '70%'],
                        labelLine: {
                            length2: 100
                        },
                        labelLayout: function (params) {
                            const cx = window.innerWidth / 2;
                            const isLeft = params.labelRect.x < cx;
                            return isLeft ? {
                                x: cx - 200,
                                align: 'right',
                            } : {
                                x: cx + 100,
                                align: 'left'
                            };
                        }
                    }]
                };

                var chart = testHelper.create(echarts, 'main2', {
                    title: 'Pie label edge.',
                    height: 300,
                    option
                });
            });
        </script>

        <script>
            require(['echarts'/*, 'map/js/china' */], function (echarts) {
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 10,
                        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            label: {
                                color: 'inherit',
                                show: false
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 30,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLayout: {
                                x: '50%',
                                y: '50%',
                                align: 'center',
                                verticalAlign: 'center'
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 335, name: '直接访问'},
                                {value: 310, name: '邮件营销'},
                                {value: 234, name: '联盟广告'},
                                {value: 135, name: '视频广告'},
                                {value: 1548, name: '搜索引擎'}
                            ]
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'main3', {
                    title: [
                        'Pie label center.'
                    ],
                    option: option
                });
            });
        </script>


        <script>
            require(['echarts'/*, 'map/js/china' */], function (echarts) {
                var option;
                var data = [
                    [[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,38195258,'Poland',1990],[19349,69.6,147568552,'Russia',1990],[10670,67.3,53994605,'Turkey',1990],[26424,75.7,57110117,'United Kingdom',1990],[37062,75.4,252847810,'United States',1990]],
                    [[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,38611794,'Poland',2015],[23038,73.13,143456918,'Russia',2015],[19360,76.5,78665830,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321773631,'United States',2015]]
                ];

                option = {
                    xAxis: {},
                    yAxis: {
                        scale: true
                    },
                    series: [{
                        name: '1990',
                        data: data[0],
                        type: 'scatter',
                        symbolSize: function (data) {
                            return Math.sqrt(data[2]) / 5e2;
                        },
                        emphasis: {
                            focus: 'self'
                        },
                        labelLayout: {
                            y: 20,
                            align: 'center',
                            moveOverlap: 'shiftX',
                            hideOverlap: true
                        },
                        labelLine: {
                            show: true,
                            length2: 5,
                            lineStyle: {
                                color: '#bbb'
                            }
                        },
                        label: {
                            show: true,
                            formatter: function (param) {
                                return param.data[3];
                            },
                            minMargin: 10,
                            color: '#333',
                            textBorderColor: '#fff',
                            textBorderWidth: 1,
                            position: 'top'
                        }
                    }]
                };

                var chart = testHelper.create(echarts, 'main6', {
                    title: [
                        'Overlap Shift X'
                    ],
                    option: option
                });
            });
        </script>


        <script>
            require(['echarts'/*, 'map/js/china' */], function (echarts) {
                var option;
                var data = [
                    [[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,38195258,'Poland',1990],[19349,69.6,147568552,'Russia',1990],[10670,67.3,53994605,'Turkey',1990],[26424,75.7,57110117,'United Kingdom',1990],[37062,75.4,252847810,'United States',1990]],
                    [[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,38611794,'Poland',2015],[23038,73.13,143456918,'Russia',2015],[19360,76.5,78665830,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321773631,'United States',2015]]
                ];

                option = {
                    xAxis: {
                        splitLine: { show: false }
                    },
                    yAxis: {
                        splitLine: { show: false },
                        scale: true
                    },
                    grid: {
                        left: 100,
                        width: 300
                    },
                    series: [{
                        name: '1990',
                        data: data[0],
                        type: 'scatter',
                        symbolSize: function (data) {
                            return Math.sqrt(data[2]) / 5e2;
                        },
                        emphasis: {
                            focus: 'self'
                        },
                        labelLayout: {
                            x: 500,
                            moveOverlap: 'shiftY',
                            // hideOverlap: true
                        },
                        labelLine: {
                            show: true,
                            length2: 5,
                            lineStyle: {
                                color: '#bbb'
                            }
                        },
                        label: {
                            show: true,
                            formatter: function (param) {
                                return param.data[3];
                            },
                            textBorderColor: '#fff',
                            textBorderWidth: 1,
                            position: 'top',
                            minMargin: 2
                        }
                    }]
                };

                var chart = testHelper.create(echarts, 'main7', {
                    title: [
                        'Overlap Shift Y'
                    ],
                    option: option
                });
            });
        </script>

        <script>
            require(['echarts'], function (echarts) {
                const color = [
                    '#1576d2',
                    '#d14a82',
                    '#26c1f2',
                    '#a166ff',
                    '#1271cc',
                    '#272f67'
                ];
                let data = [{
                        name: 'Mon',
                        value: 182
                    },
                    {
                        name: 'Tue',
                        value: 191
                    },
                    {
                        name: 'Wed',
                        value: 234
                    },
                    {
                        name: 'Thu',
                        value: 290
                    },
                    {
                        name: 'Fri',
                        value: 330
                    }
                ];

                // 指定数据块中 label 的相应效果，以保证label的正常显示
                const dataArcStyle = {
                    label: {
                        show: true
                    },
                    labelLine: {
                        show: true
                    },
                    emphasis: {
                        labelLine: {
                            show: true
                        }
                    }
                }
                data = data.map(d => {
                    d = Object.assign(d, dataArcStyle)
                    return d;
                });

                const sum = data.reduce((prev, curr) => prev + curr.value, 0);
                data.push({
                    name: null,
                    value: sum,
                    itemStyle: {
                        opacity: 0
                    },
                    label: {
                        show: false
                    },
                    tooltip: {
                        show: false
                    }
                });

                option = {
                    backgroundColor: '#000',
                    color,
                    tooltip: {
                        show: true
                    },
                    series: [{
                        type: 'pie',
                        center: ['50%', '75%'],
                        radius: ['50%', '80%'],
                        startAngle: 180,
                        data
                    }]
                };
                var chart = testHelper.create(echarts, 'main8', {
                    title: [
                        'Case from https://gallery.echartsjs.com/editor.html?c=xFcvAMHjr1&v=1'
                    ],
                    option: option,
                    height: 500
                });
            });
        </script>

        <script>
            require(['echarts', 'map/js/china'], function (echarts) {
                option = {
                    series: [{
                        type: 'map',
                        map: 'china',
                        label: {
                            show: false,
                            formatter: [
                                `{title|{b}}`,
                                `{value|{c} K 平方公里}`
                            ].join('\n'),
                            backgroundColor: '#eee',
                            borderColor: '#17A597',
                            borderWidth: 1,
                            borderRadius: 4,
                            align: 'center',
                            width: 150,
                            rich: {
                                title: {
                                    align: 'center',
                                    lineHeight: 17,
                                    fontSize: 12,
                                    color: '#fff',
                                    backgroundColor: '#17A597',
                                    width: 150,
                                    height: 20,
                                    borderRadius: [4, 4, 0, 0]
                                },
                                value: {
                                    align: 'center',
                                    height: 25
                                }
                            }
                        },
                        labelLine: {
                            show: true,
                            showAbove: true,
                            length2: 10
                        },
                        labelLayout: function (params) {
                            const positionMap = [
                                // 内蒙古
                                (params) => { return { y: params.rect.y - 20, align: 'center' } },
                                // 上海
                                (params) => { return { x: params.rect.x + 50, align: 'left' } }
                            ]
                            return positionMap[params.dataIndex] && Object.assign({
                                draggable: true
                            }, positionMap[params.dataIndex](params));
                        },
                        emphasis: {
                            label: {
                                show: false
                            }
                        },
                        data: [{
                            name: '内蒙古',
                            value: 118.3,
                            label: {
                                show: true
                            }
                        }, {
                            name: '上海',
                            value: 6.34,
                            label: {
                                show: true
                            }
                        }]
                    }]
                };

                var chart = testHelper.create(echarts, 'main9', {
                    title: [
                        'Draggable label'
                    ],
                    option: option,
                    height: 500
                });
            });
        </script>

        <script>
            require([
                'echarts',
                'extension/dataTool',
                './data/les-miserables.gexf'
            ], function (echarts, dataTool, xml) {
                var graph = dataTool.gexf.parse(xml);
                var categories = [];
                for (var i = 0; i < 9; i++) {
                    categories[i] = {
                        name: '类目' + i
                    };
                }
                graph.nodes.forEach(function (node) {
                    delete node.itemStyle;
                    node.value = node.symbolSize;
                    node.category = node.attributes['modularity_class'];
                });
                graph.links.forEach(function (link) {
                    delete link.lineStyle;
                });
                var option = {
                    legend: [{}],
                    animationDurationUpdate: 1500,
                    animationEasingUpdate: 'quinticInOut',

                    series : [
                        {
                            name: 'Les Miserables',
                            type: 'graph',
                            layout: 'none',
                            data: graph.nodes,
                            links: graph.links,
                            categories: categories,
                            roam: true,
                            draggable: true,

                            label: {
                                show: true,
                                formatter: '{b}',
                                position: 'right'
                            },

                            labelLayout: {
                                hideOverlap: true
                            },

                            emphasis: {
                                label: {
                                    show: true
                                }
                            },
                            lineStyle: {
                                color: 'source',
                                curveness: 0.3
                            },
                            emphasis: {
                                lineStyle: {
                                    width: 10
                                }
                            }
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'main10', {
                    title: [
                        'Hide overlap in graph zooming.'
                    ],
                    height: 800,
                    option: option
                });
            });
        </script>


        <script>
            require(['echarts', 'map/js/china'], function (echarts) {
                const option = {
                    series: [{
                        type: 'map',
                        map: 'china',
                        roam: true,
                        label: {
                            show: true
                        },
                        labelLayout: {
                            hideOverlap: true
                        }
                    }]
                };

                var chart = testHelper.create(echarts, 'main11', {
                    title: [
                        'Map label should update it\'s position when labelLayout is used.'
                    ],
                    option: option
                });
            });
        </script>


        <script>
        require(['echarts'/*, 'map/js/china' */], function (echarts) {
            const svg = [
                '<?xml version="1.0" encoding="utf-8"?>',
                '<svg viewBox="-25 0 300 100" 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_coord1', { svg: svg });

            option = {
                series: [{
                    type: 'map',
                    roam: true,
                    top: 10,
                    bottom: 10,
                    left: 10,
                    right: 10,
                    selectedMode: 'multiple',
                    map: 'testGeoSVG_coord1',
                    select: {
                        itemStyle: {
                            color: 'red'
                        },
                        label: {
                            color: '#fff'
                        }
                    },
                    label: {
                        show: true,
                        fontSize: 30
                    },
                    labelLayout: {
                        hideOverlap: true
                    }
                }]
            };

            var chart = testHelper.create(echarts, 'main12', {
                title: [
                    'Click both rect make them selected (become red)',
                    '(1) zoom to trigger label **hideOverlap**',
                    'zoom back, check labels should be restored',
                    '(2) mouseover one the **right rect** and zoom to trigger label **hideOverlap**',
                    'zoom back, mouseout, check the label should not disappear'
                ],
                option: option,
                height: 200,
            });
        });
        </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"/>',
                '</svg>'
            ].join('')

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

            option = {
                geo: {
                    map: 'testGeoSVG_coord2',
                    roam: true
                }
            };

            var chart = testHelper.create(echarts, 'main13', {
                title: [
                    '(geo coordSys) label displayed only on hover',
                    'zoom: label should keep displayed.'
                ],
                option: option,
                height: 200,
            });
        });
        </script>




    </body>
</html>