• echarts中使图表循环显示tooltip-封装tooltip的方*询显示图表数据


    1、一个适用于所有图表斗可用的工具方法

    问题:
    在做echarts图表时,如何让图标的数据轮询显示,并且鼠标移上去时就停止跳动,移开继续轮询。
    解决:

    /**
     * @description: 图表tooltip循环显示
     * @author: candy.d.chen
     * @LastEditors: candy.d.chen
     * @LastEditTime: 2021/6/25 10:39
     */
    // 内容可以不需要修改
    /**
    * maChart是echarts初始化的实例对象
    * num 是series 里面的data长度,传入值可为option.series[0].data.length
    * time 是时间间隔

    */
    export function autoPlay(myChart, num, time) {
      const defaultData = { // 设置默认值
        time: 3000,
        num: 100
      };
      if (!time) {
        time = defaultData.time
      }
      if (!num) {
        num = defaultData.num
      }
      let count = 0
      let timeTicket = null
      timeTicket && clearInterval(timeTicket)
      timeTicket = setInterval(() => {
        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', (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', () => {
        timeTicket && clearInterval(timeTicket)
        timeTicket = setInterval(() => {
          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)
      })
    // 注意使用vue或者react 框架时,页面重新渲染时要清除相应的定时器,避免页面错乱,所以这里把
    timeTicket 返回出去,以便销毁清除定时器
     return timeTicket
    } export default { autoPlay } 

    2、使用

    import { autoPlay } from './tools'
    
    autoPlay(myChart, option.series[0].data.length, 3000);
    

      

  • 相关阅读:
    网络性能测试工具iperf详细使用图文教程zz
    linux时间和定时器zz
    sleep
    linux调度器的配置参数zz
    zz升级Mininet自带的OpenvSwitch & 编译OpenvSwitch
    minnet sample
    电信新势力,TIP/CORD能颠覆电信设备商吗?
    【TS】534- TypeScript 可辨识联合
    【拓展】一张图看懂字节跳动8年创业史,太励志了吧
    【CSS】533- CSS 渲染原理以及优化策略
  • 原文地址:https://www.cnblogs.com/CandyDChen/p/15184295.html
Copyright © 2020-2023  润新知