从城市地图到世界版图，教你用echarts轻松绘制地图图表实战案例解析

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括折线图、柱状图、饼图、地图等。其中，地图图表以其直观的地理空间展示方式，在数据可视化中占据着重要地位。本文将带你从城市地图到世界版图，一步步学习如何使用 ECharts 轻松绘制地图图表。

一、ECharts 地图图表基础

1.1 地图数据格式

在使用 ECharts 绘制地图之前，需要准备地图数据。ECharts 支持多种地图数据格式，如 GeoJSON、XML 等。对于国内地图，通常使用百度地图或者高德地图提供的 JSON 数据。

1.2 地图配置项

ECharts 地图图表配置项主要包括以下几个部分：

series：地图系列配置，定义地图上需要展示的数据。
visualMap：视觉映射配置，用于设置颜色映射。
geo：地理坐标系配置，定义地图的基本形状和样式。

二、实战案例：绘制中国城市地图

2.1 准备地图数据

以百度地图为例，获取中国城市地图数据，下载 JSON 文件。

2.2 创建 HTML 文件

创建一个 HTML 文件，引入 ECharts 库和地图数据。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
    <!-- 引入中国地图数据 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/map/js/china.js"></script>
</head>
<body style="height: 100%; margin: 0">
    <!-- 准备一个用于绘图的 DOM 容器 -->
    <div id="container" style="height: 100%"></div>
</body>
</html>

2.3 配置 ECharts 地图

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('container'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市地图'
    },
    tooltip: {
        trigger: 'item'
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'china',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                // 这里添加具体城市数据
            ]
        }
    ]
};

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

2.4 添加数据

根据实际需求，将城市数据添加到 data 数组中。

var option = {
    // ...其他配置项
    series: [
        {
            // ...其他系列配置项
            data: [
                {name: '北京', value: 100},
                {name: '上海', value: 200},
                // ...其他城市数据
            ]
        }
    ]
};

三、实战案例：绘制世界地图

3.1 准备地图数据

与绘制中国城市地图类似，获取世界地图数据，下载 JSON 文件。

3.2 配置 ECharts 地图

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('container'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '世界地图'
    },
    tooltip: {
        trigger: 'item'
    },
    geo: {
        map: 'world',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'world',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                // 这里添加具体国家数据
            ]
        }
    ]
};

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

3.3 添加数据

根据实际需求，将国家数据添加到 data 数组中。

var option = {
    // ...其他配置项
    series: [
        {
            // ...其他系列配置项
            data: [
                {name: '美国', value: 100},
                {name: '中国', value: 200},
                // ...其他国家数据
            ]
        }
    ]
};

四、总结

通过本文的讲解，相信你已经掌握了使用 ECharts 绘制地图图表的基本方法。在实际应用中，可以根据需求调整地图样式、数据等配置项，使地图图表更加美观、直观。希望这篇文章对你有所帮助！