vue+echarts中使图表能循环显示tooltip-使用封装tooltip的方法轮询显示图表数据

一个 mixin 工具(需要注意的是调用 ecahrts api 方法的变量叫 chart)

需要使用这个 chart 变量来调用提示方法, 下面代码里面有这个变量, 如果不熟悉mixin 就先自己看看, 也不要因为不会用 mixin 就感觉 mixin 不好, 人云亦云, 存在就有存在的意义

支持多系列(series)

seriesLength 如果不传默认为0

/*
 * @Description: 图标自动展示的工具
 * @Author:
 * @LastEditors: chengchongzhen
 * @Date: 2021-12-22 15:23:51
 * @LastEditTime: 2021-12-27 14:27:07
 */
export default {
  data() {
    return {
      dataIndex: 0,
      seriesLength: 0,
      seriesIndex: 0,
      dataLength: 0,
      hideTimer: null
    }
  },
  beforeDestroy() {
    if (this.hideTimer) {
      clearInterval(this.hideTimer)
      this.hideTimer = null
    }
  },
  methods: {
    /**
     * @description: 自动展示提示
     * @param {*} dataLength 数据长度
     * @param {*} time 循环时长
     * @return {*}
     */
    showTip(dataLength = 6, time = 1500, seriesLength = 0) {
      if (!this.dataLength) {
        this.dataLength = dataLength
      }
      if (!this.seriesLength) {
        this.seriesLength = seriesLength
      }
      if (this.chart) {
        // 多个系列的情况, 一个 dataindex 回合等于一个系列, 所有系列走完就要从第一个系列重新开始
        // 如果是一个系列, 则不考虑多系列的情况, 直接默认为第一项系列就好
        // dataindex 和 seriesindex 不会互相干扰
        if (this.dataIndex >= this.dataLength) {
          this.dataIndex = 0

          if (this.seriesLength > 0) {
            this.seriesIndex++
          }
          if (this.seriesIndex >= seriesLength) {
            this.seriesIndex = 0
          }
        }

        this.chart.dispatchAction({
          type: 'showTip',
          seriesIndex: this.seriesIndex,
          dataIndex: this.dataIndex++
        })
        this.hideTimer = setTimeout(() => {
          this.chart.dispatchAction({
            type: 'hideTip'
          })
        }, time / 1.5)
      }
    },

    /**
     * @description: 修改当前使用的数据长度
     * @param {*} length 数据长度
     * @return {*}
     */
    setDataLength(length) {
      console.log('setLength===>', length)
      this.dataLength = length
    }

    /**
     * @description: 手动点击触发(暂时不需要使用)
     * @param {*}
     * @return {*}
     */
    // handleShowTip(params) {
    //   this.dataIndex = params.dataIndex
    //   this.chart.dispatchAction({
    //     type: 'showTip',
    //     seriesIndex: 0,
    //     dataIndex: this.dataIndex
    //   })
    // }
  }
}

使用方法

引入你需要展示的组件即可

import showTip from '@/mixins/showTip-optimize.js'
export default {
  mixins: [showTip],
}

在父级组件中使用

<template>
  <div id="app">
    <div style="display: flex">
      <HelloWorld ref="chart" :chartData="chartData" />
      <HelloWorld ref="chart1" :chartData="chartData1" />
      <HelloWorld ref="chart2" :chartData="chartData2" />
      <HelloWorld ref="chart3" :chartData="chartData3" />
    div>
  div>
template>

mounted() {
    setTimeout(() => {
      // 你需要使用 refs 来调用子组件方法, 在这里先收集起来所有子组件
      const refs = [this.$refs.chart, this.$refs.chart1, this.$refs.chart2]

      // 数据长度, 因为自动展示方法需要在内部计算自己展示的当前下标(自己计算自己不影响他人)
      const dataLength = [
        this.chartData.length - 1,
        this.chartData1.length - 1,
        this.chartData2.length - 1
      ]
	  const loopTime = 3000
      let refIndex = 0 //当前调用的子组件下标
      // 循环调用方法, 一个循环调度所有子组件自动展示逻辑
      setInterval(() => {
        // 如果调用了一圈子组件就要归零
        if (refIndex >= refs.length) {
          refIndex = 0
        }
        refs[refIndex].showTip(dataLength[refIndex], loopTime)
        refIndex++
      }, loopTime )
    }, 500)
  }

首次实现用的是作者的思想, 但是发现图表数量多了之后, 首次展示的等待时间就会很长, 做了自己的优化, 实现思想就是每个图表组件都要有自己的展示逻辑, 自己判断下标是否大于了自己数据的长度, 自己做处理来重置下标
参考此文档