githubmirror/echarts

test/map.html
502 строки22 KB
100pah
fix: (1) Fix geo roam (pan and zoom) causes visual artifacts -- geo coord sys and its content (e.g., scatter) should visually align during roaming animation and manual roam. (2) Refactor to uniform roaming impl (via RoamController and ViewCoordSys) and clarify `updateTransform` and related code. (3) Enable scatter and effectScatter clip in geo. (4) Fix aria: palette is modified to ec instance local rather than global, which is more reasonable. (5) Fix map series roaming bug: roam and then click legend hide the first series and then roam and then click legend to restore the first series, the map should not jump.
29 апр 2026, 11:03
29 апр 2026, 11:034175922

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

        <div id="main0"></div>
        <div id="main1"></div>
        <div id="main2"></div>





        <script>
            require([
                'echarts',
                'map/js/china'
            ], function (echarts) {
                var itemStyle = {
                    normal:{
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis:{
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                };

                var option = {
                    title: [{
                        text: '地图数据来源：天地图 cloudcenter.tianditu.gov.cn',
                        subtext: '仅作为功能测试使用，线上产品应从天地图获取最新地图数据并申请审图号',
                        link: 'https://cloudcenter.tianditu.gov.cn/',
                        bottom: 15,
                        left: 15,
                        textStyle: {
                            color: '#888',
                            fontSize: 12
                        },
                        subtextStyle: {
                            color: '#aaa',
                            fontSize: 12
                        }
                    }],
                    tooltip: {},
                    title : {
                        text: '内蒙古 青海 没数据也要能被选中',
                        left: 'center'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data:['iphone3','iphone4','iphone5']
                    },
                    visualMap: {
                        min: 0,
                        max: 1500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高','低'],
                        calculable : true
                    },
                    selectedMode: 'single',
                    series : [
                        {
                            name: 'iphone3',
                            type: 'map',
                            map: 'china',
                            itemStyle: itemStyle,
                            showLegendSymbol: true,
                            center: [104.2, 36],
                            zoom: 1.4,
                            roam: true,
                            markPoint: {
                                data: [{
                                    coord: [115.97, 29.71]
                                }]
                            },
                            label: {
                                normal: {
                                    show: true,
                                    rotate: 40,
                                    formatter: '{b}：{value|{c}}',
                                    // position: 'inside',
                                    backgroundColor: '#fff',
                                    padding: [3, 5],
                                    borderRadius: 3,
                                    borderWidth: 1,
                                    borderColor: 'rgba(0,0,0,0.5)',
                                    color: '#777',
                                    rich: {
                                        value: {
                                            color: '#019D2D',
                                            fontSize: 14,
                                            // fontWeight: 'bold'
                                            // textBorderWidth: 2,
                                            // textBorderColor: '#000'
                                        }
                                    }
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data: [
                                {name: '北京市',value: Math.round(Math.random()*1000)},
                                {name: '天津市',value: Math.round(Math.random()*1000)},
                                {name: '上海市',value: Math.round(Math.random()*1000)},
                                {name: '重庆市',value: Math.round(Math.random()*1000)},
                                {name: '河北省',value: Math.round(Math.random()*1000)},
                                {name: '河南省',value: Math.round(Math.random()*1000)},
                                {name: '云南省',value: Math.round(Math.random()*1000)},
                                {name: '辽宁省',value: Math.round(Math.random()*1000)},
                                {name: '黑龙江省',value: Math.round(Math.random()*1000)},
                                {name: '湖南省',value: Math.round(Math.random()*1000)},
                                {name: '安徽省',value: Math.round(Math.random()*1000)},
                                {name: '山东省',value: Math.round(Math.random()*1000)},
                                {name: '新疆维吾尔自治区',value: Math.round(Math.random()*1000)},
                                {name: '江苏省',value: Math.round(Math.random()*1000)},
                                {name: '浙江省',value: Math.round(Math.random()*1000)},
                                {name: '江西省',value: Math.round(Math.random()*1000)},
                                {name: '湖北省',value: Math.round(Math.random()*1000)},
                                {name: '广西壮族自治区',value: Math.round(Math.random()*1000)},
                                {name: '甘肃省',value: Math.round(Math.random()*1000)},
                                {name: '山西省',value: Math.round(Math.random()*1000)},
                                // {name: '内蒙古自治区',value: Math.round(Math.random()*1000)},
                                {name: '陕西省',value: Math.round(Math.random()*1000)},
                                {name: '吉林省',value: Math.round(Math.random()*1000)},
                                {name: '福建省',value: Math.round(Math.random()*1000)},
                                {name: '贵州省',value: Math.round(Math.random()*1000)},
                                {name: '广东省',value: Math.round(Math.random()*1000)},
                                // {name: '青海省',value: Math.round(Math.random()*1000)},
                                {name: '西藏自治区',value: Math.round(Math.random()*1000)},
                                {name: '四川省',value: Math.round(Math.random()*1000)},
                                {name: '宁夏回族自治区',value: Math.round(Math.random()*1000)},
                                {name: '海南省',value: Math.round(Math.random()*1000)},
                                {name: '台湾省',value: Math.round(Math.random()*1000)},
                                {name: '香港特别行政区',value: Math.round(Math.random()*1000)},
                                {name: '澳门特别行政区',value: Math.round(Math.random()*1000)}
                            ]
                        },
                        {
                            name: 'iphone4',
                            type: 'map',
                            mapType: 'china',
                            roam: true,
                            itemStyle: itemStyle,
                            showLegendSymbol: true,
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data: [
                                {name: '北京市', value: Math.round(Math.random()*1000)},
                                {name: '天津市', value: Math.round(Math.random()*1000)},
                                {name: '上海市', value: Math.round(Math.random()*1000)},
                                {name: '重庆市', value: Math.round(Math.random()*1000)},
                                {name: '河北省', value: Math.round(Math.random()*1000)},
                                {name: '安徽省', value: Math.round(Math.random()*1000)},
                                {name: '新疆维吾尔自治区', value: Math.round(Math.random()*1000)},
                                {name: '浙江省', value: Math.round(Math.random()*1000)},
                                {name: '江西省', value: Math.round(Math.random()*1000)},
                                {name: '山西省', value: Math.round(Math.random()*1000)},
                                // {name: '内蒙古自治区', value: 891},
                                {name: '吉林省', value: Math.round(Math.random()*1000)},
                                {name: '福建省', value: Math.round(Math.random()*1000)},
                                {name: '广东省', value: Math.round(Math.random()*1000)},
                                {name: '西藏自治区', value: Math.round(Math.random()*1000)},
                                {name: '四川省', value: Math.round(Math.random()*1000)},
                                {name: '宁夏回族自治区', value: Math.round(Math.random()*1000)},
                                {name: '香港特别行政区', value: Math.round(Math.random()*1000)},
                                {name: '澳门特别行政区', value: Math.round(Math.random()*1000)}
                            ]
                        },
                        {
                            name: 'iphone5',
                            type: 'map',
                            mapType: 'china',
                            roam: true,
                            itemStyle: itemStyle,
                            showLegendSymbol: true,
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data:[
                                {name: '北京市',value: Math.round(Math.random()*1000)},
                                {name: '天津市',value: Math.round(Math.random()*1000)},
                                {name: '上海市',value: Math.round(Math.random()*1000)},
                                {name: '广东省',value: Math.round(Math.random()*1000)},
                                {name: '台湾省',value: Math.round(Math.random()*1000)},
                                {name: '香港特别行政区',value: Math.round(Math.random()*1000)},
                                {name: '澳门特别行政区',value: Math.round(Math.random()*1000)}
                            ]
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'main0', {
                    option: option,
                    height: 550
                });

                if (chart) {
                    chart.on('click', function (param) {
                        console.log(param);
                    });
                }
            });

        </script>













        <script>

            require([
                'echarts',
                'map/js/china'
            ], function (echarts) {
                var itemStyle = {
                    normal:{
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis:{
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                };
                var option = {
                    title: [{
                        text: '地图数据来源：天地图 cloudcenter.tianditu.gov.cn',
                        subtext: '仅作为功能测试使用，线上产品应从天地图获取最新地图数据并申请审图号',
                        link: 'https://cloudcenter.tianditu.gov.cn/',
                        bottom: 15,
                        left: 15,
                        textStyle: {
                            color: '#888',
                            fontSize: 12
                        },
                        subtextStyle: {
                            color: '#aaa',
                            fontSize: 12
                        }
                    }],
                    tooltip: {},
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data:['iphone3','iphone4','iphone5']
                    },
                    visualMap: {
                        min: 0,
                        max: 1500,
                        left: 'left',
                        top: 'bottom',
                        text:['高','低'],
                        calculable : true
                    },
                    selectedMode: 'multiple',
                    series: [
                        {
                            name: 'iphone3',
                            type: 'map',
                            map: 'china',
                            itemStyle: itemStyle,
                            showLegendSymbol: true,
                            center: [104.2, 36],
                            zoom: 1.4,
                            roam: true,
                            label: {
                                show: true,
                                rotate: 40,
                                formatter: '{b}：{value|{c}}',
                                backgroundColor: '#fff',
                                padding: [3, 5],
                                borderRadius: 3,
                                borderWidth: 1,
                                borderColor: 'rgba(0,0,0,0.5)',
                                color: '#934',
                                rich: {
                                    value: {
                                        color: '#019D2D',
                                        fontSize: 14
                                    }
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    backgroundColor: '#fcf'
                                },
                            },
                            data: [
                                {name: '北京市', value: 234},
                                {name: '天津市', value: 432},
                                {name: '新疆维吾尔自治区', value: 100},
                                {name: '陕西省', value: 77},
                                {name: '西藏自治区', value: 101}
                            ]
                        },
                        {
                            name: 'iphone4',
                            type: 'map',
                            mapType: 'china',
                            itemStyle: itemStyle,
                            center: [104.2, 36],
                            zoom: 1.4,
                            showLegendSymbol: true,
                            label: {
                                show: true,
                                rotate: 90,
                                formatter: '{b}：{value|{c}}',
                                backgroundColor: '#fff',
                                padding: [3, 5],
                                borderRadius: 3,
                                borderWidth: 1,
                                borderColor: 'rgba(0,0,0,0.5)',
                                color: '#934',
                                rich: {
                                    value: {
                                        color: '#019D2D',
                                        fontSize: 14
                                    }
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    backgroundColor: '#fcf'
                                }
                            },
                            data: [
                                {name: '北京市', value: 567},
                                {name: '河北省', value: 321},
                                {name: '新疆维吾尔自治区', value: 100},
                                {name: '内蒙古自治区', value: 99},
                                {name: '西藏自治区', value: 101}
                            ]
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'main1', {
                    option: option,
                    // recordCanvas: true,
                    title: [
                        '1. 北京、天津、河北 rich text 正常倾斜（河北竖直）（其他 region 都没数据，显示 NaN）',
                        '2. selectedMode: "multiple"',
                        '3. hover 时标签底色变红',
                        '所有 label 样式一致（例外：没数据的 label 并不 rotate，因为这还没支持）'
                    ]
                });

                chart && chart.on('click', function (param) {
                    console.log(param);
                });
            });

        </script>












        <script>

            require([
                'echarts',
                'map/js/china'
            ], function (echarts) {
                var locations = [{
                    name: '上海市',
                    coord: [121.472644, 31.231706]
                }, {
                    name: '北京市',
                    coord: [116.405285, 39.904989]
                }, {
                    name: '广东省',
                    coord: [113.280637, 23.839463714285714]
                }];
                option = {
                    title: [{
                        text: '地图数据来源：天地图 cloudcenter.tianditu.gov.cn',
                        subtext: '仅作为功能测试使用，线上产品应从天地图获取最新地图数据并申请审图号',
                        link: 'https://cloudcenter.tianditu.gov.cn/',
                        bottom: 15,
                        left: 15,
                        textStyle: {
                            color: '#888',
                            fontSize: 12
                        },
                        subtextStyle: {
                            color: '#aaa',
                            fontSize: 12
                        }
                    }],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}'
                    },
                    series: [
                        {
                            name: '中国',
                            type: 'map',
                            roam: true,
                            mapType: 'china',
                            selectedMode : 'multiple',
                            label: {
                                show: true
                            }
                        }
                    ]
                };
                var myChart = testHelper.create(echarts, 'main2', {
                    option: option,
                    height: 550,
                    title: ['Animation when changing map zoom and center']
                });
                var currentLoc = 0;
                myChart && setInterval(function () {
                    myChart.setOption({
                        series: [{
                            center: locations[currentLoc].coord,
                            zoom: 4,
                            data: [
                                {name: locations[currentLoc].name, selected: true}
                            ],
                            animationDurationUpdate: 1000,
                            animationEasingUpdate: 'cubicInOut'
                        }]
                    });
                    currentLoc = (currentLoc + 1) % locations.length;
                }, 2000);

            });

        </script>



    </body>
</html>