学会echarts地图图表，轻松绘制中国城市分布图案例教程

在数据可视化领域，ECharts 是一款功能强大且易于使用的 JavaScript 库，它可以帮助我们快速创建丰富的图表。今天，我们就来学习如何使用 ECharts 地图图表功能，绘制一幅中国城市分布图。

准备工作

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

安装 Node.js 和 npm：ECharts 是一个基于 JavaScript 的库，因此您需要 Node.js 和 npm 来安装它。
下载 ECharts：从 ECharts 的官方网站下载最新版本的 ECharts 库。
了解基本概念：熟悉 ECharts 的基本概念，如系列（series）、坐标轴（axis）、标记（mark）等。

创建 HTML 文件

首先，创建一个 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.2/echarts.min.js"></script>
    <script type="text/javascript">
        // ECharts 图表初始化代码将在这里编写
    </script>
</body>
</html>

配置地图数据

ECharts 地图图表需要地图数据，我们可以使用 echarts/map/js/china.js 来获取中国地图的数据。

// 引入中国地图数据
var myChart = echarts.init(document.getElementById('container'));
var geoCoordMap = {
    // 城市名称映射到经纬度
    '北京': [116.46, 39.92],
    '上海': [121.48, 31.22],
    // ... 其他城市
};

// 在这里添加更多城市和对应的经纬度

添加系列和配置项

接下来，我们添加一个地图系列，并设置相应的配置项。

var option = {
    title: {
        text: '中国城市分布图',
        subtext: '示例数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    bmap: {
        center: [105, 38],
        zoom: 4,
        roam: true,
        mapType: 'china'
    },
    series: [
        {
            name: '城市',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                // 这里可以添加一些示例数据，例如：
                // {name: '北京', value: Math.round(Math.random() * 1000)},
                // {name: '上海', value: Math.round(Math.random() * 1000)}
            ],
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            // 地图上的标记
            markPoint: {
                symbol: 'pin',
                symbolSize: 50,
                data: [
                    // 标记数据，例如：
                    // {name: '北京', value: Math.round(Math.random() * 1000), coord: geoCoordMap['北京']},
                    // {name: '上海', value: Math.round(Math.random() * 1000), coord: geoCoordMap['上海']}
                ]
            }
        }
    ]
};

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

测试和调整

保存 HTML 文件，并在浏览器中打开。
观察图表是否正常显示。
根据需要调整地图的缩放级别、城市标记的位置和大小等。

总结

通过以上步骤，您已经成功使用 ECharts 地图图表绘制了中国城市分布图。您可以继续添加更多城市数据，调整图表样式，使其更加符合您的需求。ECharts 提供了丰富的功能和选项，您可以通过官方文档深入了解和学习。