目录
- 前言：
- 什么是 Echarts 插件
- 具体实现思路
- 中国旅游地图成品展示
- 步骤：
- 完成中国旅游地图代码
- 总结：
前言：
大家都知道，一般情况下，想要使用前端设置一个 中国旅游地图 需要使用 canvas 画布进行编写，不仅代码多，逻辑处理麻烦，今天交大家使用一个插件，使用它就可以轻松的做出各种图。
什么是 Echarts 插件
echars是一棵树
这个图标是简单还是复杂，取决你在这棵树上绘制的枝干有多少
树就是dom容器，初始化，挂载到dom容器上，把枝干在配置进来
枝干可以在示例中，具体代码里有配置，在文档中查看具体效果
具体实现思路
设置一个标签，标签设置宽高，否则不显示
引入中国地图的数据
初始化echarts实例，并挂载到dom中
注册中国地图，必须在geo或map中
this.$echarts.registerMap(“china”, geoJson);
编写配置项，把配置项添加到实例中（简写）
配置项：
背景色
geo：图层（zoom），长宽比例，样式（itemStyle)：地图区域的颜色，阴影，阴影偏移量，特点区域的样式(region)：南海诸岛
series：相关数据的各项参数，可以分为好几层，层次显示用图层（zoom）划分，
- 基础地图相关的数据参数：显示文字，文字颜色，图层，样式（itemStyle)：地图区域的颜色，背景色，边框，高亮效果（鼠标移入时显示样式）
请求数据（把请求到的值：points, linesData）给2，3的data
- 配置散点图的各项参数：类型（type）：散点图（气泡图），使用地理坐标系，配置何时显示特效(绘制完成后显示特效)，标记的大小(默认为10)
图层：1，data（数据），涟漪特效相关配置：动画周期，缩放比例，波纹的绘制 - 配置线性图的各项参数：类型（type）：线性图，图层：2，线特效的配置（effect）：是否显示特效（show），特效动画的时间，显示方式，特效的大小，
拖尾的效果，取值范围 0-1，值越大效果越明显，线的样式（透明度，颜色，宽，弯曲度），data（数据）
中国旅游地图成品展示
线条上的箭头可以移动
步骤：
-
- 首先下载 Echarts 插件，下载需要的版本即可，我这里使用的是 4.9.0 版本（最新版的一般都有一些 BUG）
cnpm install echarts@4.9.0 --save
-
- 引入 Echarts 插件（在vue中一般都是引入到main.js组件中）
import echarts from 'echarts'
// 挂载到vue原型中就可以全局使用
Vue.prototype.$echarts = echarts
-
- 在js中使用需要进行的步骤：
引入中国地图的地址在 node_modules_echarts@4.9.0@echarts\map\json 文件夹下
1. 先设置一个显示的标签
<div id="main" style="width: 600px;height:400px;"></div>
2. 引入中国地图代码
import geoJson from "echarts/map/json/china";
3. 初始化echatrs实例，并挂载到dom容器中
let myChart = this.$echarts.init(document.getElementById("main"));
4. 注册地图
this.$echarts.registerMap("china", geoJson);
5. 对照着需求，来逐个编写配置项(参考文档)和接收数据
let option = {}
6. 将配置和数据添加到实例中
myChart.setOption(option);
注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用
地图分为：世界地图，中国地图，省份地图，市区地图
下面代码的意思，可以跳转至官方网站进行查看
完成中国旅游地图代码
代码中大部分功能写有注释，部分没有可以在 Echarts 官网进行查看
<template>
<div class="map-view">
<div id="main"></div>
</div>
</template>
<script>
import geoJson from "echarts/map/json/china";
import { travel } from "@/api/api";
export default {
data() {
return {};
},
mounted() {
travel().then((res) => {
if (res.data.status === 200) {
let { points, linesData } = res.data.data;
this.draw(points, linesData);
}
});
},
methods: {
draw(points, linesData) {
let myChart = this.$echarts.init(document.getElementById("main"));
// 注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用
// 地图：世界地图，中国地图，省份地图，市区地图
this.$echarts.registerMap("china", geoJson);
myChart.setOption({
// 背景色
backgroundColor: "rgb(121,145,200)",
// 配置项(组件)
geo: {
map: "china",
// 地图的长宽比例
aspectScale: 0.75,
// 图层
zoom: 1.1,
// 样式
itemStyle: {
// 标准
normal: {
// 地图区域的颜色
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
// 颜色的步骤
colorStops: [
{
offset: 0,
color: "#09132c",
},
{
offset: 1,
color: "#274d68",
},
],
// 延长作用域
globalCoord: true,
},
// 盒子的阴影
shadowColor: "rgb(58,115,192)",
// 偏移
shadowOffsetX: 10,
shadowOffsetY: 11,
},
},
region: [
{
name: "南海诸岛",
itemStyle: {
opacity: 0,
},
},
],
},
series: [
// 1. 配置基础地图相关的数据参数
{
type: "map",
label: {
normal: {
// 显示文字
show: true,
textStyle: {
color: "#1DE9B6",
},
},
emphasis: {
textStyle: {
color: "rgb(183,185,14)",
},
},
},
// 图层
zoom: 1.1,
map: "china",
itemStyle: {
normal: {
// 背景色
backgroundColor: "rgb(147,235,248)",
// 边框
borderWidth: 1,
// 区域颜色
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
// 文档
r: 0.8,
colorStops: [
{ offset: 0, color: "rgb(34,54,150)" },
{ offset: 1, color: "rgb(89,128,142)" },
],
// 全局生效
globalCoord: true,
},
},
// 高亮效果
emphasis: {
areaColor: "rgb(46,229,206)",
borderWidth: 0.1,
},
},
},
// 2. 配置散点图的各项参数
{
// 散点图（气泡图）
type: "effectScatter",
// 使用地理坐标系
coordinateSystem: "geo",
// 配置何时显示特效(绘制完成后显示特效)
showEffectOn: "render",
// 标记的大小(默认为10)
symbolSize: 10,
// 图层
zlevel: 1,
// 数据
data: points,
// 涟漪特效相关配置
rippleEffect: {
// 动画周期
period: 5,
// 缩放比例
scale: 4,
// 波纹的绘制
brushType: "fill",
},
},
// 3. 配置线性图的各项参数
{
// 线性图
type: "lines",
// 图层
zlevel: 2,
// 线特效的配置
effect: {
// 是否显示特效
show: true,
// 特效动画的时间
period: 4,
// 显示方式
symbol: "arrow",
// 特效的大小
symbolSize: 7,
// 拖尾的效果，取值范围 0-1，值越大效果越明显
trailLength: 0.6,
},
lineStyle: {
normal: {
color: "#1DE986",
width: 1,
opacity: 0.4,
curveness: 0.7,
},
},
data: linesData,
},
],
});
},
},
};
</script>
<style lang="scss" scoped>
.map-view {
width: 100%;
height: 100%;
#main {
width: 100%;
height: 650px;
}
}
</style>
总结：
以上就是 vue基于 Echarts 插件，实现中国旅游地图功能，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog
![[附源码]计算机毕业设计汽车租赁管理系统Springboot程序](https://img-blog.csdnimg.cn/593180309ddb48879f0b66451e62d6d1.png)
![[附源码]JAVA毕业设计社区管理与服务（系统+LW）](https://img-blog.csdnimg.cn/d3a539c9980245a69d4079a34f640b96.png)
