【echarts图轮播tooltips】

定义echarts图

let chartDom = document.getElementById('id');
let myChart = echarts.init(chartDom);

写定时任务

通过echarts的events来控制高亮以及tooltips的现实

/**
     @params dom dom元素
     @params chartOption echarts的Option
     @params timer 定时器
     */
    setTimerToolTips(dom, chartOption, timer) {
      clearInterval(timer); //清除定时器，防止轮播出现混乱
      let index = -1;
      timer = setInterval(() => {
        //取消高亮
        dom.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index
        });
        index = (index + 1) % chartOption.series[0].data.length; //计算索引
        //显示tooptips
        dom.dispatchAction({ //Echarts提供的方法
          type: "showTip",
          seriesIndex: 0,
          dataIndex: index
        });
        //高亮
        dom.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: index
        });
      }, 5000);
    },

调用定时任务

this.setTimerToolTips(myChart, option, this.timer)

原文地址：https://blog.csdn.net/zhangxxxq/article/details/143713143

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！