echarts中国地图geo组件常用api（笔记）

最新推荐文章于 2026-05-21 07:37:08 发布

原创最新推荐文章于 2026-05-21 07:37:08 发布 · 3.3k 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #数据可视化

echarts笔记专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何使用ECharts和地图插件配置中国地图，包括背景颜色、标题样式、地图缩放和平移、地区颜色定制及自定义地区名称映射等关键配置。通过实例展示，帮助读者快速掌握地图组件的高级应用。

// 引入echarts文件和地图文件
<script src="./echarts.js"></script>
<script src="./china.js"></script>

let regions = [{
        name: '中原',
        itemStyle: {
            normal: { areaColor: 'blue' }
        }
    }, {
        name: '北京',
        itemStyle: {
            normal: { areaColor: '#f44336' }
        }
    }, {
        name: '新疆',
        itemStyle: {
            emphasis: { areaColor: '#f44336' }
        }
    }]

var mychart = echarts.init(document.querySelector('#map'));
var option = {
        backgroundColor:'#404a59', //设置地图外的背景颜色
        title: { // 标题配置
            text: '地图demo', 
            subtext: 'api测试', // 子标题
            textStyle: {
                color: '#e57373',
                fontWeight: 'normal',
                fontSize: 20,
                lineHeight: 30
            },
            subtextStyle: {
                color: '#42a5f5',
                fontSize: 15
            },
            left: 'center', // 居中显示，可设置数值
        }
        geo: { // 地图组件配置
            map: 'china', // 选择地图
            label: { // 绑定文本的设置
            	normal: {  // 初始状态配置
            	fontSize: 13
            	}
                emphasis: { // 选中板块的配置，api与normal相同
                    show: true, // 是否显示文本
                    color: '#fff',
                },
                formatter: '{a}ok' // 标签显示内容,字符创与函数两种格式,附带多种变量用法↓
                // https://echarts.apache.org/zh/option.html#geo.label.formatter
            },
            roam: true, //可缩放和平移
            scaleLimit: { //缩放比例
                min: 1,
                max: 2
            },
            itemStyle: { // 选中板块配置
                normal: { // 初始样式
                    areaColor: '#323c48', // 地图颜色
                    borderColor: '#020', //线条颜色
                    borderType: 'dotted', //边框样式
                    opacity: '.8'
                },
                emphasis: { //选中后
                    areaColor: '#2a333d' //鼠标移入颜色
                }
            },
            nameMap: { // 自定义地区的名称映射 'china': '中国'
                '河南': '中原',
                '安徽': '安庆府'
            },
            selectedMode: 'single', //点击板块会高亮选中板块，默认多选
            regions: regions // 在地图中对特定的区域配置样式,灵活操作
        },
        series:[]
    }