echarts实现柱状图自动轮播/鼠标悬浮悬停-526互联

1.dataZoom配置

 dataZoom: [
                    //滑动条
                    {
                        xAxisIndex: 0, //这里是从X轴的0刻度开始
                        show: false, //是否显示滑动条，不影响使用
                        type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        startValue: 0, // 从头开始。
                        endValue: 1, // 一次性展示几个。
                    }
                ],

2.我封装了一个方法utils/carousel.js

//传入三个配置项，option, myChart,t：定时轮播时间
export function carouselFn(option, myChart,t) {
  option && myChart.setOption(option);
  let kk = setInterval(() => {
    // 每次向后滚动一个，最后一个从头开始。
    if (option.dataZoom[0].endValue == option.xAxis[0].data.length) {
      option.dataZoom[0].endValue = 1;
      option.dataZoom[0].startValue = 0;
    } else {
      option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
      option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
    }
    option && myChart.setOption(option);
  }, t);

  myChart.on("mouseover", (params) => {
    // 鼠标悬浮，停止自动轮播
    if (kk) clearInterval(kk);
  });

  myChart.on("mouseout", (params) => {
    // 鼠标移出，重新开始自动轮播
    if (kk) clearInterval(kk);
    kk = setInterval(() => {
      // 每次向后滚动一个，最后一个从头开始。
      if (option.dataZoom[0].endValue == option.xAxis[0].data.length) {
        option.dataZoom[0].endValue = 1;
        option.dataZoom[0].startValue = 0;
      } else {
        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
      }
      option && myChart.setOption(option);
    }, t);
  });
}

　　3.页面使用

3.1引入

3.2调用