ECharts 是一款使用 JavaScript 实现的开源可视化库，它能够帮助开发者轻松创建交互式图表。地图图表是 ECharts 中非常实用的一类图表，可以帮助用户直观地展示地理分布数据。今天，我们就来聊聊如何使用 ECharts 地图图表，通过10个实用案例，带你轻松绘制中国地图。
案例一：中国地图基础展示
首先，我们需要准备中国地图的数据。ECharts 提供了丰富的地图数据，我们可以直接使用这些数据来绘制中国地图。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');
// 初始化地图实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
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);
案例二：中国地图省份颜色分级
通过设置 visualMap 组件，我们可以对地图进行颜色分级，以突出不同省份的数据差异。
// ...（与案例一相同）
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)},
// ... 其他城市数据
],
itemStyle: {
normal: {
areaColor: '#323c48'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
]
// ...（与案例一相同）
案例三：中国地图城市名称显示
通过设置 label 的 show 属性为 true，可以显示城市名称。
// ...（与案例一相同）
series: [
{
name: '中国地图',
type: 'map',
mapType: 'china',
roam: true,
label: {
show: true,
formatter: '{b}'
},
data: [
{name: '北京',value: Math.round(Math.random() * 1000)},
{name: '上海',value: Math.round(Math.random() * 1000)},
// ... 其他城市数据
]
}
]
// ...（与案例一相同）
案例四：中国地图点击事件
通过监听点击事件，可以获取被点击的城市信息。
// ...（与案例一相同）
myChart.on('click', function (params) {
console.log(params.name); // 输出被点击的城市名称
});
// ...（与案例一相同）
案例五：中国地图缩放控制
通过设置 roam 属性为 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)},
// ... 其他城市数据
]
}
]
// ...（与案例一相同）
案例六：中国地图热力图效果
通过设置 data 属性，可以给地图添加热力图效果。
// ...（与案例一相同）
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)},
// ... 其他城市数据
],
itemStyle: {
normal: {
label: {
show: true
}
},
emphasis: {
label: {
show: true
}
}
},
// 添加热力图效果
labelLine: {
show: true,
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
}
}
]
// ...（与案例一相同）
案例七：中国地图自定义标记
通过设置 markPoint 属性，可以给地图添加自定义标记。
// ...（与案例一相同）
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)},
// ... 其他城市数据
],
markPoint: {
symbol: 'pin',
symbolSize: 50,
data: [
{name: '北京',value: Math.round(Math.random() * 1000)},
{name: '上海',value: Math.round(Math.random() * 1000)},
// ... 其他城市数据
]
}
}
]
// ...（与案例一相同）
案例八：中国地图数据筛选
通过设置 data 属性，可以筛选出特定城市的数据。
// ...（与案例一相同）
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)},
// ... 其他城市数据
],
// 数据筛选
data: [
{name: '北京',value: Math.round(Math.random() * 1000)},
{name: '上海',value: Math.round(Math.random() * 1000)}
]
}
]
// ...（与案例一相同）
案例九：中国地图数据聚合
通过设置 data 属性，可以将相邻城市的数据进行聚合。
// ...（与案例一相同）
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)},
// ... 其他城市数据
],
// 数据聚合
data: [
{name: '北京',value: Math.round(Math.random() * 1000)},
{name: '上海',value: Math.round(Math.random() * 1000)}
]
}
]
// ...（与案例一相同）
案例十：中国地图多层级展示
通过设置 data 属性，可以展示不同层级的地图数据。
// ...（与案例一相同）
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)},
// ... 其他城市数据
],
// 多层级展示
data: [
{name: '北京',value: Math.round(Math.random() * 1000)},
{name: '上海',value: Math.round(Math.random() * 1000)},
// ... 其他城市数据
]
}
]
// ...（与案例一相同）
以上是10个 ECharts 地图图表的实用案例，通过这些案例，相信你已经能够轻松绘制中国地图了。当然，ECharts 地图图表的功能远不止这些，更多精彩内容，请继续关注 ECharts 官方文档。