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%',
             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,
             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%',
             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();
    });
}

效果图一次展示五条数据 该接口源数据不足因此展示效果不佳