echarts地图飞线和锚点以及轮播

一、效果：

锚点

一中心向多点飞线

多中心向多点飞线

二、代码：

页面代码：

<template>
  <!-- 价值辐射 -->
  <div class="main-wrap">
    <div class="wrap-left">
      <div class="list" :class="{lowCenter:listArr?.length<9,highScroll:listArr?.length>8}">
        <div class="menu_item" v-for="(item,index) in listArr" :key="item.icon" @click="selectMenu(item,index)" :class="{changeSelectStyle:changeSelectStyle === index}">
          <img :src="require(`@/assets/image/datacenter/icon_01.png`)" alt="" class="menu_img"/>
          <div class="menu_title">{
  {item.title}}</div>
          <div class="menu-icon">
            <i class="el-icon-caret-right"></i>
          </div>
        </div>
      </div>
      <div class="wrap-left-slide">
      </div>
    </div>
    <div class="wrap-right">
      <div class="selectTitleContainer">
        <div v-if="!!selectTitle" class="icon"></div>
        <span class="selectTitle">{
  {selectTitle}}</span>
        <img v-if="!!selectTitle" @click="back" :src="require(`@/assets/image/datacenter/valueRadiation/homePage.png`)" alt="" />
      </div>
      <div class="box-echart" ref="mapCharts" id="mapCharts" v-loading="loading" element-loading-background="transparent" style="width:100%;height:100%;"></div>
      <el-empty v-if="!mapCharts" class="box-empty" :image-size="100"></el-empty>
    </div>
  </div>
</template>

<script>
// import szmap from "@/assets/image/datacenter/valueRadiation/chinaBg.svg";
import { getChinaMapEchartsOption } from '@/utils/echarts-options'
import chinaMap from '@/utils/json/china.json'
export default {
  data() {
    return {
      isShow: true, //是否展开
      listArr: [
        { icon: 'icon_05', title: '国家老年疾病临床研究中心', num: '0', region: 100000},
        { icon: 'icon_02', title: '国家老年疾病临床研究中心-湖南', num: '2',  region: 430000},
        { icon: 'icon_01', title: '国家老年疾病临床研究中心-广东', num: '2',  region: 440000},
        { icon: 'icon_03', title: '国家老年疾病临床研究中心-北京', num: '0',  region: 110000},
        { icon: 'icon_04', title: '国家老年疾病临床研究中心-河南', num: '0',  region: 410000 },
        { icon: 'icon_06', title: '国家老年疾病临床研究中心', num: '2', region: 100000 },
        { icon: 'icon_07', title: '国家老年疾病临床研究中心', num: '2', region: 100000 },
        { icon: 'icon_08', title: '国家老年疾病临床研究中心', num: '2', region: 100000 },
        // { icon: 'icon_011', title: '国家老年疾病临床研究中心', num: '2' },
        // { icon: 'icon_017', title: '国家老年疾病临床研究中心', num: '2' },
        // { icon: 'icon_018', title: '国家老年疾病临床研究中心', num: '2' }
      ],
      htmlheight: '100%',
      isScale: false, // 是否可缩放
      scale: 100, // 画布缩放比
      paper: '',
      mapCharts: null,
      loading: false,
      changeSelectStyle:'',
      selectTitle:'',

      faultByHourTime:'',
      faultByHourIndex:0,
      aniarrayArrays:[],
      centerEmpty:false,
      centerError:false,

      domImg:null
    }
  },
  destroyed() {
    this.clearTooltip();
    this.mapCharts.off('mouseover');
    this.mapCharts.off('mouseout');
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.resizeCharts()
    })
    this.domImg = document.createElement('img')
    this.domImg.src = require('@/assets/image/datacenter/valueRadiation/chinaBg.svg')
    this.getDataOne('000000')
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.resizeCharts()
    })
  },
  methods: {
    back(){
      this.clearTooltip();
      this.getDataOne('000000')
      this.changeSelectStyle='';
      this.selectTitle='';
    },
    resizeCharts() {
      this.mapCharts.resize()
    },
    getDataOne(type,center,centerName) {
    this.loading = true
    let obj = this.getScatter(type)
    setTimeout(() => {
      this.drawDataOne(obj.coord,obj.lines_coord,center,centerName)
      this.loading = false
    }, 600)
    },
    drawDataOne(coord,lines_coord,center,centerName) {
      this.mapCharts = this.$echarts.getInstanceByDom(this.$refs.mapCharts)
      if (this.mapCharts == null) {
        this.mapCharts = this.$echarts.init(this.$refs.mapCharts)
      }
      // $.get(szmap, function (svg) {
        // 首先向 echarts 注册 SVG 字符串或解析过的 SVG DOM
        // this.$echarts.registerMap("china", { svg: szmap });
      this.$echarts.registerMap('china', require('@/utils/json/china.json'))
      let formatterFunc = function (params) {
        if (!!params.data?.income) {
          const dotHtml1 = `<div style="color:#FDAD4D;color:#fff;text-align:left;width:150px;font-size:12px;font-weight:700;">${params.name}</div>`
          const dotHtml2 = `<div style="color:#fff;font-size:12px;font-weight: 400;">
          <div>患者人数：${params.data.income.allPeople}</div>
          <div&g