vue+echarts 实现横向柱状图自动滚动与鼠标滚轮滑动

实现功能：
柱状图定时滚动同时可以用鼠标滚轮控制滚动

不多说，直接上源码：

<!-- 横向柱状图测试结果 -->
<template>
  <div>
    <h3>横向柱状图测试</h3>
    <div style="width: 500px; height: 500px; background-color: antiquewhite">
      <div id="heng" style="width: 100%; height: 100%;" ></div>
    </div>
  </div>
</template>

<script>
// import * as echarts from 'echarts';

export default {
  name: "hengzhu",
    data() {
        return {
          // data: [1000, 800, 600, 500, 540, 1100, 528, 55, 66, 588, 980, 563, 578, 154, 55, 66, 55, 66, 452, 652]
          // data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000]
          data: [2000, 1900, 1800, 1700, 1600, 1500, 1400, 1300, 1200, 1100, 1000, 900, 900, 800, 700, 600, 500, 400, 300, 200],
          start: 0,
          end:5
        }
    },
    created() {
      this.dingshi();
    },
    mounted() {
      this.heng();
      // this.dingshi();
    },
    methods: {
      heng() {
        // let that = this;
        // alert("执行");

        let chartDom = document.getElementById('heng');
        let myChart = this.$echarts.init(chartDom);
        let option = {
          title: {
            text: 'World Population'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            // boundaryGap: [0, 0.01]    // 柱图距离边界的距离
          },
          yAxis: {
            type: 'category',
            inverse: true,    // ture: 从上到下显示， 默认：从下到上显示，下面的数值会跟着变动
            data: ['aa', 'bb', 'cc', 'dd', 'ee', 'ff', 'gg', 'hh', 'ii', 'jj', 'kk', 'll', 'mm', 'nn', 'oo', 'pp', 'qq', 'rr', 'ss', 'tt'],
          },
          dataZoom: {
            type: 'inside',     // inside: 表示用内测滑块
            startValue: this.start,     // 开始显示的数
            endValue: this.end,       // 结束显示的数
            yAxisIndex: [0],    // 代表是作用在y轴上的
            // start: '10',
            // end: '1'
            // zoomLock: true,
            zoomOnMouseWheel: false,  // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移

          },
          series: [
            {
              type: 'bar',
              // realtimeSort: true,   // 这个可以与 yAxis-inverse 配合，让数据正序显示还是逆序显示
              data: this.data
            },
          ]
        };
        myChart.setOption(option);
        // setInterval(function () {
        //   this.data = [1000, 800, 600, 500, 540, 1100, 528, 55, 66, 588, 980, 563, 578, 154, 55, 66, 55, 66, 452, 1200]
        // }, 2000)
      },

      /** 定时跳动 */
      dingshi() {
        let that = this;
        setInterval(function () {
          if (that.end == that.data.length){
            that.start = 0;
            that.end = 5;
          } else {
            that.start = that.start + 1;
            that.end = that.end + 1;
          }
          that.heng();
        }, 3000)
      }
    }
}
</script>

<style scoped>

</style>