echarts圖形 柱狀圖 數據過多自動滾動（完整代碼）

這個不是avue大屏的，avue大屏請看https://www.cnblogs.com/luckybaby519/p/15682365.html

不懂得可以問我哦

 

  var Xdata = ['63.27','27.90','33.52','17.98','42.25','24.54','33.96','11.73','72.58','45.36',];
      var Ydata = ['西安市','銅川市','咸陽市','漢中市','商洛市','安康市','渭南市','寶雞市','延安市','榆林市',];
   //自動滾動
      this.timeOut=setInterval(()=>{
        if (option.dataZoom[0].endValue == Xdata.length ) {
          option.dataZoom[0].endValue = 4;
          option.dataZoom[0].startValue = 0;
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        myChart.setOption(option);
      },2000)
option ={
    title: {
         text:'測試數據',
          textStyle: {
            fontSize: 12,
            color: '#E4765D', //標題顏色
          },
          subtext:'',
           subtextStyle: {
            fontSize: 12,
            color: '#E4765D', //副標題標題顏色
          },
        },
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐標軸指示器，坐標軸觸發有效
            type: "shadow", // 默認為直線，可選為：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
         xAxis: {
          //坐標軸類型(類目軸)
          name: "",
          type: "value",
          axisLabel: {
            show: false,
          },
       
          //是否顯示坐標軸刻度
          axisTick: { show: false },
          //坐標軸線線的顏色
          axisLine: {
            show: false,
          },
         
          //是否顯示網格線
      splitLine: {
              show: false,
             }
        },
 
        dataZoom: [
          //滑動條
          {
            yAxisIndex: 0, //這里是從X軸的0刻度開始
            show: false, //是否顯示滑動條，不影響使用
            type: "slider", // 這個 dataZoom 組件是 slider 型 dataZoom 組件
            startValue: 0, // 從頭開始。
            endValue: 4, // 一次性展示5個。
          },
        ],
        yAxis: [
          {
            type: "category",
            inverse: true, //是否是反向坐標軸
            data:Ydata,
             axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff',
            },
            formatter: function (value, index) {
              var value;
              // if判斷轉換值
              return value;
            },
          },
           offset: 10,
          nameTextStyle: {
            fontSize: 15,
          },
             splitLine: { show: false },
          axisTick: { show: false },
          //坐標軸線線的顏色
           axisLine: {
            show: true,
            lineStyle: {
              color: '#0E3B57',
              type: 'solid',
              width: 1,
            },
          },
          },

        ],
        series: [
          {
            name: "用煤量",
            type: "bar",
              barMaxWidth: 10,
            // barWidth: "60%",
            data: Xdata,
             barWidth:8,
            barGap: 10,
            smooth: true,
             label: {
              normal: {
                show: false,
                position: 'right',
                offset: [5, -2],
                textStyle: {
                  color: '#F68300',
                  fontSize: 13,
                },
              },
            },
               itemStyle: {
              emphasis: {
                barBorderRadius: 7,
              },
              //顏色漸變
              normal: {
                barBorderRadius: 7,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {offset: 0, color: '#040C3B'},
                {offset: 0.5, color: '#6D3F46'},
                {offset: 1, color: '#E4765D'}
                ]),
              },
            },
            
          },
        ],
      };