前言：

大家都知道，一般情况下，想要使用前端设置一个 中国旅游地图 需要使用 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（数据）

中国旅游地图成品展示

线条上的箭头可以移动

步骤：

1. 首先下载 Echarts 插件，下载需要的版本即可，我这里使用的是 4.9.0 版本（最新版的一般都有一些 BUG）

cnpm install echarts@4.9.0 --save

1. 引入 Echarts 插件（在vue中一般都是引入到main.js组件中）

import echarts from 'echarts'// 挂载到vue原型中就可以全局使用
Vue.prototype.$echarts = echarts

1. 在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

使用 Echarts 插件完成中国旅游地图相关推荐

使用 Echarts 插件完成中国地图
目录前言: 什么是 Echarts 插件中国地图成品展示步骤: 完成中国地图代码总结: 前言: 大家都知道,一般情况下,想要使用前端设置一个中国地图需要使用 canvas 画布进行编写,不 ...
vue中使用eCharts插件显示中国地图
一.前言由于项目需求,需要一个中国地图,上面根据从服务器获取到的数据,显示各省份的数据.在eEcharts官网,发现没有地图相关的案列(搜索了一下,都下架了),只有社区有. 二.查找资料 eChar ...
使用Echarts完成对中国地图的绘制
目录前言 1.什么是Echarts插件 2.如何在vue中使用Echarts 3.中国地图的具体样式 4.如何使用Echarts来完成中国地图的绘制 5.总结前言我们在使用代码绘画地图的时候通常 ...
基于Echarts插件的省市区多级地图下钻和返回功能实现
Echarts3的离线地图组件,比echart2更容易实现省市区多级离线地图的展示. 当然echart2也是可以实现,由于echarts是基于canvas,加载一个地图无非就是加载一张图.而这张图,则 ...
ECharts插件的使用
ECharts插件:官网下载echarts.js开发者可以选择源码. 下载地址:http://echarts.baidu.com/download.html 下载之后,echarts.js放在js文件 ...
echarts 按需引入模_【React】react项目引入echarts插件
参考npm文档:[echarts-for-react](echarts-for-react) 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装第一步:npm安装echa ...
jquery语法三ajax+echarts插件的使用
一.jquery ajax 下面代码 cros 跨域或者不跨域可以使用$.ajax({method:"post",url:"./data/student.txt" ...
基于java的ECharts插件使用
基于java的ECharts插件使用该文章主要适合ECharts入门级别,主要介绍的是圆饼图,柱形图,树形关系图,更多图形可以到官方网站进行查看学习链接: ECharts. 效果图展示圆饼图柱形 ...
使用 Echarts 插件实现柱状图功能
目录前言: 什么是 Echarts 插件柱状图成品展示步骤: 柱状图代码: 总结: 前言: 大家都知道,一般情况下,想要使用前端设置一个柱状图需要使用 canvas 画布进行编写,不仅代码多 ...

使用 Echarts 插件完成中国旅游地图

目录

前言：

什么是 Echarts 插件

具体实现思路

中国旅游地图成品展示

步骤：

完成中国旅游地图代码

总结：

使用 Echarts 插件完成中国旅游地图相关推荐

最新文章

热门文章