横向柱状图轮播,定时器echarts right配置项内容和展示

自动轮播,添加了定时器

配置项如下
      var barData = {
    yAxis: ["-550m中段", "-160m中段", "-320m中段", "-360m中段", "-280m中段", "-120m中段"],
    xAxis: [4, 8, 9, 12, 13, 15]

};
var timer1 = null;
var timer2 = null;
var xData = barData.xAxis;
var yData = barData.yAxis;
var xxData = xData.slice(0, 4);
var yyData = yData.slice(0, 4);
option = {
    backgroundColor:'#000',
    title: {
        text: "异常监测点分布",
        textStyle: {
            color: "rgb(255, 255, 255)",
            fontSize: 42
        },
        textAlign: "center",
        x: 400,
        y: "top"
    },
    grid: {
        left: '5%',
        right: '8%',
        top: '20%',
        bottom: '3%',
        containLabel: true
    },
    tooltip: {
        trigger: "axis",
        textStyle: {
            fontSize: 50
        }
    },
    xAxis: [{
        axisLabel: {
            color: '#ccc',
            fontSize: '35'
        },
        type: "value"
    }],
    yAxis: [{
        axisLabel: {
            color: '#ccc',
            fontSize: '35',
            margin: 30,
        },
        type: "category",
        axisLabel: {
            show: true,
            interval: 0,
            shadowOffsetX: '-20px',
            color: function(params) {
                if (params == yyData[2]) {
                    return "#4dfd30"
                } else {
                    return '#7ac4fc'
                }
            },
            fontSize: 42,
        },
        data: yyData
    }],
    series: [{
        type: "bar",
        data: xxData,
        barWidth: 20,
        itemStyle: {
            normal: {
                barBorderRadius: 10,
                label: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        fontSize: 40,
                        color: 'rgba(123,198 ,255)'
                    }
                },
                color: function(param) {
                    if (param.name == yyData[2]) {

                        return new echarts.graphic.LinearGradient(1, 0, 0,
                            0, [{
                                    offset: 0,
                                    color: 'rgba(77,253,48,1)'
                                }, {
                                    offset: 0.15,
                                    color: 'rgba(77,253,48,0.5)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(77,253,48,0.1)'
                                }
                            ])
                    } else {
                        return new echarts.graphic.LinearGradient(1, 0, 0,
                            0, [{
                                    offset: 0,
                                    color: 'rgba(61,126,235,1)'
                                }, {
                                    offset: 0.4,
                                    color: 'rgba(123,198 ,255,0.5)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(123,198,255,0.1)'
                                }
                            ])
                    }
                },
            }
        },
        z: 2
    }],
    color: ["rgb(30, 144, 255)"],
    animation: true,
    animationThreshold: 10000,
    animationEasing: 'elasticOut',
    quadraticIn: function(idx) {
        return idx * idx;
    }
};
setTimeout(function() {
    myChart.setOption(option);
}, 1000);
clearInterval(timer2);
timer2 = setInterval(function() {
    var first1 = xData[0];
    var first2 = yData[0];

    xData.shift(first1);
    xData.push(first1);
    yData.shift(first2);
    yData.push(first2);
    var xxData = xData.slice(0, 4);
    var yyData = yData.slice(0, 4);
    myChart.setOption({
        yAxis: [{
            axisTick: 'none',
            axisLine: 'none',
            offset: '27',
            axisLabel: {
                show: true,
                interval: 0,
                shadowOffsetX: '-20px',
                color: function(params) {
                    if (params == yyData[2]) {
                        return "#4dfd30"
                    } else {
                        return '#7ac4fc'
                    }
                },
                fontSize: 42,
            },

            data: yyData
        }],
        series: [{
            type: 'bar',
            yAxisIndex: 0,
            data: xxData,
            itemStyle: {
                barBorderRadius: 4,
                color: function(param) {
                    if (param.name == yyData[2]) {
                        return new echarts.graphic
                            .LinearGradient(1, 0, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(77,253,48,1)'
                                }, {
                                    offset: 0.15,
                                    color: 'rgba(77,253,48,0.5)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(77,253,48,0.1)'
                                }
                            ])
                    } else {
                        return new echarts.graphic
                            .LinearGradient(1, 0, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(61,126,235,1)'
                                }, {
                                    offset: 0.4,
                                    color: 'rgba(123,198 ,255,0.5)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(123,198,255,0.1)'
                                }
                            ])
                    }
                },

            },
            z: 2
        }, ],
        animation: true,
        animationThreshold: 10000,
        animationEasing: 'elasticOut',
        quadraticIn: function(idx) {
            return idx * idx;
        }
    });
}, 3000);
    
截图如下