echarts自动轮播并且高亮，如下是柱状图的演示例子，鼠标移入移除清除计时器，已封装好方法

下面是js文件，直接引入后使用 – 使用方法在后面~

/**
 *  echarts tooltip 自动轮播
 *  @param dom     // 图表的dom
 *  @param myChart  // 初始化echarts的实例
 *  @param option   // 指定图表的配置项和数据
 *  @param length      // 类目数量(原因：循环时达到最大值后，使其从头开始循环)， x轴有几项就填几
 *  @param pageSize      // 一页显示的数据数目
 *  @param timeObj     // 轮播定时器记录
 *  @param time     // 轮播间隔时长
 */
// 比如length是12，一页显示9个数据 == pageSize
export function autoHover(dom, myChart, option, length, pageSize, timeObj, time) {
  function circleHandler() {
    count = count % length;
    let center = Math.floor(pageSize / 2);  // 4
    if (pageSize < length) {  // 因为一页显示不满 所以才显示滚动条
      // 如果当前下标在中间值后面 则 滚动条不动
      if (count <= center) {
        console.log("count <= center", count)
        // 先滚动条走到最刚开始 再高亮
        option.dataZoom[0].endValue = pageSize - 1;
        option.dataZoom[0].startValue = 0;
        myChart.setOption(option);
        setHighLight(myChart, count);
      } else if (count > center && option.dataZoom[0].endValue != (length - 1)) {  // 如果当前小标大于中间值并且滚动条还没到最后，走滚动条
      	option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        myChart.setOption(option);
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0, //serieIndex的索引值   可以触发多个
          dataIndex: count-1
        });
        setHighLight(myChart, count);
      } else if (count < (length - 1) && option.dataZoom[0].endValue == (length - 1)) {  // 如果滚动条到最后
        option.dataZoom[0].endValue = (length - 1);
        option.dataZoom[0].startValue = (length -1) - (pageSize - 1) ;
        myChart.setOption(option);
        setHighLight(myChart, count);
      } else if (count == (length - 1)) {  // 下标结束了
        setHighLight(myChart, count);
      }
    } else {
      setHighLight(myChart, count);
    }
    count++;
    if (count >= length) {
      count = 0
    }
  }
  var count = 0;
  timeObj.timeTicket && clearInterval(timeObj.timeTicket);
  timeObj.timeTicket = null;
  timeObj.timeTicket = setInterval(circleHandler, time);
  // 设置移入移除
  dom.addEventListener("mouseover", () => {
    console.log("dom==mouseover")
    timeObj.timeTicket && clearInterval(timeObj.timeTicket);
  })
  dom.addEventListener("mouseout", () => {
    console.log("dom==mouseout")
    timeObj.timeTicket && clearInterval(timeObj.timeTicket);
    timeObj.timeTicket = setInterval(circleHandler, time);
  })
}
function setHighLight(myChart, count) {
  myChart.dispatchAction({
    type: "downplay",
    seriesIndex: 0, //serieIndex的索引值   可以触发多个
    dataIndex: count
  });
  myChart.dispatchAction({
    type: "highlight",
    seriesIndex: 0,
    dataIndex: count
  });
  myChart.dispatchAction({
    type: "showTip",
    seriesIndex: 0,
    dataIndex: count
  });
}
export default {
  autoHover
}

使用方法
vue项目直接引入后 tool.autoHover(dom, this.mychart, this.option, xList.length, 9, this.timeObj, 1000);

如下附上柱状图的配置项

<template>
  <div class="th-bar-container" ref="mychart">
    
  </div>
</template>

<script>
import tool from './autoPlayEchartsPlus.js'
const { RectEditingMixin } = window.Vue.prototype.$imx.mixin;
// import { graphic } from "echarts/lib/export"
export default {
  data() {
    return {
      option: {},
      timeObj: {
        timeTicket: null
      }
    }
  },
  beforeDestroy() {
    console.log("beforeDestroy")
    console.log(this.timeObj.timeTicket);
    clearInterval(this.timeObj.timeTicket);
    this.timeObj.timeTicket = null;
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let dom = this.$refs.mychart;
      // 没有滚动条的数据
      // var yList = [61, 86, 67, 43, 52];
      // var maxData = [200, 200, 200, 200, 200];
      // var xList = ['建新镇', '盖山镇', '金山街道', '上渡街道', '下渡街道'];
      // 有滚动条的数据
      var yList = [61, 86, 67, 43, 52, 70, 52, 70, 86, 67, 43, 52];
      var maxData = [200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200];
      var xList = ['建新镇', '盖山镇', '金山街道', '上渡街道', '下渡街道', '苍霞街道', '苍街道', '霞街道', '苍霞街', '山街道', '新镇', '旧镇'];
      var xData = xList.map((item, index) => {
        return {
          value: item,
        };
      });
      var barWidth = 20;
      var colors = [
        {
            type: 'linear',
            x: 0,
            x2: 1,
            y: 0,
            y2: 0,
            colorStops: [
                {
                    offset: 0,
                    color: '#B2F2FF', // 顶部柱状图 
                },
                {
                    offset: 0.5,
                    color: '#0066CC',  // 左侧 的右边渐变
                },
                {
                    offset: 0.5,
                    color: '#0095FF',  // 右侧 的 左边渐变
                },
                {
                    offset: 1,
                    color: '#00AACC',  // 右侧 右边
                },
                {
                    offset: 0,
                    color: '#00AACC',  // 顶部柱状图 顶部
                },
                {
                    offset: 0,
                    color: 'rgba(0,170,255,0.2)',
                },
            ],
        },
      ];
      var bgColor = {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
              {
                  offset: 0,
                  color: '#B2F2FF', // 顶部柱状图 
              },
              {
                  offset: 0.5,
                  color: 'rgba(0,170,255,0.2)',  // 左侧 的右边渐变
              },
              {
                  offset: 0.5,
                  color: 'rgba(0,170,255,0.4)',  // 右侧 的 左边渐变
              },
              {
                  offset: 1,
                  color: 'rgba(0,170,255,0.4)',  // 右侧 右边
              },
              {
                  offset: 0,
                  color: '#00AACC',  // 顶部柱状图 顶部
              },
              {
                  offset: 0,
                  color: 'rgba(0,170,255,0.2)',
              },
          ],
      }
      var activeColor = {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
              {
                  offset: 0,
                  color: '#B2F2FF', // 顶部柱状图 
              },
              {
                  offset: 0.5,
                  color: '#00CCCC',  // 左侧 的右边渐变
              },
              {
                  offset: 0.5,
                  color: '#009999',  // 右侧 的 左边渐变
              },
              {
                  offset: 1,
                  color: '#33FFBB',  // 右侧 右边
              },
              {
                  offset: 0,
                  color: '#00AACC',  // 顶部柱状图 顶部
              },
              {
                  offset: 0,
                  color: 'rgba(0,170,255,0.2)',
              },
          ],
      }
      var activeBGColor = {
          type: 'linear',
          x: 0,
          x2: 0,
          y: 1,
          y2: 0,
          colorStops: [
              {
                  offset: 0,
                  color: 'rgba(0,255,170,0.2)', // 顶部柱状图 
              },
              {
                  offset: 0.35,
                  color: 'rgba(0,255,170,0.1)',  // 左侧 的右边渐变
              },
              {
                  offset: 1,
                  color: 'rgba(0,255,170, 0)',  // 右侧 的 左边渐变
              },
          ],
      }
      this.option = {
        backgroundColor: 'black',
        tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line",
              lineStyle: {
                color: activeBGColor,
                width: barWidth + 30,
                type: "solid",
              },
              z: -4,  //注意要设置层级，不然会在覆盖在柱子前面，设置为0就在柱子后面显示了。
            },
            formatter: (params)=>{
              let dataStr = `<div class="bar-img-wrap"><span>${params[0].value}</span></div>`;
              return dataStr;
            },
            borderColor: 'rgba(0, 0, 0, 0)',
            backgroundColor: 'rgba(0, 0, 0, 0)',
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        dataZoom: [
          //滑动条
          {
            xAxisIndex: 0, //这里是从X轴的0刻度开始
            show: true, //是否显示滑动条，不影响使用
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 8, // 一次性展示6个
            height: 8, //组件高度
            bottom: 0,
            borderColor: "rgba(43,48,67,.8)",
            fillerColor: "#19D4AE",
            showDataShadow: false, //是否显示数据阴影 默认auto
            backgroundColor: "#f4f6f8",
            showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
            realtime: false, //是否实时更新
            filterMode: "filter"
          }
        ],
        xAxis: {
            data: xData,
            show: true,
            type: 'category',
            axisLabel: {
              interval: 0,
              show: true,
              color: "#FFF"
            },
            axisLine: {
              lineStyle: {
                color: "#B3D8FF",
              },
            },
            axisTick: {
              show: false,
            },
        },
        yAxis: {
            show: true,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#B3D8FF88',
              },
            },
            name: "人",
            nameTextStyle: {
              color: "#FFF",
              align: "right",
              padding: [0, 6, 0, 0]
            },
            axisLabel: {
              color: '#FFF',
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            axisLine: {
              //y轴
              show: false,
            },
        },
        series: [
          // y数据背景
          {
              type: 'bar',
              barWidth: barWidth,
              showBackground: true,
              itemStyle: {
                  normal: {
                      color: function (params) {
                          // return colors[params.dataIndex % 7];
                          return colors[0];
                      },
                  },
              },
              emphasis: {
                  disabled: false,
                  itemStyle: {
                      color: activeColor
                  }
              },
              data: yList,
          },

          // 柱状图 背景
          {
              data: maxData,
              type: 'bar',
              barMaxWidth: 'auto',
              barWidth: barWidth,
              barGap: '-100%',
              itemStyle: {
                  normal: {
                      color: function (params) {
                          // return colors[params.dataIndex % 7].colorStops[5].color;
                          return bgColor;
                      },
                  },
              },
              zlevel: -1,
          },
          // 底部的立体效果
          {
              z: 2,
              type: 'pictorialBar',
              data: yList,
              symbol: 'diamond',
              symbolOffset: [0, '50%'],
              symbolSize: [barWidth, barWidth * 0.25],
              itemStyle: {
                  normal: {
                      color: function (params) {
                          // return colors[params.dataIndex % 7];
                          return colors[0];
                      },
                  },
              },
              emphasis: {
                  disabled: false,
                  itemStyle: {
                      color: "#00CCCC"
                  }
              },
          },
          // y数据顶部
          {
              z: 3,
              type: 'pictorialBar',
              symbolPosition: 'end',
              data: yList,
              symbol: 'diamond',
              symbolOffset: [0, '-50%'],
              symbolSize: [barWidth, barWidth * 0.25],
              itemStyle: {
                  normal: {
                      borderWidth: 0,
                      color: function (params) {
                          // return colors[params.dataIndex % 7].colorStops[0].color;
                          return colors[0].colorStops[0].color;
                      },
                  },
              },
              emphasis: {
                  disabled: false,
                  itemStyle: {
                      color: "#FFF"
                  }
              },
          },

          // 顶部柱状图 顶部
          {
            z: 3,
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: maxData,
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [barWidth, barWidth * 0.25],
            itemStyle: {
              normal: {
                borderWidth: 0,
                color: function (params) {
                  // return colors[params.dataIndex % 7].colorStops[4].color;
                  return colors[0].colorStops[4].color;
                },
              },
            },
          },
        ],
      };
      
      this.mychart = this.$echarts.init(dom);
      this.mychart.setOption(this.option);
      tool.autoHover(dom, this.mychart, this.option, xList.length, 9, this.timeObj, 1000); //固定写法
    },
  }
};
</script>
<style lang="less">
.th-bar-container {
  width: 500px;
  height: 246px;
  background: linear-gradient(180deg, #00398ACC 0%, rgba(0,59,130,0.8) 100%);
}
.bar-img-wrap {
  width: 64px;
  height: 28px;
  line-height: 28px;
  padding-left: 18px;
  background: url("~@/components/afz/image/barToolip@2x.png");
  background-size: contain;
  span {
    font-size: 16px;
    font-family: "visual";
    color: #CCFFE5;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.3);
  }
}
</style>