教你用 ECharts 快速制作地图图表：5个实用案例解析

在数据可视化领域，地图图表因其直观性和地域关联性，成为了展示地理分布数据的重要工具。ECharts 作为一款强大的开源可视化库，提供了丰富的地图图表功能。本文将带你通过5个实用案例，快速掌握如何使用 ECharts 制作地图图表。

案例一：中国31省市区地图

步骤1：引入 ECharts 和地图数据

首先，你需要引入 ECharts 的 JavaScript 库和对应的地图数据文件。这里以中国31省市区地图为例：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>

步骤2：初始化地图实例

在 HTML 中创建一个容器元素，并为其设置宽高：

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

然后，在 JavaScript 中初始化 ECharts 实例：

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

步骤3：配置地图图表

接下来，配置地图图表的选项。这里以中国31省市区地图为例：

var option = {
    title: {
        text: '中国31省市区地图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        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)},
                // ... 其他省份数据
            ]
        }
    ]
};

步骤4：渲染地图图表

最后，使用 myChart.setOption(option) 方法渲染地图图表。

案例二：世界地图

步骤1：引入世界地图数据

与中国地图类似，你需要引入世界地图数据文件：

<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>

步骤2：配置世界地图图表

配置选项与中国地图类似，只需将 mapType 属性设置为 'world'：

option = {
    // ... 其他配置
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            // ... 其他配置
        }
    ]
};

步骤3：渲染地图图表

使用 myChart.setOption(option) 方法渲染世界地图图表。

案例三：散点地图

步骤1：引入散点地图数据

散点地图需要引入散点数据文件，这里以中国城市数据为例：

<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/province.js"></script>

步骤2：配置散点地图图表

在 series 数组中添加散点数据：

option = {
    // ... 其他配置
    series: [
        {
            name: '散点',
            type: 'map',
            mapType: 'china',
            data: [
                {name: '北京',value: [116.46,39.92]},
                // ... 其他城市数据
            ]
        }
    ]
};

步骤3：渲染地图图表

使用 myChart.setOption(option) 方法渲染散点地图图表。

案例四：热力地图

步骤1：引入热力地图数据

热力地图需要引入热力数据文件，这里以中国城市数据为例：

<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/province.js"></script>

步骤2：配置热力地图图表

在 series 数组中添加热力数据：

option = {
    // ... 其他配置
    series: [
        {
            name: '热力',
            type: 'map',
            mapType: 'china',
            data: [
                {name: '北京',value: [116.46,39.92]},
                // ... 其他城市数据
            ]
        }
    ]
};

步骤3：渲染地图图表

使用 myChart.setOption(option) 方法渲染热力地图图表。

案例五：多地图组合

步骤1：引入多地图数据

多地图组合需要引入多个地图数据文件，这里以中国和世界地图为例：

<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>

步骤2：配置多地图组合图表

在 series 数组中添加多个地图实例：

option = {
    // ... 其他配置
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            // ... 其他配置
        },
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            // ... 其他配置
        }
    ]
};

步骤3：渲染地图图表

使用 myChart.setOption(option) 方法渲染多地图组合图表。

通过以上5个实用案例，相信你已经掌握了使用 ECharts 制作地图图表的基本方法。在实际应用中，你可以根据自己的需求进行修改和扩展。祝你在数据可视化领域取得更好的成果！