echarts大屏實現橫向柱狀圖自動滾動數據

//昨日前10銷量增加30%站點
(function () {
    var nuna = document.getElementsByClassName("folot")
    //獲取內容盒子
    var coode = document.getElementsByClassName("monk2")
    //console.log(coode)
    //遍歷每個按鈕為其添加點擊事件
    ClickSalesup()

})();

function ClickSalesup() {
    var cood = document.getElementsByClassName("monk2")
    $.ajax({
        method:"get",
        url:"https://",//數據接口地址
        dataType:"json",
        data:{token:token},
        success: function (queryBYOrderChangeAdd) {
            var gastion= "昨日銷量增加30%站點列表";
            var debit_account=[]
            var sum=[]
            var data = queryBYOrderChangeAdd.datas;
            for (var i = data.length;i--;) {
                debit_account.push(data[i].name);
                sum.push(data[i].sum);
            }
            $('#SJtitle4').text(gastion)
            stationChart(debit_account,sum);
        }
    });
    $('#ClickSalesup').addClass(' active');
    $('#ClickSalesdown').removeClass(' active');
    $('#ClickStation').removeClass(' active');
    cood[0].className = cood[0].className.replace(' show', '').trim();

}


function ClickSalesdown() {
    var cood = document.getElementsByClassName("monk2")
     $.ajax({
        method:"get",
        url:"https://",//數據接口地址
        dataType:"json",
        data:{token:token},
        success: function (queryBYOrderChangeSub) {
            var gastion= "昨日銷量降低30%站點列表";
            var debit_account=[]
            var sum=[]
            var data = queryBYOrderChangeSub.datas;
            for (var i = 0; i<data.length; i++) {
                debit_account.push(data[i].name);
                sum.push(data[i].sum);
            }
            $('#SJtitle4').text(gastion)
            stationChart(debit_account,sum);
        }
    });
    $('#ClickSalesdown').addClass(' active');
    $('#ClickSalesup').removeClass(' active');
    $('#ClickStation').removeClass(' active');
    cood[0].className = cood[0].className.replace(' show', '').trim();
}

function ClickStation() {
    var cood = document.getElementsByClassName("monk2")
    $.ajax({
        method:"get",
        url:"https://",//數據接口地址
        dataType:"json",
        data:{token:token},
        success: function (queryZeroOrderCount) {
            var gastion= "昨日0消費站點列表";
            var debit_account=[]
            var sum=[]
            var data = queryZeroOrderCount.datas;
            for (var i = 0; i<data.length; i++) {
                debit_account.push(data[i].name);
                sum.push(data[i].id);
            }
            $('#SJtitle4').text(gastion)
            stationname(debit_account,sum);
            //console.log(debit_account)
        }
    });

    $('#ClickStation').addClass(' active');
    $('#ClickSalesup').removeClass(' active');
    $('#ClickSalesdown').removeClass(' active');
    cood[0].className = cood[0].className.replace(' show', '').trim();
}


  //自動滾動
   function autoMove(){
       //this.dataList.seriesData為柱形圖數據
         this.timeOut=setInterval(()=>{
        // clearInterval(this.timeOut)
        // 每次向后滾動一個，最后一個從頭開始。
        // if(this.stopMove){ return }
        var myChart = echarts.init(document.querySelector(".monk2"));
        var option=myChart.getOption();
        if (option.dataZoom[0].end==50) {
             option.dataZoom[0].end = 100;
             option.dataZoom[0].start = 50;
        } else {
            option.dataZoom[0].end -= 10;
            option.dataZoom[0].start -= 10;
        }
        myChart.setOption(option)
    },3000);
   }
    autoMove();
    //停止滾動
    function stop(){
      console.log(11)
      // this.stopMove=true
      clearInterval(this.timeOut)
    }
//條形圖1
function stationChart(debit_account,sum) {
     //console.log(debit_account,sum);
    // 1. 實例化對象
    var myChart = echarts.init(document.querySelector(".monk2"));
    option = {
        dataZoom: {
            type: 'slider',
            show: false,
            "filterMode": "empty",
            "disabled": false,
            yAxisIndex: 0,
            // top: '25%',
            right: '5%',
            // bottom: '15%',
            width: 10,
            start: 50,
            end: 100,
            handleSize: '0', // 滑動條的 左右2個滑動小塊的大小
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            textStyle: {
                color: "#fff"
            },
            fillerColor: '#3C62C0', // 拖動條的顏色
            borderColor: "none",
            backgroundColor: 'rgba(60, 98, 192, 0.302)',
            showDetail: false // 即拖拽時候是否顯示詳細數值信息 默認true
 
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '12%',
            top: '3%',
            bottom: '-10%',
            containLabel: true,

        },
        color: ['#5CBBEB'],
        xAxis: {
            type: 'value',
            show: false
        },
        yAxis: {
            type: 'category',
            data: debit_account,
            width: 150,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#5CBBEB',
                    fontSize: 10.5
                }
            },
                axisLine: {
                    show: false, // X軸 網格線 顏色類型的修改
                    lineStyle: {
                        color: '#FFFFFF0A'
                    }
                }
        },
        series: [
            {
                data: sum,
                type: 'bar',
                itemStyle: {        //上方顯示數值
                    normal: {
                        label: {
                            show: true, //開啟顯示
                            position: 'right', //在上方顯示
                            textStyle: { //數值樣式
                                color: '#5CBBEB',
                                fontSize: 12
                            }
                        }
                    }
                }
            }
        ]
    };


 // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);
     window.addEventListener("resize", function () {
         myChart.resize();
    });
}
function stationname(debit_account,sum) {
    var myChart = echarts.init(document.querySelector(".monk2"));
    option = {
        tooltip: {
            trigger: 'axis'
        },
        dataZoom: {
            type: 'slider',
            show: false,
            "filterMode": "empty",
            "disabled": false,
            yAxisIndex: 0,
            // top: '25%',
            right: '5%',
            // bottom: '15%',
            width: 10,
            start: 50,
            end: 80,
            handleSize: '0', // 滑動條的 左右2個滑動小塊的大小
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            textStyle: {
                color: "#fff"
            },
            fillerColor: '#3C62C0', // 拖動條的顏色
            borderColor: "none",
            backgroundColor: 'rgba(60, 98, 192, 0.302)',
            showDetail: false // 即拖拽時候是否顯示詳細數值信息 默認true

        },
        grid: {
            left: '12%',
            top: '3%',
            bottom: '-10%',
            containLabel: true,

        },
        color: ['#5CBBEB'],
        xAxis: {
            type: 'value',
            show: false
        },
        yAxis: {
            type: 'category',
            data: debit_account,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#5CBBEB',
                    fontSize: 12
                }
            },
                axisLine: {
                    show: false, // X軸 網格線 顏色類型的修改
                    lineStyle: {
                        color: '#FFFFFF0A'
                    }
                }
        },
       series:{
          type: 'bar',
          data: sum
   }

};
       myChart.setOption(option);
     window.addEventListener("resize", function () {
         myChart.resize();
    });
}

效果圖一次展示五條數據 該接口源數據不足因此展示效果不佳