教你用 ECharts 快速制作地图图表：10个实用案例，轻松入门！

ECharts 是一款使用 JavaScript 实现的开源可视化库，它提供了一整套图表绘制方案，能够帮助开发者快速创建数据可视化作品。其中，地图图表是 ECharts 中非常受欢迎的一种图表类型，因为它能够直观地展示地理分布和数据关联。下面，我将通过 10 个实用案例，带你轻松入门 ECharts 地图图表的制作。

案例 1：中国地图基本展示

1.1 准备工作

首先，你需要引入 ECharts 的地图模块和相关主题文件。在你的 HTML 文件中添加以下代码：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/map/js/china.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.css">

1.2 添加地图元素

在你的 HTML 文件中，添加一个用于绘制地图的 div 元素：

<div id="chinaMap" style="width: 600px;height:400px;"></div>

1.3 配置地图

在你的 JavaScript 文件中，创建一个地图图表实例，并配置其选项：

var myChart = echarts.init(document.getElementById('chinaMap'));

var option = {
    title: {
        text: '中国地图基本展示'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '销量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '天津', value: Math.round(Math.random() * 1000)},
                // ... 其他城市
            ]
        }
    ]
};

myChart.setOption(option);

1.4 运行效果

将上述代码保存到 HTML 和 JavaScript 文件中，并在浏览器中打开 HTML 文件。你会看到一个带有中国地图的图表，地图上会随机显示一些城市的销量数据。

案例 2：全球地图基本展示

与案例 1 类似，你只需要将 mapType: 'china' 修改为 mapType: 'world'，并引入相应的世界地图主题文件即可。

案例 3：省市区三级联动地图

通过使用 ECharts 的 mapType 属性，你可以轻松实现省市区三级联动地图。下面以展示某个省份的地图为例：

3.1 引入相关文件

在你的 HTML 文件中引入省市区地图主题文件：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/map/js/china.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/map/js/province/${provinceCode}.js"></script>

3.2 配置地图

在 JavaScript 文件中，创建地图实例并配置选项：

var myChart = echarts.init(document.getElementById('map'));

var option = {
    title: {
        text: '省市区三级联动地图'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '销量',
            type: 'map',
            mapType: `${provinceCode}`,
            roam: true,
            label: {
                show: true
            },
            data: [
                // ... 省市区的销量数据
            ]
        }
    ]
};

myChart.setOption(option);

案例 4：地图热力图

使用 ECharts 的热力图功能，可以展示地图上的密集区域。以下是一个简单的例子：

var myChart = echarts.init(document.getElementById('heatmap'));

var option = {
    title: {
        text: '地图热力图'
    },
    tooltip: {
        trigger: 'item',
        formatter: function(params) {
            return params.name + ': ' + params.value;
        }
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '热力值',
            type: 'heatmap',
            data: [
                // ... 地图上的热力数据
            ]
        }
    ]
};

myChart.setOption(option);

案例 5：地图点击事件

ECharts 支持为地图元素绑定点击事件，以下是一个简单的例子：

myChart.on('click', function (params) {
    console.log(params.name);
});

案例 6：地图动画效果

使用 ECharts 的动画功能，可以创建地图的动画效果。以下是一个简单的例子：

var myChart = echarts.init(document.getElementById('animation'));

var option = {
    title: {
        text: '地图动画效果'
    },
    series: [
        {
            type: 'map',
            mapType: 'china',
            animation: true,
            label: {
                show: true
            },
            data: [
                // ... 数据
            ]
        }
    ]
};

myChart.setOption(option);

案例 7：地图多级标注

在地图上添加多个标注，可以使用 ECharts 的 markPoint 元素。以下是一个简单的例子：

var myChart = echarts.init(document.getElementById('markPoint'));

var option = {
    title: {
        text: '地图多级标注'
    },
    series: [
        {
            type: 'map',
            mapType: 'china',
            markPoint: {
                data: [
                    {name: '北京', value: 100},
                    {name: '上海', value: 200},
                    // ... 其他标注
                ]
            }
        }
    ]
};

myChart.setOption(option);

案例 8：地图自定义样式

你可以通过修改地图元素的样式，使其更符合你的需求。以下是一个简单的例子：

var myChart = echarts.init(document.getElementById('style'));

var option = {
    title: {
        text: '地图自定义样式'
    },
    series: [
        {
            type: 'map',
            mapType: 'china',
            itemStyle: {
                normal: {
                    areaColor: '#f1f1f1'
                }
            },
            label: {
                show: true
            },
            data: [
                // ... 数据
            ]
        }
    ]
};

myChart.setOption(option);

案例 9：地图联动

在多个地图之间实现联动效果，可以创建一个 ECharts 实例数组，并设置它们的 roam 属性为 true。以下是一个简单的例子：

var myChart1 = echarts.init(document.getElementById('map1'));
var myChart2 = echarts.init(document.getElementById('map2'));

myChart1.setOption({
    title: {
        text: '地图联动'
    },
    series: [
        {
            type: 'map',
            mapType: 'china',
            roam: true,
            // ... 其他配置
        }
    ]
});

myChart2.setOption({
    title: {
        text: '地图联动'
    },
    series: [
        {
            type: 'map',
            mapType: 'china',
            roam: true,
            // ... 其他配置
        }
    ]
});

案例 10：地图与数据图表结合

在地图上展示数据图表，可以创建一个组合图表。以下是一个简单的例子：

var myChart = echarts.init(document.getElementById('combined'));

var option = {
    title: {
        text: '地图与数据图表结合'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: [
            // ... 图例数据
        ]
    },
    series: [
        {
            name: '销量',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                // ... 数据
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        {
            name: '销量',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                // ... 地图数据
            ]
        }
    ]
};

myChart.setOption(option);

通过以上 10 个案例，相信你已经对 ECharts 地图图表的制作有了一定的了解。在实际应用中，你可以根据自己的需求，结合 ECharts 的其他功能，制作出更多富有创意的地图图表。祝你学习愉快！