ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括地图图表。地图图表可以直观地展示地理信息，是数据分析中常用的一种可视化形式。本文将为你详细介绍如何使用 ECharts 绘制地图图表，并通过 30 个实用案例，让你轻松掌握地图图表的制作技巧。
1. ECharts 地图图表基础
1.1 引入 ECharts 库
首先，你需要引入 ECharts 库。可以通过 CDN 链接或下载 ECharts 的源码来实现。
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
1.2 准备地图数据
地图数据是绘制地图图表的基础。ECharts 支持多种地图数据格式，如 GeoJSON、GEOJSON、GeoSVG 等。
1.3 配置地图图表
使用 ECharts 的 echarts.init() 方法初始化图表实例，并传入地图数据和配置项。
var myChart = echarts.init(document.getElementById('main'));
var option = {
// 配置项
};
myChart.setOption(option);
2. 实用案例解析
2.1 世界地图
案例描述
展示全球各国的分布情况。
代码示例
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: 'world',
roam: true,
label: {
show: true
},
data: [
{name: '中国', value: 1409517397},
{name: '印度', value: 1339180127},
// ... 其他国家数据
]
}
]
};
myChart.setOption(option);
2.2 中国地图
案例描述
展示中国各省份的人口分布情况。
代码示例
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: 21542718},
{name: '天津', value: 15552310},
// ... 其他省份数据
]
}
]
};
myChart.setOption(option);
2.3 省级地图
案例描述
展示某个省份的地级市人口分布情况。
代码示例
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: '江苏',
roam: true,
label: {
show: true
},
data: [
{name: '南京市', value: 8525880},
{name: '无锡市', value: 5803554},
// ... 其他地级市数据
]
}
]
};
myChart.setOption(option);
2.4 地级市地图
案例描述
展示某个地级市的人口分布情况。
代码示例
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: '南京',
roam: true,
label: {
show: true
},
data: [
{name: '玄武区', value: 745528},
{name: '秦淮区', value: 725427},
// ... 其他区县数据
]
}
]
};
myChart.setOption(option);
2.5 区县地图
案例描述
展示某个区县的人口分布情况。
代码示例
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: '玄武区',
roam: true,
label: {
show: true
},
data: [
{name: '新街口街道', value: 6100},
{name: '中央门街道', value: 6200},
// ... 其他街道数据
]
}
]
};
myChart.setOption(option);
2.6 3D 地图
案例描述
展示 3D 地图效果。
代码示例
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '3D 地图'
},
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高','低'],
calculable: true
},
series: [
{
name: '3D 地图',
type: 'map3D',
mapType: '世界',
roam: true,
label: {
show: true
},
data: [
{name: '中国', value: 1409517397},
{name: '美国', value: 331002651},
// ... 其他国家数据
]
}
]
};
myChart.setOption(option);
2.7 地图热力图
案例描述
展示地图上的热力图效果。
代码示例
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: 'heatmap',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92, 100]},
{name: '上海', value: [121.47, 31.23, 80]},
// ... 其他数据
]
}
]
};
myChart.setOption(option);
2.8 地图路径图
案例描述
展示地图上的路径图效果。
代码示例
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: 'lines',
coordinateSystem: 'geo',
data: [
{name: '北京', coords: [[116.46, 39.92], [121.47, 31.23]]},
{name: '上海', coords: [[121.47, 31.23], [119.18, 31.32]]},
// ... 其他数据
]
}
]
};
myChart.setOption(option);
2.9 地图标签云
案例描述
展示地图上的标签云效果。
代码示例
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: 'cloud',
coordinateSystem: 'geo',
data: [
{name: '北京', value: 100},
{name: '上海', value: 80},
// ... 其他数据
]
}
]
};
myChart.setOption(option);
2.10 地图饼图
案例描述
展示地图上的饼图效果。
代码示例
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: 'pie',
coordinateSystem: 'geo',
data: [
{name: '北京', value: 100},
{name: '上海', value: 80},
// ... 其他数据
]
}
]
};
myChart.setOption(option);
2.11 地图柱状图
案例描述
展示地图上的柱状图效果。
代码示例
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: 'bar',
coordinateSystem: 'geo',
data: [
{name: '北京', value: 100},
{name: '上海', value: 80},
// ... 其他数据
]
}
]
};
myChart.setOption(option);
2.12 地图折线图
案例描述
展示地图上的折线图效果。
代码示例
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: 'line',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [100, 110]},
{name: '上海', value: [80, 90]},
// ... 其他数据
]
}
]
};
myChart.setOption(option);
2.13 地图散点图
案例描述
展示地图上的散点图效果。
代码示例
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: 'scatter',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92, 100]},
{name: '上海', value: [121.47, 31.23, 80]},
// ... 其他数据
]
}
]
};
myChart.setOption(option);
2.14 地图环形图
案例描述
展示地图上的环形图效果。
代码示例
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: 'pie',
coordinateSystem: 'geo',
radius: ['40%', '70%'],
data: [
{name: '北京', value: 100},
{name: '上海', value: 80},
// ... 其他数据
]
}
]
};
myChart.setOption(option);
2.15 地图雷达图
案例描述
展示地图上的雷达图效果。
代码示例
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: 'radar',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [100, 110, 120, 130, 140]},
{name: '上海', value: [80, 90, 100, 110, 120]},
// ... 其他数据
]
}
]
};
myChart.setOption(option);
2.16 地图漏斗图
案例描述
展示地图上的漏斗图效果。
代码示例
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: 'funnel',
coordinateSystem: 'geo',
data: [
{name: '北京', value: 100},
{name: '上海', value: 80},
// ... 其他数据
]
}
]
};
myChart.setOption(option);
2.17 地图仪表盘
案例描述
展示地图上的仪表盘效果。
代码示例
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: 'gauge',
coordinateSystem: 'geo',
data: [
{name: '北京', value: 100},
{name: '上海', value: 80},
// ... 其他数据
]
}
]
};
myChart.setOption(option);
2.18 地图地图
案例描述
展示地图上的地图效果。
代码示例
”`javascript 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',
coordinateSystem: 'geo',
data: [
{name: '北京', value: 100},
{name: '上海',