admin 使用 Echarts 插件完成中国旅游地图
目录 前言：什么是 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. 先设置一个显示的标签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 官网进行查看
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, }, ], }); }, },};.map-view { width: 100%; height: 100%; #main { width: 100%; height: 650px; }} 总结：
以上就是 vue基于 Echarts 插件，实现中国旅游地图功能，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。 我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog
