教你用 ECharts 打造实用地图图表：10个实战案例详解

ECharts 是一款使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括地图图表。地图图表能够将地理信息以直观的方式展示出来，非常适合数据可视化分析。本文将详细介绍如何使用 ECharts 打造实用地图图表，并提供10个实战案例详解，帮助你快速掌握地图图表的制作技巧。

一、ECharts 地图图表的基本使用

1.1 引入 ECharts 和地图数据

首先，你需要引入 ECharts 的 JavaScript 库和对应的地图数据。以下是一个简单的示例：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/map/js/china.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));
    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);
</script>
</body>
</html>

1.2 配置项详解

在上面的示例中，我们使用了以下配置项：

• title：图表标题。
• tooltip：提示框组件。
• visualMap：视觉映射组件，用于控制图表的颜色和数值范围。
• series：系列列表，包含图表的具体数据。

二、实战案例详解

2.1 案例一：全球疫情地图

在这个案例中，我们将使用 ECharts 地图图表展示全球疫情数据。首先，你需要获取全球疫情数据，然后根据数据生成地图图表。

// ... 引入 ECharts 和地图数据

var myChart = echarts.init(document.getElementById('container'));
var option = {
    // ... 其他配置项
    series: [{
        name: '全球疫情地图',
        type: 'map',
        mapType: 'world',
        roam: true,
        label: {
            show: true
        },
        data: [
            // ... 全球疫情数据
        ]
    }]
};
myChart.setOption(option);

2.2 案例二：中国城市人口分布

在这个案例中，我们将使用 ECharts 地图图表展示中国各城市的人口分布情况。你需要获取中国各城市的人口数据，然后根据数据生成地图图表。

// ... 引入 ECharts 和地图数据

var myChart = echarts.init(document.getElementById('container'));
var option = {
    // ... 其他配置项
    series: [{
        name: '中国城市人口分布',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [
            // ... 中国城市人口数据
        ]
    }]
};
myChart.setOption(option);

2.3 案例三：中国各省GDP分布

在这个案例中，我们将使用 ECharts 地图图表展示中国各省的GDP分布情况。你需要获取中国各省的GDP数据，然后根据数据生成地图图表。

// ... 引入 ECharts 和地图数据

var myChart = echarts.init(document.getElementById('container'));
var option = {
    // ... 其他配置项
    series: [{
        name: '中国各省GDP分布',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [
            // ... 中国各省GDP数据
        ]
    }]
};
myChart.setOption(option);

2.4 案例四：中国城市空气质量指数

在这个案例中，我们将使用 ECharts 地图图表展示中国各城市的空气质量指数。你需要获取中国各城市的空气质量指数数据，然后根据数据生成地图图表。

// ... 引入 ECharts 和地图数据

var myChart = echarts.init(document.getElementById('container'));
var option = {
    // ... 其他配置项
    series: [{
        name: '中国城市空气质量指数',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [
            // ... 中国城市空气质量指数数据
        ]
    }]
};
myChart.setOption(option);

2.5 案例六：中国城市交通流量

在这个案例中，我们将使用 ECharts 地图图表展示中国各城市的交通流量。你需要获取中国各城市的交通流量数据，然后根据数据生成地图图表。

// ... 引入 ECharts 和地图数据

var myChart = echarts.init(document.getElementById('container'));
var option = {
    // ... 其他配置项
    series: [{
        name: '中国城市交通流量',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [
            // ... 中国城市交通流量数据
        ]
    }]
};
myChart.setOption(option);

2.7 案例八：中国城市房价分布

在这个案例中，我们将使用 ECharts 地图图表展示中国各城市的房价分布情况。你需要获取中国各城市的房价数据，然后根据数据生成地图图表。

// ... 引入 ECharts 和地图数据

var myChart = echarts.init(document.getElementById('container'));
var option = {
    // ... 其他配置项
    series: [{
        name: '中国城市房价分布',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [
            // ... 中国城市房价数据
        ]
    }]
};
myChart.setOption(option);

2.9 案例十：中国城市人口密度

在这个案例中，我们将使用 ECharts 地图图表展示中国各城市的人口密度。你需要获取中国各城市的人口密度数据，然后根据数据生成地图图表。

// ... 引入 ECharts 和地图数据

var myChart = echarts.init(document.getElementById('container'));
var option = {
    // ... 其他配置项
    series: [{
        name: '中国城市人口密度',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [
            // ... 中国城市人口密度数据
        ]
    }]
};
myChart.setOption(option);

三、总结

通过本文的介绍，相信你已经掌握了使用 ECharts 打造实用地图图表的方法。在实际应用中，你可以根据自己的需求选择合适的地图类型、数据来源和图表样式，将地图图表应用于各种场景。希望本文对你有所帮助！