ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括地图图表。地图图表能够将地理信息以直观的方式展现出来，非常适合于展示地域分布、迁徙路径、区域对比等数据。以下，我将通过 10 个实用案例，带你轻松上手地图可视化。
案例一：中国地图展示
主题句：通过 ECharts 制作一个展示中国地图的基础案例。
代码示例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '中国地图示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '中国',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '上海', value: Math.round(Math.random() * 1000)},
// ... 其他省份数据
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例二：世界地图展示
主题句：学习如何将 ECharts 应用于世界地图的展示。
代码示例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '世界地图示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '世界',
type: 'map',
mapType: 'world',
label: {
show: true
},
data: [
{name: 'China', value: Math.round(Math.random() * 1000)},
{name: 'United States', value: Math.round(Math.random() * 1000)},
// ... 其他国家数据
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例三：迁徙路线图
主题句：探索如何使用 ECharts 创建迁徙路线图。
代码示例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '迁徙路线图示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '迁徙路线',
type: 'lines',
coordinateSystem: 'geo',
data: [
{name: '北京', coords: [[116.46, 39.92]]},
{name: '深圳', coords: [[114.05, 22.52]]},
// ... 其他迁徙路线数据
],
// ... 其他配置项
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例四：区域对比图
主题句：学习如何使用 ECharts 制作区域对比图。
代码示例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '区域对比图示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '区域对比',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{name: '北京', value: 335},
{name: '上海', value: 310},
// ... 其他区域数据
],
// ... 其他配置项
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例五：多级地图展示
主题句：掌握如何使用 ECharts 制作多级地图展示。
代码示例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '多级地图展示示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '多级地图',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '上海', value: Math.round(Math.random() * 1000)},
// ... 其他省份数据
],
// ... 其他配置项
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例六：热力图展示
主题句：学习如何使用 ECharts 制作热力图展示。
代码示例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '热力图展示示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '热力图',
type: 'heatmap',
data: [
[116.46, 39.92, 1],
[114.05, 22.52, 2],
// ... 其他数据
],
// ... 其他配置项
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例七：区域点击事件
主题句：了解如何为地图添加区域点击事件。
代码示例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '区域点击事件示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '区域点击事件',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '上海', value: Math.round(Math.random() * 1000)},
// ... 其他省份数据
],
// ... 其他配置项
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 为地图添加点击事件
myChart.on('click', function (params) {
console.log(params.name); // 点击的省份名称
});
案例八：地图动画效果
主题句：学习如何为地图添加动画效果。
代码示例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '地图动画效果示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '动画效果',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '上海', value: Math.round(Math.random() * 1000)},
// ... 其他省份数据
],
// ... 其他配置项
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 添加动画效果
myChart.showLoading();
setTimeout(function () {
myChart.hideLoading();
}, 2000);
案例九：地图缩放与平移
主题句：了解如何控制地图的缩放与平移。
代码示例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '地图缩放与平移示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '缩放与平移',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '上海', value: Math.round(Math.random() * 1000)},
// ... 其他省份数据
],
// ... 其他配置项
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 添加缩放与平移事件
myChart.on('click', function (params) {
if (params.componentType === 'series') {
myChart.dispatchAction({
type: 'geoZoom',
// ... 配置项
});
}
});
案例十：地图交互效果
主题句：探索如何为地图添加交互效果。
代码示例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '地图交互效果示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '交互效果',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '上海', value: Math.round(Math.random() * 1000)},
// ... 其他省份数据
],
// ... 其他配置项
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 添加交互效果
myChart.on('mouseover', function (params) {
if (params.componentType === 'series') {
// ... 鼠标移入时的交互效果
}
});
myChart.on('mouseout', function (params) {
if (params.componentType === 'series') {
// ... 鼠标移出时的交互效果
}
});
通过以上 10 个案例，相信你已经对使用 ECharts 制作地图图表有了初步的了解。在实际应用中，你可以根据自己的需求，对这些案例进行修改和扩展，创造出更多具有个性化特点的地图图表。希望这篇文章能帮助你快速上手地图可视化，让你的数据更加生动有趣！