引言
随着互联网技术的发展，地图图表已经成为展示地理信息的重要工具。ECharts 是一款强大的可视化库，能够帮助我们轻松制作各种图表，包括地图图表。本文将一步步教你如何使用 ECharts 地图图表展示从北京到西藏的全国旅行路线。
准备工作
在开始之前，请确保你已经完成了以下准备工作：
- 安装 Node.js 和 npm：ECharts 需要通过 npm 安装。
- 安装 ECharts 和 ECharts-Map：使用 npm 安装 ECharts 和 ECharts-Map。
npm install echarts echarts-map
- 选择合适的地图数据：可以从 ECharts 官方网站下载地图数据，或者使用其他地图数据源。
步骤一：创建基本的地图图表
- 创建 HTML 文件：在项目中创建一个 HTML 文件，例如
index.html。 - 引入 ECharts 和 ECharts-Map：在 HTML 文件中引入 ECharts 和 ECharts-Map。
<!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>
<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<!-- 引入 ECharts-Map -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/extension/echarts-map.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/beijing_tibet.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/beijing.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/tibet.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/xinjiang.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/chongqing.js"></script>
</body>
</html>
- 初始化图表：在 HTML 文件中创建一个 div 元素，用于放置图表。
<div id="container" style="height: 100%"></div>
- 设置 ECharts 配置项：在 HTML 文件中创建一个 script 元素，用于配置 ECharts。
var myChart = echarts.init(document.getElementById('container'));
var option = {
title: {
text: '北京到西藏旅行路线'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '旅行路线',
type: 'lines',
coordinateSystem: 'geo',
data: [
{
coords: [116.46, 39.92], // 北京坐标
targetCoord: [91.11, 29.97] // 拉萨坐标
}
],
lineStyle: {
color: '#fff',
opacity: 0.6,
width: 6,
curveness: 0.2
},
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
},
label: {
show: false,
position: 'end',
formatter: '{b}'
},
emphasis: {
label: {
show: true
}
}
},
{
name: '北京',
type: 'effectScatter',
coordinateSystem: 'geo',
data: [
{
name: '北京',
value: [116.46, 39.92]
}
],
symbolSize: 10,
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '北京',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
}
},
{
name: '西藏',
type: 'effectScatter',
coordinateSystem: 'geo',
data: [
{
name: '西藏',
value: [91.11, 29.97]
}
],
symbolSize: 10,
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '西藏',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
}
}
],
geo: {
map: 'beijing_tibet',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
};
myChart.setOption(option);
步骤二：调整地图图表样式
- 自定义地图样式：可以通过修改
geo配置项来自定义地图样式。
geo: {
map: 'beijing_tibet',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
- 自定义路线样式：可以通过修改
series配置项中的lineStyle和effect来自定义路线样式。
series: [
{
name: '旅行路线',
type: 'lines',
coordinateSystem: 'geo',
data: [
{
coords: [116.46, 39.92], // 北京坐标
targetCoord: [91.11, 29.97] // 拉萨坐标
}
],
lineStyle: {
color: '#fff',
opacity: 0.6,
width: 6,
curveness: 0.2
},
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
},
label: {
show: false,
position: 'end',
formatter: '{b}'
},
emphasis: {
label: {
show: true
}
}
}
]
步骤三：展示地图图表
- 保存 HTML 文件：将以上代码保存为
index.html文件。 - 打开浏览器：打开浏览器，访问
index.html文件，即可看到地图图表。
总结
通过以上步骤，你已经成功地使用 ECharts 地图图表展示了从北京到西藏的全国旅行路线。你可以根据自己的需求进一步调整地图图表样式和配置项，以展示更多有趣的内容。希望本文对你有所帮助！