教你用 ECharts 快速上手地图图表：10个实用案例详解

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括地图图表。地图图表可以用来展示地理位置信息，是数据可视化中非常实用的一种形式。本文将详细介绍如何使用 ECharts 创建地图图表，并通过10个实用案例来帮助你快速上手。

案例一：中国地图展示

1.1 准备工作

首先，确保你的项目中已经引入了 ECharts 和对应的地图数据文件。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>

1.2 创建地图图表

接下来，创建一个 HTML 元素作为 ECharts 实例的容器。

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

然后，使用 JavaScript 初始化 ECharts 实例，并设置图表的配置项。

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

var option = {
    title: {
        text: '中国地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他省份数据
            ]
        }
    ]
};

myChart.setOption(option);

1.3 结果展示

运行上述代码，你将看到一个展示中国地图的图表，其中每个省份的数值都是随机生成的。

案例二：世界地图展示

2.1 准备工作

与世界地图相关的数据文件可以从 ECharts 官网下载。

2.2 创建地图图表

与世界地图相关的配置项与中国地图类似，只需将 mapType 属性设置为 'world'。

var option = {
    title: {
        text: '世界地图示例'
    },
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            label: {
                show: true
            },
            data: [
                {name: 'United States', value: Math.round(Math.random() * 1000)},
                // ... 其他国家数据
            ]
        }
    ]
};

案例三：自定义地图展示

3.1 准备工作

自定义地图需要使用 GeoJSON 格式的数据文件。

3.2 创建地图图表

使用自定义地图数据文件，配置项中的 mapType 属性设置为 'custom'。

var option = {
    title: {
        text: '自定义地图示例'
    },
    series: [
        {
            name: '自定义地图',
            type: 'map',
            mapType: 'custom',
            label: {
                show: true
            },
            data: [
                {name: '区域1', value: Math.round(Math.random() * 1000)},
                // ... 其他区域数据
            ]
        }
    ]
};

案例四：地图热力图展示

4.1 准备工作

热力图需要使用特定的数据格式，通常为二维数组。

4.2 创建地图图表

在 series 配置项中，将 type 属性设置为 'heatmap'。

var option = {
    title: {
        text: '地图热力图示例'
    },
    series: [
        {
            name: '热力图',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                // ... 热力图数据
            ]
        }
    ]
};

案例五：地图点击事件

5.1 准备工作

在地图图表的配置项中，设置 click 事件处理函数。

5.2 创建地图图表

var option = {
    title: {
        text: '地图点击事件示例'
    },
    series: [
        {
            name: '地图',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                // ... 地图数据
            ]
        }
    ]
};

myChart.on('click', function (params) {
    console.log(params.name); // 输出点击的省份名称
});

案例六：地图缩放与平移

6.1 准备工作

在地图图表的配置项中，设置 zoom 和 roam 属性。

6.2 创建地图图表

var option = {
    title: {
        text: '地图缩放与平移示例'
    },
    series: [
        {
            name: '地图',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            zoom: 1.2, // 初始缩放比例
            roam: true // 是否开启鼠标缩放和平移
        }
    ]
};

案例七：地图自定义样式

7.1 准备工作

在地图图表的配置项中，设置 itemStyle 属性来自定义地图元素的样式。

7.2 创建地图图表

var option = {
    title: {
        text: '地图自定义样式示例'
    },
    series: [
        {
            name: '地图',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            itemStyle: {
                areaColor: '#323c48', // 地图区域颜色
                borderColor: '#111' // 地图边框颜色
            }
        }
    ]
};

案例八：地图数据筛选

8.1 准备工作

在地图图表的配置项中，设置 data 属性来筛选显示的数据。

8.2 创建地图图表

var option = {
    title: {
        text: '地图数据筛选示例'
    },
    series: [
        {
            name: '地图',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 100},
                {name: '上海', value: 200},
                // ... 其他省份数据
            ]
        }
    ]
};

案例九：地图与折线图结合

9.1 准备工作

在地图图表的配置项中，设置 series 数组来同时展示地图和折线图。

9.2 创建地图图表

var option = {
    title: {
        text: '地图与折线图结合示例'
    },
    series: [
        {
            name: '地图',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                // ... 地图数据
            ]
        },
        {
            name: '折线图',
            type: 'line',
            coordinateSystem: 'geo',
            data: [
                // ... 折线图数据
            ]
        }
    ]
};

案例十：地图与散点图结合

10.1 准备工作

在地图图表的配置项中，设置 series 数组来同时展示地图和散点图。

10.2 创建地图图表

var option = {
    title: {
        text: '地图与散点图结合示例'
    },
    series: [
        {
            name: '地图',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                // ... 地图数据
            ]
        },
        {
            name: '散点图',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
                // ... 散点图数据
            ]
        }
    ]
};

通过以上10个实用案例，相信你已经对 ECharts 地图图表有了初步的了解。在实际应用中，你可以根据自己的需求进行相应的调整和优化。希望这篇文章能帮助你快速上手 ECharts 地图图表的制作。