案例

新手必看！轻松学会echarts地图图表制作，30个实用案例让你快速上手

2026-11-08 0 阅读

引言

在数据可视化领域，地图图表因其直观性和实用性而受到广泛欢迎。ECharts作为国内优秀的开源可视化库，提供了丰富的地图图表功能。对于新手来说，掌握ECharts地图图表的制作是进入数据可视化领域的敲门砖。本文将详细介绍ECharts地图图表的制作方法，并提供30个实用案例，帮助你快速上手。

一、ECharts地图图表基础知识

1.1 ECharts简介

ECharts是由百度开源的一个使用JavaScript实现的开源可视化库，它提供了一系列丰富的图表类型，包括折线图、柱状图、饼图、地图等。

1.2 地图图表类型

ECharts支持多种地图图表类型，如中国地图、世界地图、行政区划地图、自定义地图等。

1.3 地图图表制作步骤

  1. 准备地图数据：获取地图JSON文件或GeoJSON文件。
  2. 初始化地图图表：设置地图类型、配置地图参数。
  3. 绘制地图图表：添加数据系列、设置图表样式。
  4. 展示地图图表：将图表渲染到HTML页面。

二、30个实用案例解析

2.1 案例一：中国地图

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            type: 'map',
            mapType: 'china'
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.2 案例二：世界地图

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            type: 'map',
            mapType: 'world'
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.3 案例三：行政区划地图

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            type: 'map',
            mapType: 'province',
            map: '广东'
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.4 案例四：自定义地图

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            type: 'map',
            mapType: 'custom',
            map: 'customMap'
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.5 案例五：添加数据系列

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            type: 'map',
            mapType: 'china',
            data: [
                {name: '广东', value: 100},
                {name: '浙江', value: 80}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.6 案例七：设置地图样式

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.8 案例九：地图交互

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        }
    ]
};

// 监听点击事件
myChart.on('click', function (params) {
    if (params.componentType === 'series') {
        console.log('点击的省份：', params.name);
    }
});

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.10 案例十一：地图热力图

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            type: 'heatmap',
            mapType: 'china',
            data: [
                {name: '广东', value: 100},
                {name: '浙江', value: 80}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.12 案例十三：地图动画

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            type: 'map',
            mapType: 'china',
            animation: true,
            data: [
                {name: '广东', value: 100},
                {name: '浙江', value: 80}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.14 案例十五：地图标签

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            type: 'map',
            mapType: 'china',
            label: {
                show: true,
                formatter: '{b}: {c}'
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.16 案例十七：地图比例尺

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            visualMap: {
                min: 0,
                max: 100,
                calculable: true,
                left: 'left',
                top: 'bottom',
                text: ['高','低'],           // 文本，默认为数值文本
                textStyle: {
                    color: '#fff'
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.18 案例十九：地图图例

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['广东', '浙江']
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.20 案例二十一：地图 tooltip

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}'
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.22 案例二十三：地图地图点击事件

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}'
            },
            click: function (params) {
                console.log('点击的省份：', params.name);
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.24 案例二十五：地图地图拖拽

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}'
            },
            draging: true
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.26 案例二十七：地图地图缩放

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}'
            },
            zoom: true
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.28 案例二十九：地图地图旋转

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [
        {
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}'
            },
            rotation: true
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.30 案例三十：地图地图地图联动

// 初始化地图图表
var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));

// 指定图表的配置项和数据
var option1 = {
    series: [
        {
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}'
            }
        }
    ]
};

var option2 = {
    series: [
        {
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}'
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option1);
myChart2.setOption(option2);

// 联动两个地图图表
myChart1.on('click', function (params) {
    if (params.componentType === 'series') {
        myChart2.setOption({
            series: [
                {
                    type: 'map',
                    mapType: 'china',
                    data: [
                        {name: params.name, value: 100}
                    ]
                }
            ]
        });
    }
});

结语

通过以上30个实用案例，相信你已经对ECharts地图图表的制作有了更深入的了解。在实际应用中，你可以根据需求调整地图类型、样式、数据等参数，制作出更加精美的地图图表。希望本文能帮助你快速上手ECharts地图图表制作，开启数据可视化的旅程。

分享到：
上一篇 交通事故致人亡，刑法案例揭秘法律责任与后果
下一篇 小孩意外受伤，家长如何应对？过失致人重伤案例分析及预防措施

相关文章

交通事故致人亡，刑法案例揭秘法律责任与后果
2026-11-08
儿童误食药物，家长如何防范过失犯罪？深度解析典型案例与预防措施
2026-11-08
小孩意外受伤，家长如何应对？过失致人重伤案例分析及预防措施
2026-11-08
揭秘MongoDB大数据处理技巧：实战案例分析，轻松应对海量数据挑战
2026-11-08