【Echarts】Echarts 柱形图实现从右向左滚动

效果图

vue2 代码

<!-- 横向柱状图测试结果 -->
<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: {
        yAxis: {
          type: "value",
          // boundaryGap: [0, 0.01]    // 柱图距离边界的距离
        },
        // yAxis: {
        xAxis: {
          type: "category",
          inverse: false, // 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, // 结束显示的数
          xAxisIndex: [0], // 代表是作用在y轴上的
          // 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>