echarts请求地图实现下转，并且取消对应的动画效果

<template>
  <div class="home">
    <div id="map"></div>
  </div>
</template>

<script>
import yibin from '@/utils/yibin.json'
import changningxian from '@/utils/yibinAll/changningxian.json'
import * as echarts from 'echarts'
let myChart = null

export default {
  name: 'Home',
  data() {
    return {
      xz: true,
      timeFn: null
    }
  },
  mounted() {
    this.getMap()
  },
  methods: {
    getMap() {
      myChart = echarts.init(document.getElementById('map'))
      let that = this
      let option = {}
      // 获取dom元素
      // 地区中心点
      var chinaGeoCoordMap = {
        翠屏区: [104.660595, 28.903765],
        南溪区: [104.981133, 28.839806],
        叙州区: [104.119477, 28.764502],
        江安县: [105.068697, 28.728102],
        长宁县: [104.921116, 28.577271],
        高县: [104.519187, 28.435676],
        珙县: [104.712268, 28.449041],
        筠连县: [104.507848, 28.162017],
        兴文县: [105.236549, 28.302988],
        屏山县: [104.162617, 28.64237]
      }
      var chinaDatas = [
        [
          {
            name: '翠屏区',
            value: 0
          }
        ],
        [
          {
            name: '南溪区',
            value: 0
          }
        ],
        [
          {
            name: '叙州区',
            value: 0
          }
        ],
        [
          {
            name: '江安县',
            value: 0
          }
        ],
        [
          {
            name: '长宁县',
            value: 0
          }
        ],
        [
          {
            name: '高县',
            value: 0
          }
        ],
        [
          {
            name: '珙县',
            value: 0
          }
        ],
        [
          {
            name: '筠连县',
            value: 0
          }
        ],
        [
          {
            name: '兴文县',
            value: 0
          }
        ],
        [
          {
            name: '屏山县',
            value: 100
          }
        ]
      ]
      console.log('123', chinaDatas)
      loadMap(yibin, 'yibin')
      function loadMap(yibin, name) {
        var convertData = function (data) {
          var res = []
          for (var i = 0; i < data.length; i++) {
            var dataItem = data[i]
            var toCoord = chinaGeoCoordMap[dataItem[0].name]
            var fromCoord = [104.660595, 28.903765]
            if (fromCoord && toCoord) {
              res.push([
                {
                  coord: toCoord
                },
                {
                  coord: fromCoord,
                  value: dataItem[0].value
                }
              ])
            }
          }
          return res
        }
        var series = [
          {
            type: 'map',
            mapType: name,
            aspectScale: 0.95,
            layoutCenter: ['50%', '50%'], // 地图位置
            layoutSize: '108%',
            selectedMode: 'single', // 设置为单选模式
            zoom: 1, // 当前视角的缩放比例
            // roam: true, //是否开启平游或缩放
            scaleLimit: {
              // 滚轮缩放的极限控制
              min: 1,
              max: 2
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            // data: datamap,
            // 设置地图颜色
            itemStyle: {
              normal: {
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.9,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'RGBA(40, 99, 113, 1)' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'RGBA(28, 79, 105, 0.6)' // 100% 处的颜色
                    }
                  ]
                },
                borderColor: 'RGBA(52, 140, 250, 1)',
                borderWidth: 2,
                shadowColor: '#092f8f', // 外发光
                shadowBlur: 20
              },
              emphasis: {
                areaColor: '#0c274b',
                // borderColor: '#087cf9',
                // borderWidth: 5,
                label: {
                  color: '#fff'
                }
              }
            }
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            symbolSize: 10,
            rippleEffect: {
              // 坐标点动画
              period: 3,
              scale: 5,
              brushType: 'fill'
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                formatter: '{b}',
                color: '#f28813',
                fontWeight: 'bold',
                fontSize: 14
              }
            },
            symbolSize: function (val) {
              return 6
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'left',
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: 'yellow',
                shadowBlur: 10,
                shadowColor: 'yellow'
              }
            },
            zlevel: 1
          }
        ]
        console.log('执行了loadMap')
        console.log(that.xz)
        if (that.xz) {
          console.log('执行了取区间')
          ;[['翠屏区', chinaDatas]].forEach(function (item, i) {
            series.push(
              {
                type: 'lines',
                zlevel: 2,
                effect: {
                  show: true,
                  period: 4, // 箭头指向速度，值越小速度越快
                  trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
                  symbol: 'arrow', // 箭头图标
                  symbolSize: 5 // 图标大小
                },
                lineStyle: {
                  normal: {
                    width: 1, // 尾迹线条宽度
                    opacity: 1, // 尾迹线条透明度
                    curveness: 0.3, // 尾迹线条曲直度
                    color: 'yellow'
                  }
                },
                data: convertData(item[1])
              },
              {
                type: 'scatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                  // 涟漪特效
                  period: 4, // 动画时间，值越小速度越快
                  brushType: 'stroke', // 波纹绘制方式 stroke, fill
                  scale: 4 // 波纹圆环最大限制，值越大波纹越大
                },
                symbol: 'circle',
                symbolSize: function (val) {
                  return 10 // 圆环大小
                },
                itemStyle: {
                  normal: {
                    show: false,
                    color: 'yellow'
                  }
                },
                data: item[1].map(function (dataItem) {
                  // console.log(dataItem)
                  return {
                    name: dataItem[0].name,
                    value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                  }
                })
              }
            )
          })
        }
        echarts.registerMap(name, yibin)
        option = {
          backgroundColor: '#000',
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(255,255,255,0)',
            textStyle: {
              color: '#fff',
              decoration: 'none'
            },
            formatter: function (params) {
              // console.log(params)
              var tipHtml = ''
              tipHtml = `
                        <div class="ui-map-img">
                            <div class='ui-maptxt'>${params.name}</div>
                        </div>
                    `
              return tipHtml
            }
          },
          grid: {
            left: '0', // 与容器左侧的距离
            right: '0', // 与容器右侧的距离
            top: '0', // 与容器顶部的距离
            bottom: '0' // 与容器底部的距离
          },
          // geo配置要和service一样
          geo: {
            map: name,
            zoom: 1,
            aspectScale: 0.95,
            layoutCenter: ['50%', '50%'], // 地图位置
            layoutSize: '108%',
            itemStyle: {
              normal: {
                shadowColor: '#276fce',
                shadowOffsetX: 0,
                shadowOffsetY: 15,
                opacity: 0.3
              }
            }
          },
          series: series
        }
        console.log(option)
        console.log(myChart)
        myChart.setOption(option, true)
      }
      // 动画线条
      myChart.on('click', params => {
        clearTimeout(this.timeFn)
        //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
        this.timeFn = setTimeout(() => {
          console.log('click', params)
          var name = params.name //地区name
          //   var mapCode = listBzMap[name] //地区的json数据
          if (name != '长宁县') {
            // alert('无此区域地图显示')
            return
          }
          this.xz = false
          loadMap(changningxian, 'changningxian')
        }, 250)
      })
      myChart.on('dblclick', params => {
        clearTimeout(this.timeFn)
        this.xz = true
        //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
        // this.timeFn = setTimeout(function () {
        console.log('dblclick', params)
        loadMap(yibin, 'yibin')
        // }, 250)
      })
    }
  },
  components: {}
}
</script>
<style lang="scss" scoped>
#map {
  width: 800px;
  height: 800px;
}
</style>