avue大屏 avue-data echarts圖形數據過多自動滾動

 效果圖演示：

  

大屏通用柱狀圖編輯界面：

 

  代碼如下：(准備需要的id)

 

 

(data)=>{
     let myChart = echarts.init(document.getElementById("itema3e847c9-3199-4236-b967-cb5cc070ba6f"));//avue-data通用柱狀圖自滾動需要的id
    let Xdata = ['63.27','27.90','33.52','17.98','42.25','24.54','33.96','11.73','72.58','45.36',]

let 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)
    let  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' },
                ]),
              },
            },
          },
        ],
      }
return option
        
}

想要了解更多avue大屏的知識，記得私信我哦。