vue3中饼状图自动轮播高亮展示

最终效果

环状图自动轮播

1.给echarts设置id

2.轮播函数

<script setup>
let timers = ref(null)
const pos = ref(0)
const categoryLength = ref()

function handleAutoLoop() {
  nextTick(() => {
    // 图表的初始化
    const myChart = echarts.init(document.getElementById('manyLineCharts'))
    const initTimer = () => {
      if (timers) {
        timers = null
        clearInterval(timers)
      }
      timers = setInterval(() => {
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0
        })

        pos.value++
        if (pos.value > categoryLength.value) {
          pos.value = 0
        }
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: pos.value
        })

        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: pos.value
        })
      }, 2000)
    }
    initTimer()
    const stopShowTip = param => {
      clearInterval(timers)
      //取消当前轮播的高亮效果
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: pos.value
      })
    }
    // 鼠标移入
    myChart.on('mouseover', param => {
      stopShowTip(param)
    })
    // 鼠标移出
    myChart.on('mouseout', () => {
      initTimer()
    })
    // 鼠标在目标内不断移动
    myChart.on('mousemove', param => {
      stopShowTip(param)
    })
    // 鼠标移出整个图标时触发
    myChart.on('globalout', () => {
      initTimer()
    })
  })
}

onMounted(() => {
  handleAutoLoop()
})
</script>