Vue 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>

来源：https://blog.csdn.net/qq_46123200/article/details/130754514