ECharts 是一个使用 JavaScript 实现的开源可视化库，它能够帮助开发者轻松创建各种数据可视化图表。其中，地图图表是 ECharts 提供的丰富功能之一，特别适合展示地理位置相关的数据。在本案例中，我们将学习如何使用 ECharts 绘制中国城市分布图。

一、准备工作

在开始绘制地图之前，我们需要准备以下内容：

  1. ECharts 库：首先，确保你的项目中已经引入了 ECharts 库。可以通过 CDN 链接或者下载源码的方式引入。
  2. 地图数据：ECharts 地图图表需要地图数据作为基础，这通常是一个 GeoJSON 格式的文件，描述了地图的各个区域和属性。对于中国地图，可以从 ECharts 官方网站或者第三方数据源获取。
  3. 城市数据：你需要准备一个包含城市名称和对应坐标的 JSON 数据文件，以便在地图上定位各个城市。

二、基本步骤

1. 初始化图表

在 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>
<script src="your_city_data.js"></script>
<script type="text/javascript">
    // ECharts 初始化代码
</script>
</body>
</html>

2. 配置图表

在 <script> 标签中，初始化 ECharts 实例，并配置图表的选项。

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

var option = {
    title: {
        text: '中国城市分布图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '城市数量',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: your_city_data
        }
    ]
};

myChart.setOption(option);

3. 添加城市数据

在 your_city_data.js 文件中，定义城市数据的 JSON 对象。

var your_city_data = [
    {name: '北京', value: 500},
    {name: '上海', value: 300},
    // ... 其他城市数据
];

三、案例解析

在这个案例中，我们首先引入了 ECharts 库和中国地图数据。然后，在 HTML 中创建了一个用于绘制图表的容器。在 JavaScript 中，我们初始化了 ECharts 实例，并配置了图表的选项，包括标题、提示框、视觉映射、地理组件和系列数据。

特别需要注意的是，series 中的 data 属性应该与你的城市数据文件中的数据相匹配。每个数据对象包含城市名称和对应的城市数量，这将决定地图上每个城市点的颜色深浅。

四、总结

通过以上步骤，你可以轻松地使用 ECharts 绘制中国城市分布图。ECharts 提供了丰富的配置选项，允许你自定义图表的外观和行为。通过实践和探索，你可以创造出更多具有创意和实用价值的地图图表。