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);
    

      

  • 相关阅读:
    ANDROID笔记:通过ContentProvider得到SD卡的图片
    android:ViewPager显示Fragment(碎片)
    ANDROID笔记:使用动画替代viewpager的header
    ANDROID笔记:ListPopupWindow的使用
    ANDROID笔记:Activity的显式和隐式调用
    ANDROID笔记:Activity之间的传值
    go语言下载页面html代码(d3.js代码)
    如何使用sas proc过程步产生的结果
    福昕PDF阅读器的图章妙用
    测试成功的d3.js代码
  • 原文地址:https://www.cnblogs.com/CandyDChen/p/15184295.html
Copyright © 2011-2022 走看看