Vue+Echarts 实现中国地图和飞线效果

实现效果

在这里插入图片描述

在线预览：https://mouday.github.io/vue-demo/packages/china-map/dist/index.html

准备

高版本的echarts，不包含地图数据，需要自己下载到项目中

1、地图数据下载

https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

2、注册地图到echarts中

//根据自身情况，粘贴来的数据放在哪里就从哪里导入
import chinaMap from "@/assets/map/china.json";//注册地图到echarts中  这里的 "china" 要与地图数据的option中的geo中的map对应
echarts.registerMap("china", { geoJSON: chinaMap });

为了能复现效果，给出了项目的完整结构和完整代码

项目结构

$ tree -I node_modules
.
├── package.json
└── src├── App.vue├── ChinaMap.vue├── main.js└── utils├── event-util.js└── map-util├── china.json├── index.js└── map-data.js

package.json

{"scripts": {"dev": "vue-cli-service serve","build": "vue-cli-service build"},"dependencies": {"echarts": "^5.5.0","element-ui": "^2.15.11","vue": "^2.6.14"},"devDependencies": {"@vue/cli-service": "^5.0.8","less": "^4.0.0","less-loader": "^8.0.0","vue-template-compiler": "^2.6.14"}
}

ChinaMap.vue

主要有3个部分：地图、线条、点

<template><div class="chartMap" ref="chinaMap"></div>
</template><script>
import * as echarts from "echarts";
import "@/utils/map-util/index.js"; // 注册地图数据
import { chinaRegions } from "@/utils/map-util/map-data.js";// 事件监听工具类
import * as eventUtil from "@/utils/event-util.js";export default {name: "dataView",data() {return {chinaMap: "", // 地图};},created() {},mounted() {this.init();},beforeDestroy() {eventUtil.off(window, "resize", this.handleWindowResize);},methods: {handleWindowResize() {//动态改变图表尺寸this.chinaMap.resize();},init() {this.getMap(); // 地图},// 地图getMap() {this.chinaMap = echarts.init(this.$refs.chinaMap);let option = {// 设置地图样式geo: {map: "china",zoom: 1.2,layoutSize: "100%", //保持地图宽高比// 设置图块颜色，也可以通过图例 visualMap 设置颜色，但是飞线的颜色设置会失效，一直取 图例 设置的颜色；根据需求选择；regions: chinaRegions,label: {// 默认样式normal: {show: false,fontSize: "10",color: "rgba(255,255,255,.3)",},// 高亮样式emphasis: {show: true,textStyle: {color: "#1955a4",},},},itemStyle: {// 默认样式，图块没数据时，会取默认颜色normal: {borderColor: "#c0e0e3",areaColor: "#29c5f6",opacity: 0.8,},// 高亮样式emphasis: {areaColor: "#f2d5ad",},},},series: [// 设置飞线样式{type: "lines",coordinateSystem: "geo",zlevel: 100,effect: {show: true,period: 4, // 图标飞跃速度，值越小速度越快trailLength: 0.2, // 尾迹长度[0,1]值越大，尾迹越长symbol: "pin", // 图标类型symbolSize: 4, // 图标大小color: "#f5f3b3", // 图标颜色},lineStyle: {color: "#000",normal: {show: true,width: 1, //尾迹线条宽度opacity: 0.1, //尾迹线条透明度curveness: 0.3, //尾迹线条曲直度color: "#44add00f", // 飞线颜色},},// 飞线数据data: [[{// 出发coord: [117.1582, 36.8701], // 山东value: 1,},{// 目的地coord: [116.4551, 40.2539], // 北京},],[{// 出发coord: [110.3893, 19.8516], // 海南value: 1,},{// 目的地coord: [116.4551, 40.2539], // 北京},],],},// 中心点设置{type: "effectScatter",coordinateSystem: "geo",zlevel: 15,rippleEffect: {period: 3,brushType: "fill", // 动画样式 fill strokescale: 60,color: "#7ce7fd",number: 2,},symbol: "circle", // 图标样式symbolSize: 2,itemStyle: {color: "#5cc8d4",},// 中心点数据data: [{name: "北京",value: [116.4551, 40.2539, 10],},],},],};this.chinaMap.setOption(option);eventUtil.on(window, "resize", this.handleWindowResize);},},
};
</script><style lang="less">
.chartMap {width: 500px;height: 500px;background: #132d48;
}
</style>