echarts飞线图 迁徙图 坐标点名称

echarts飞线图 迁徙图 坐标点名称

鼠标浮动到迁徙线上，线段变化；
鼠标浮动到地市区域，高亮当前地市；
鼠标点击迁徙线，返回起始位置和终止位置；
鼠标点击地市，返回地市信息；

获得地图json数据：https://datav.aliyun.com/tools/atlas/index.html#&lat=30.37018632615852&lng=106.68898666525287&zoom=3.5

import * as echarts from 'echarts'
import china from './lns.json'
export default {
      data(){
        return{
        }
      },
      mounted() {
        this.mapCharts()
      },
      methods:{
        mapCharts() {
          const chart = echarts.init(document.getElementById('myChart'));
              const data = china;
              const coord = data.features.map(val => { // 地市数据
                return {
                  name:val.properties.name,
                  value:val.properties.center
                }
              })
              console.log(coord)

              const maparr = data.features.map(val => { // 地市坐标对象
                return {
                  value:val.properties.center
                }
              })
              console.log(maparr)
              // 地市名称
              const nameArr = ["沈阳市","大连市","鞍山市","抚顺市","本溪市","丹东市","锦州市","营口市","阜新市","辽阳市","盘锦市","铁岭市","朝阳市","葫芦岛市"]; // 地市名称 数组
              const axioArr = [] // 地市坐标 数组
              maparr.forEach((item) => {
                axioArr.push(item.value)
              })
              console.log(axioArr)

              const num = []; // 地市坐标首位 数组
              for( var i=0; i<axioArr.length; i++) {
                num.push(axioArr[i][0])
              }
              console.log(num)

              const lines_coord = []; // 存放线路轨迹
              coord.forEach((v,index)=> {
                index >= 0 && lines_coord.push({
                  coords:[v.value,coord[1].value] // 决定汇合点 coord[0]--沈阳 coord[1]--大连
                })
              })
              lines_coord.splice(1,1);// 删除中心点坐标数据
              lines_coord.forEach((val)=>{ // 中心发散
                val.coords.reverse(); // 倒序数组 向外发散
              })
              const ss={coords:[lines_coord[0].coords[1],lines_coord[12].coords[1]]}; // 追加路线轨迹
              lines_coord.push(ss)
              echarts.registerMap('lns', data);
              const option ={
                title: {
                  text: '',
                },
                geo: {
                  map: 'lns',
                  zlevel: 10,
                  show:true,
                  roam: true, // 是否支持鼠标缩放地图
                  layoutSize: "100%",
                  zoom: 1,
                  label: {
                    normal: {
                      show: true, // 地市文字显示
                      position: [10, 10],
                      textStyle:{  // 文字样式
                        fontSize:12,
                        color: '#43D0D6',
                        fontStyle: 'oblique' // font-style
                      }
                    }
                  },
                  itemStyle: { // 地市块区
                    normal: {
                      color: '#2F89CF', // 地市背景颜色
                      borderWidth: 1.1, // 轮廓宽度
                      borderColor: '#17257A' // 轮廓颜色
                    }
                  },
                  emphasis: { // 块区获得焦点时
                    itemStyle:{
                      areaColor: '#fff',
                      backgroundColor: '#fff',
                      color: 'pink'
                    },

                    focus: 'self', // 高亮一个图形的时候，淡出所有其它的图形 默认 none
                    select:{
                      backgroundColor: '#fff'
                    },
                    label:{
                      show:true
                    }
                  },
                  zlevel:0,            //所属图形的 zlevel 值。
                  z:2,                 //所属图形的 z 值。
                  layoutSize:'50%',    //地图的大小,支持相对于屏幕宽高的百分比或者绝对的像素大小。
                  regions:[{           //在地图中对特定的区域配置样式。
                    name: '沈阳',
                    selected: true,
                    itemStyle: {
                      normal: {
                        areaColor: 'blue',
                        color: 'pink'
                      }
                    }
                  }],
                },
                tooltip: {
                  trigger: 'item', // 提示内容
                },
                series: [

                  {
                    type:'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 15,
                    symbolSize:12,
                    rippleEffect: {
                      period: 6, brushType: 'stroke', scale: 8
                    },
                    itemStyle:{
                      color:'pink',
                      opacity:1
                    },
                    data:coord.slice(1,2) // 大涟漪位置
                  },
                  {
                    type:'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 15,
                    symbolSize:10, // 图元大小
                    rippleEffect: { // 涟漪特效
                      color: '#5A74C0', // 涟漪颜色
                      period: 20, // 涟漪扩散时间
                      brushType: 'fill', // 波纹涟漪效果
                      scale: 4
                    },
                    itemStyle:{
                      color:'#0D214F', // 图元颜色
                      opacity:1
                    },
                    data:coord.slice(0) //小涟漪
                  },

                  {
                    type:'lines',
                    coordinateSystem:'geo',
                    zlevel: 15,
                    effect: {
                      show: true, period: 5, trailLength: 0,
                      symbol: 'arrow', // 轨迹上的特殊图形标记
                      //'circle', 'rect', 'roundRect', 
                      // 实心原点，矩形，矩形，
                      // 'triangle', 'diamond', 'pin', 'arrow', 'none'
                      // 三角，菱形，小实心圆，箭头
                      color:'#01AAED',symbolSize: 8,
                    },
                    lineStyle: { // 轨迹线
                      normal: {
                        width: 1.2,
                        opacity: 0.6,
                        curveness: 0.2, // 轨迹线弧度 取值可正 -左弧度 负 -右弧度
                        color: 'pink'
                      },
                      emphasis:{ // 获得焦点时 轨迹线变粗 变色...
                        width: 12,
                        color: 'red'
                      },
                      tooltip: {
                        trigger: 'item', // 提示内容
                      },
                    },
                    data:lines_coord
                  }
                ]
              }
              chart.setOption(option);
              chart.on('click', function (params) {
                // console.log(params);
                if(params.componentType == 'series' ) {
                  // 点击线时 params.data.coords // 0 出发点 1 终止点
                  const mapcoordsstart = params.data.coords[0][0];
                  const mapcoordsend = params.data.coords[1][0];
                  // console.log(mapcoordsstart)
                  // console.log(mapcoordsend)
                  const indexOfstart = num.indexOf(mapcoordsstart);
                  const indexOfend = num.indexOf(mapcoordsend);
                  console.log(nameArr[indexOfstart]) // 返回起点地市名称
                  console.log(nameArr[indexOfend]) // 返回终点地市名称
                } else {
                  console.log(params.name)
                }
              });


        }
      }
    }