js处理echarts tooltip定时轮播

echarts tooltip定时轮播

/**
 * echarts tooltip轮播
 * @param chart ECharts实例
 * @param chartOption echarts的配置信息
 * @param options object 选项
 * {
 *  interval    轮播时间间隔，单位毫秒，默认为3000
 *              true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip
 *  seriesIndex 默认为0，指定某个系列（option中的series索引）循环显示tooltip，
 *              当loopSeries为true时，从seriesIndex系列开始执行。
 * }
 * @returns {{clearLoop: clearLoop}|undefined}
 */

export function loopShowTooltip(myChart, option, num, time) {
  var defaultData = {
    // 设置默认值
    time: 3000,
    num: 14,
  }
  if (!time) {
    time = defaultData.time
  }
  if (!num) {
    num = defaultData.num
  }

  var count = 0
  var timeTicket = 0

  // 清除定时器
  function clearLoop() {
    if (timeTicket) {
      clearInterval(timeTicket)
      timeTicket = 0
    }

    myChart.off('mousemove', stopAutoShow)
    myChart.getZr().off('mousemove', zRenderMouseMove)
    // myChart.getZr().off('globalout', zRenderGlobalOut);
  }

  // 关闭轮播
  function stopAutoShow() {
    if (timeTicket) {
      clearInterval(timeTicket)
      timeTicket = 0
    }
  }

  function zRenderMouseMove(param) {
    if (param.event) {
      // 阻止canvas上的鼠标移动事件冒泡
      // param.event.cancelBubble = true;
    }

    stopAutoShow()
  }

  timeTicket && clearInterval(timeTicket)
  timeTicket = setInterval(function () {
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0, // serieIndex的索引值   可以触发多个
    })
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: count,
    })
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: count,
    })
    count++
    if (count >= num) {
      count = 0
    }
  }, time)
  myChart.on('mouseover', function (params) {
    clearInterval(timeTicket)
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
    })
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: params.dataIndex,
    })
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: params.dataIndex,
    })
  })

  myChart.on('mouseout', function () {
    timeTicket && clearInterval(timeTicket)
    timeTicket = setInterval(function () {
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0, // serieIndex的索引值   可以触发多个
      })
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: count,
      })
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: count,
      })
      count++
      if (count >= 14) {
        count = 0
      }
    }, 3000)
  })
  return {
    clearLoop: clearLoop,
  }
}

使用

<template>
  <!-- 洪水预演——中间（洪水演进渲染）——水深echarts下面的进度条和echarts -->
  <div class="DepthChart-container">
    <div class="chart">
      <EchartsChunk ref="echartRef" :options="options"></EchartsChunk>
    </div>
    <div class="chart2">
      <EchartsChunk ref="waterChartRef" :options="waterOptions"></EchartsChunk>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { cloneDeep } from 'lodash'
import { processDataAndSetYAxis } from '@/utils/chartDefault.js'
import { loopShowTooltip } from '@/utils/tooltip-auto-show-vue'
import { fourOptions, waterOptions } from './echarts.config'
export default {
  name: 'DepthChart',
  data() {
    return {
      timesList: [], // 时间序列
      options: null,
      waterOptions: null,
      tootipTimer: null
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.getTmList()
  },
  beforeDestroy() {
    if (this.tootipTimer) {
      clearInterval(this.tootipTimer)
      this.tootipTimer = null
    }
  },
  methods: {
    getTmList() {
      // 模拟30条数据
      const timesList = []
      for (let i = 0; i < 28; i++) {
        const obj = {
          tm: `2024-04-${i + 1} ${i + 1}:32:00`,
          jl: (Math.random() * 100).toFixed(2),
          drp: (Math.random() * 100).toFixed(2),
          inq: (Math.random() * 100).toFixed(2),
          otq: (Math.random() * 100).toFixed(2),
          wl: (Math.random() * 100).toFixed(2),
          kr: (Math.random() * 100).toFixed(2)
        }
        timesList.push(obj)
      }
      this.timesList = timesList
      this.setChartOptions()
      this.setWaterOptions()
    },
    setChartOptions() {
      const { timesList } = this
      let option = cloneDeep(fourOptions)
      let { xAxis, series } = option
      if (!xAxis) return
      if (!timesList.length) {
        this.options = { ...option }
        this.$refs.chartRef.setOption(this.options) // 更新echarts
        return
      }
      const tms = timesList.map((item) => dayjs(item.tm).format('MM-DD HH:mm'))
      xAxis[0].data = tms
      xAxis[1].data = tms
      const keys = ['drp', 'inq', 'otq', 'wl', 'kr']
      series.forEach((item, index) => {
        item.data = timesList.map((item) => item[keys[index]])
      })

      const categorizedData = {
        降雨量: [],
        水位: [],
        流量: [],
        库容: []
      }
      series.forEach((item) => {
        const dataType = item.name.includes('流量')
          ? '流量'
          : item.name.includes('水位')
          ? '水位'
          : item.name.includes('库容')
          ? '库容'
          : '降雨量'
        categorizedData[dataType].push(...item.data.filter((value) => value))
      })
      const updatedOption = processDataAndSetYAxis(categorizedData, option)
      this.options = { ...updatedOption }
      const ref = this.$refs.echartRef
      ref.setOption(this.options)
      this.tootipTimer && this.tootipTimer.clearLoop() // this.tootipTimer 在data里定义
      this.tootipTimer = 0
      this.tootipTimer = loopShowTooltip(ref.chart, this.options, 0, 1000)
    },
    setWaterOptions() {
      const { timesList } = this
      let option = cloneDeep(waterOptions)
      let { xAxis, series } = option
      if (!xAxis) return
      if (!timesList.length) {
        this.waterOptions = { ...option }
        this.$refs.waterChartRef.setOption(this.waterOptions) // 更新echarts
        return
      }
      xAxis[0].data = timesList.map((item) => item.jl)
      series[0].data = timesList.map((item) => item.wl)
      this.waterOptions = { ...option }
      const ref = this.$refs.waterChartRef
      ref.setOption(this.waterOptions)
    }
  }
}
</script>

<style lang='scss' scoped>
.DepthChart-container {
  .chart {
    width: 100%;
    height: 260px;
  }
  .chart2 {
    width: 100%;
    height: 130px;
  }
}
</style>