在当今这个数据可视化无处不在的时代，地图图表成为了展示地理分布数据的绝佳方式。ECharts 是一款功能强大的开源 JavaScript 数据可视化库，它可以帮助我们轻松实现各种复杂的数据展示效果。其中，ECharts 地图图表功能尤为出色，能够绘制出清晰、美观的中国各省市经济地图。本文将详细介绍如何学会使用 ECharts 地图图表绘制中国各省市经济地图。
一、准备工作
在开始学习之前，请确保已经安装了 Node.js 和 npm。以下是具体的步骤：
安装 Node.js 和 npm
- 下载 Node.js 安装包：https://nodejs.org/
- 安装 Node.js 和 npm
创建一个新的项目文件夹
- 打开命令行工具
- 输入
mkdir my-project创建一个新的项目文件夹 - 切换到该文件夹：
cd my-project
初始化 npm
- 输入
npm init -y初始化 npm，按提示完成相关配置
- 输入
安装 ECharts 和 ECharts 中国地图
- 输入
npm install echarts echarts-map-china安装 ECharts 和 ECharts 中国地图
- 输入
二、引入 ECharts 和 ECharts 中国地图
- 在项目文件夹中创建一个
index.html文件，并添加以下内容：
<!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 src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/extension/echarts-map-china.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
// ECharts 图表代码将放在这里
</script>
</body>
</html>
- 在
<script>标签中，添加以下代码：
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('container'));
// 配置 ECharts 图表
var option = {
title: {
text: '中国各省市经济地图',
subtext: '数据来源：中华人民共和国国家统计局',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本，默认为数值文本
calculable: true
},
series: [
{
name: '经济地图',
type: 'map',
mapType: 'china',
roam: false,
label: {
show: true,
position: 'center',
formatter: '{b}'
},
itemStyle: {
areaColor: '#323c48',
borderColor: '#111'
},
data: [
// 各省市区经济数据，这里以随机数代替
{name: '北京', value: Math.round(Math.random() * 1000)},
// ... 其他省市
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
- 保存文件，并在浏览器中打开
index.html，即可看到中国各省市经济地图。
三、数据处理
在实际应用中，您需要将随机数替换为真实的省市经济数据。以下是几种获取数据的方法：
- 国家统计局官网：http://www.stats.gov.cn/
- 各省市区统计局官网
- 第三方数据平台：例如百度统计、腾讯统计等
将获取到的数据替换 option.series[0].data 中的 value 值，即可实现真实的中国各省市经济地图。
四、扩展
ECharts 地图图表功能非常强大，您可以通过以下方式进行扩展：
- 添加省份边框：
series[0].itemStyle.borderWidth = 1 - 修改颜色：
series[0].itemStyle.areaColor设置颜色值 - 添加热力图：
series[0].type = 'heatmap' - … 更多功能
通过不断学习和实践，您将能够掌握 ECharts 地图图表的精髓，轻松绘制出各种精美的地图图表。