学会echarts地图图表：轻松制作全国及城市分布案例教程

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括地图图表。地图图表可以用来展示地理数据，如国家、城市或地区的分布情况。本文将带你轻松学会如何使用 ECharts 制作全国及城市分布的地图图表。

准备工作

在开始之前，请确保你已经完成了以下准备工作：

1. 安装 ECharts：你可以从 ECharts 的官方网站下载 ECharts.js 文件，并将其引入到你的 HTML 文件中。
2. 准备地图数据：你需要准备相应的地图数据，通常以 JSON 格式提供。对于全国地图，你可以从 ECharts 官方网站下载；对于城市地图，你可能需要自己收集或从第三方获取。

创建基本地图图表

以下是一个创建全国地图图表的基本教程：

1. 引入 ECharts 和地图数据

在你的 HTML 文件中，首先引入 ECharts 和地图数据：

<!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>
</body>
</html>

2. 初始化图表

在 HTML 文件的 <script> 标签中，初始化图表：

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

var option = {
    title: {
        text: '中国地图示例'
    },
    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)},
                {name: '上海', value: Math.round(Math.random() * 1000)},
                // ... 其他城市数据
            ]
        }
    ]
};

myChart.setOption(option);

3. 预览效果

保存 HTML 文件，并在浏览器中打开，你应该能看到一个带有随机数据的全国地图图表。

制作城市分布地图

要制作城市分布地图，你需要准备城市级别的地图数据。以下是一个简单的例子：

series: [
    {
        name: '城市',
        type: 'map',
        mapType: 'city',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '北京市', value: Math.round(Math.random() * 1000)},
            {name: '上海市', value: Math.round(Math.random() * 1000)},
            // ... 其他城市数据
        ]
    }
]

请注意，mapType 属性需要设置为 'city'，并且你需要从 ECharts 官方网站下载对应城市的地图数据。

总结

通过以上步骤，你就可以轻松地使用 ECharts 制作全国及城市分布的地图图表了。你可以根据自己的需求调整图表的样式和数据，以展示更加丰富的地理信息。希望这篇文章能帮助你快速上手 ECharts 地图图表的制作。