用echarts.js制作中国地图,点击对应的省市链接到指定页面

最新推荐文章于 2025-07-21 15:43:22 发布

原创最新推荐文章于 2025-07-21 15:43:22 发布 · 4.9k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #java

工作专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用ECharts2实现中国地图上省份的选择效果，并通过点击省份触发跳转至不同网址的功能。文章提供了完整的HTML和JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里使用的是ECharts 2,因为用EChart 3制作的地图上的省市文字标识会有重叠,推测是引入的地图文件china.js,绘制文字的坐标方面的问题,所以,这里还是使用老版本。

ECharts 2需要require加载模块。html中只需要用script引入echarts.js即可。

具体代码如下：

按 Ctrl+C 复制代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts.js插件实现中国地图省份选择效果</title>
    <style>
        *{margin:0;padding:0;}
    </style>
</head>
<body>
    <div id="main" style="height:500px"></div>
    <script src="dist/echarts.js"></script>
    <script>
        // 路径配置
        require.config({
            paths: {
                echarts: 'dist'
            }
        });
        // 使用
        require(['echarts','echarts/chart/map'],function (ch) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ch.init(document.getElementById('main'));
            option = {
                tooltip : {
                    trigger: 'item',
                    formatter: '{b}'
                },
                series : [{
                    name: '中国',
                    type: 'map',
                    mapType: 'china',
                    selectedMode : 'single',//multiple多选
                    itemStyle:{
                        normal:{
                            label:{
                                show:true,
                                textStyle: {
                                    color: "#231816"
                                }
                            },
                            areaStyle:{color:'#B1D0EC'},
                            color:'#B1D0EC',
                            borderColor:'#dadfde'//区块的边框颜色
                        },
                        emphasis:{//鼠标hover样式
                            label:{
                                show:true,
                                textStyle:{
                                    color:'#fa4f04'
                                }
                            }
                        }
                    },
                    data:[
                        {name:'四川',selected:true}
                    ]
                }]
            };
            var ecConfig = require('echarts/config');
            myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
                var selected = param.selected;
                var urlArr = ['http://www.baidu.com','http://http://www.cnblogs.com/sapho'];
                for (var p in selected) {
                    if (selected[p]) {
                        switch(p){
                            case '河南':
                                location.href = urlArr[0];
                                break;
                            case '重庆':
                                location.href = urlArr[1];
                                break;
                            default:
                                break;
                        }

}
                }
            });
            // 为echarts对象加载数据
            myChart.setOption(option);
        });
    </script>
</body>
</html>

按 Ctrl+C 复制代码

文件结构如下: