一、准备工作：环境搭建与数据准备
- 引入 ECharts 库
TypeScript
取消自动换行复制
<!-- 引入 ECharts 核心库 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<!-- 引入中国地图数据（按需引入其他地图） -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/map/js/china.js"></script>
- 准备容器
在 HTML 中创建一个用于显示地图的容器：
TypeScript
取消自动换行复制
<div id="mapChart" style="width: 800px; height: 600px;"></div>
二、绘制基础地图：3 步搞定
- 初始化 ECharts 实例
TypeScript
取消自动换行复制
const chart = echarts.init(document.getElementById('mapChart'));
- 配置基础地图选项
TypeScript
取消自动换行复制
const option = {
title: { text: '中国地图基础示例', left: 'center' }, // 标题
tooltip: {}, // 提示框（鼠标悬停显示数据）
series: [
{
type: 'map', // 声明地图类型
map: 'china', // 指定地图名称（需与引入的地图数据匹配）
label: { show: true } // 显示省份名称
}
]
};
- 渲染地图
TypeScript
取消自动换行复制
chart.setOption(option);
效果：显示带有省份名称的中国地图，鼠标悬停显示省份名称。
三、数据可视化：让地图 "动" 起来
- 添加数据系列
假设我们有各省份的数值数据（如人口、GDP），格式为 [{name: '省份', value: 数值}]：
TypeScript
取消自动换行复制
const data = [
{name: '北京', value: 2189},
{name: '上海', value: 2487},
{name: '广东', value: 12684},
{name: '四川', value: 8367},
// 其他省份数据...
];
- 更新配置项
在 series 中添加数据，并通过 visualMap 配置颜色映射：
TypeScript
取消自动换行复制
const option = {
// 其他配置...
series: [
{
type: 'map',
map: 'china',
data: data, // 绑定数据
itemStyle: { // 地图样式
normal: { areaColor: '#e6f3ff' }, // 正常状态颜色
emphasis: { areaColor: '#99ccff' } // 鼠标hover时颜色
}
}
],
visualMap: { // 颜色渐变条
min: 0, // 数据最小值
max: 15000, // 数据最大值
range: ['#b3e0ff', '#409eff', '#0059b3'], // 颜色范围
orient: 'horizontal', // 水平方向
bottom: 10 // 位置在底部
}
};
效果：地图根据数据显示不同颜色，颜色越深数值越高，底部显示颜色对应关系。
四、交互优化：提升用户体验
- 自定义提示框（Tooltip）
让提示框显示更详细的信息（如 "省份名称：数值"）：
TypeScript
取消自动换行复制
option.tooltip = {
formatter: function(params) { // params 包含当前点击/悬停的省份数据
return `{params.name}：{params.value} 万`;
}
};
- 添加点击事件
实现点击省份时弹出提示：
TypeScript
取消自动换行复制
chart.on('click', function(params) {
alert(`{params.name} 的数值是：{params.value}`);
});
五、实战案例：疫情数据可视化
完整代码示例
TypeScript
取消自动换行复制
// 初始化图表
const chart = echarts.init(document.getElementById('mapChart'));
// 模拟疫情数据（确诊人数）
const covidData = [
{name: '湖北', value: 6812}, {name: '广东', value: 2305},
{name: '河南', value: 1273}, {name: '浙江', value: 1244},
// 其他省份数据...
];
// 配置项
const option = {
title: { text: '全国疫情确诊人数分布', left: 'center' },
tooltip: { formatter: '{b}：{c} 例' }, // {b}省份名，{c}数值
series: [{
type: 'map',
map: 'china',
data: covidData,
itemStyle: { emphasis: { label: { show: true } } } // 点击时显示名称
}],
visualMap: {
max: 8000,
range: ['#ffcccc', '#ff9999', '#ff6666'] // 红色系渐变
}
};
// 渲染
chart.setOption(option);
效果：点击省份显示确诊数，颜色越红表示数值越高，底部颜色条直观展示数据范围。
六、常见问题与解决方案
|--------|-------------------------------------------------------------------------|
| 问题 | 解决方案 |
| 地图不显示 | 检查地图数据是否正确引入（如china.js），地图名称（map: 'china'）是否匹配 |
| 数据不生效 | 确保数据格式为[{name: '省份', value: 数值}]，且省份名称与地图内置名称一致（如 "宁夏" 而非 "宁夏回族自治区"） |
| 颜色不渐变 | 检查visualMap的min/max是否覆盖数据范围，颜色数组长度至少为 2 |
总结
ECharts 地图开发只需掌握三个核心步骤：
- 引入地图数据 → 2. 配置基础选项 → 3. 绑定数据与样式通过简单的代码组合，就能实现专业的数据可视化效果。建议初学者从官方地图示例入手，逐步尝试自定义样式和交互逻辑。
如果需要进阶学习（如区县地图、3D 地图、动态数据更新），可以在 ECharts 官网查阅更详细的地图配置文档，或留言告诉我你的需求，后续会推出更多实战教程！