zoukankan      html  css  js  c++  java
  • 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);
    

      

  • 相关阅读:
    计算机网络
    AJAX
    数组---构建乘积数组
    数组----数组中的重复数字
    字符串---替换空格
    摘要评注The Cathedral & The Bazaar
    BlackJack Strategy
    招聘真题集合
    IIS+PHP+Mysql 返回500,服务器内部资源问题
    熄灯问题(枚举、位运算)
  • 原文地址:https://www.cnblogs.com/CandyDChen/p/15184295.html
Copyright © 2011-2022 走看看