echarts Vue3 地图区域自动轮播

产品需求

根据有数据的省份进行区域自动轮播

核心点

• 业务数据
  • 数据格式为 [{ name: '江苏省', value: ['118.7727814', '3.0476151', 95] }]
• echarts的dispatchAction
  • 方法 5.1版本之后的支持geo组件

代码

  let mTime: any = null 
  let dataLength = source.value.length
  let index = 0

  swiper()

  // 定义定时器函数
  function swiper() {
    if (mTime) {
      clearInterval(mTime)
    }
    mTime = setInterval(() => {
      // 当前下标高亮并显示提示框
      charEch.dispatchAction({
        type: 'downplay',
        geoIndex: 0,
        name: source.value[index].name
      })
      index = (index + 1) % dataLength
      charEch.dispatchAction({
        type: 'highlight',
        geoIndex: 0,
        name: source.value[index].name
      })
      charEch.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: index
      })
      if (index > dataLength) {
        index = 0
      }
    }, 2000)
  }

  // 鼠标移入暂停定时器，清除之前的高亮
  charEch.on('mouseover', (e) => {
    clearInterval(mTime)
    mTime = null
    if (e.dataIndex !== index) {
      charEch.dispatchAction({
        type: 'downplay',
        geoIndex: 0,
        name: source.value[index].name
      })
    }
  })

  // 鼠标移出重启定时器
  charEch.on('mouseout', () => {
    swiper()
  })

  onBeforeUnmount(() => {
    if (mTime) {
      clearInterval(mTime)
    }
  })