vue中利用Echarts实现飞线（飞机）地图样式

实现效果
思想：主要是三个要素：1 地图样式 2散点图 3飞线组合配置后就形成以下效果。

在这里插入图片描述

第一步：vue中引入Echarts

npm install vue-echarts echarts

第二步：导入代码

代码已经写好，直接引入运行就好了，关键代码有注释，可查询修改。

<template><!-- 飞线图组件 --><div class="map"><h2>消费者扫码辐射图</h2><!-- 地图容器 --><div class="content" ref="echarts"></div></div>
</template><script>
// 引入echarts
import * as echarts from 'echarts'
// 引入地图
import 'echarts/lib/chart/map'
// 引入js
import 'echarts/map/js/china.js'export default {components: {},data () {// 这里存放数据return {}},mounted () {this.init()},// 数据部分methods: {init () {const myChart = echarts.init(this.$refs.echarts)// 这个数据是散点数据，用于在地图上面展示。const chinaGeoCoordMap = {黑龙江: [127.9688, 45.368],内蒙古: [110.3467, 41.4899],吉林: [125.8154, 44.2584],宜宾市: [104.630825, 28.760189],辽宁: [123.1238, 42.1216],// 河北: [114.4995, 38.1006],// 天津: [117.4219, 39.4189],// 山西: [112.3352, 37.9413],// 陕西: [109.1162, 34.2004],// 甘肃: [103.5901, 36.3043],// 宁夏: [106.3586, 38.1775],// 青海: [101.4038, 36.8207],// 新疆: [87.9236, 43.5883],// 西藏: [91.11, 29.97],// 四川: [103.9526, 30.7617],// 重庆: [108.384366, 30.439702],// 山东: [117.1582, 36.8701],// 河南: [113.4668, 34.6234],// 江苏: [118.8062, 31.9208],// 安徽: [117.29, 32.0581],// 湖北: [114.3896, 30.6628],// 浙江: [119.5313, 29.8773],// 福建: [119.4543, 25.9222],// 江西: [116.0046, 28.6633],// 湖南: [113.0823, 28.2568],安阳: [113.625891, 35.20554],贵州: [106.6992, 26.7682],云南: [102.9199, 25.4663],广东: [113.12244, 23.009505],广西: [108.479, 23.1152],海南: [110.3893, 19.8516],上海: [121.4648, 31.2891]}// 散点const chinaDatas = []// 临时数组// const mapObject = { name: '', value: null }// 飞线const lineObject = { coords: [[113.4668, 34.6234]] }const linesCoord = []for (const key in chinaGeoCoordMap) {const mapObject = { name: '', value: null }// console.log('打印一下key：' + key)mapObject.name = keymapObject.value = chinaGeoCoordMap[key]// chinaDatas.push(JSON.parse(JSON.stringify(mapObject)))chinaDatas.push(mapObject)if (key !== '广东') {lineObject.coords[1] = chinaGeoCoordMap[key]linesCoord.push(JSON.parse(JSON.stringify(lineObject)))}}// 配置部分const option = {// geo配置详解： https://echarts.baidu.com/option.html#geo// 这里是配置最下面的地图部分geo: {zlevel: 0, // 数值越大越是在上面map: 'china',show: true,roam: false, // 使地图不能放大拖动top: '20px',label: {emphasis: {show: false,focus: 'self'}},// 地图的背景色itemStyle: {normal: {areaColor: 'rgba(0, 0, 0, 0)', // 变成透明borderColor: '#fff',shadowColor: '#09184F',shadowBlur: 20// borderWidth: 20}}},series: [// 配置散点图的数据{type: 'effectScatter',coordinateSystem: 'geo',// 要有对应的经纬度才显示，先经度再维度data: chinaDatas,showEffectOn: 'render',rippleEffect: {scale: 4, // 波纹的最大缩放比例brushType: 'stroke'},hoverAnimation: true,label: {normal: {show: true,formatter: '{b}',position: 'right',fontWeight: 500,fontSize: 14}},itemStyle: {normal: {// color: '#00e3ff',color: 'yellow',shadowBlur: 5,shadowColor: '#333'}},emphasis: {itemStyle: {color: '#f4e925' // 高亮颜色}},zlevel: 1},// 飞线的配置{type: 'lines',coordinateSystem: 'geo',zlevel: 1,effect: { // 飞机的特效配置show: true,period: 5,trailLength: 0,symbol: 'image:src/assets/airplane.svg',color: 'yellow',symbolSize: 8},lineStyle: {normal: {width: 1.2,opacity: 0.6,curveness: 0.2,color: '#FFB800'}},data: linesCoord}]}myChart.setOption(option)}}
}
</script><style lang="scss" scoped>.map{width: 900px;height: 900px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);// background-image: url("../assets/bg.jpg");}h2{left: 35%;top: 15%;padding-top: 40px;color: #fff;font-size:22px;// top: 200px;position: absolute;}.content {width: 800px;height: 800px;top: 200px;position: absolute;// height: 100vh;}
</style>