echarts图表动态显示数据

<script>
        var xData = (function () {
            var data = ['ZBFX', '治安重点', '人口重点', '刑释解教', '信访人员']
            return data
        })()

        var ydata1 = [],
            ydata2 = [],
            ydata3 = []
        var zdrykl = echarts.init(document.getElementById('zdrykl'));

        zdrykl.setOption({
            title: {
                text: '重点人员客流',
                textStyle: {
                    fontSize: 14,
                    fontWeight: 'normal',
                    color: '#fff',
                },
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    textStyle: {
                        color: '#7ABFE7',
                    },
                },
            },
            grid: {
                borderWidth: 0,
                top: '20%',
                left: '10%',
                right: '2%',
                bottom: '10%',
                textStyle: {
                    color: '#7ABFE7',
                },
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                axisLine: {
                    // show: false,
                    lineStyle: {
                        color: 'rgba(10,50,73,.5)',
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitArea: {
                    show: false,
                },
                axisLabel: {
                    // show: false,
                    interval: 0,
                    color: '#7BC0E7',
                    fontSize: 10,
                },
                data: xData,
            }, ],
            yAxis: [{
                // name: '万人',
                // nameTextStyle: {
                //     color: '#285B77',
                //     padding: [0, 0, 0, -50],
                // },
                nameGap: 15,
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'RGBA(123,192,231, .2)',
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(10,50,73,.5)',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    // show: false,
                    interval: 0,
                    color: '#7BC0E7',
                    fontSize: 10,
                },
                splitArea: {
                    show: false,
                },
            }, ],
            series: [{
                    name: '到店',
                    type: 'bar',
                    stack: '1',
                    barMaxWidth: 15,
                    barGap: '10%',
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                        offset: 0,
                                        color: '#2478F7', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#2478F7', // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                            opacity: 1,
                        },
                    },
                    data: ydata1,
                },

                {
                    name: '救援',
                    type: 'bar',
                    stack: '1',
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                        offset: 0,
                                        color: '#24BEF7', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#24BEF7', // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                            opacity: 0.9,
                            barBorderRadius: 0,
                        },
                    },
                    data: ydata2,
                },
                {
                    name: '上门',
                    type: 'bar',
                    stack: '1',
                    barMaxWidth: 15,
                    barGap: '10%',
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                        offset: 0,
                                        color: '#48F9FF', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#48F9FF', // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                            opacity: 1,
                        },
                    },
                    data: ydata3,
                },
            ],
        })
        setInterval(() => {
            ydata1 = []
            ydata2 = []
            ydata3 = []
            for (let i = 0; i < 5; i++) {
                ydata1.push(Math.round(Math.random() * 100))
                ydata2.push(Math.round(Math.random() * 100))
                ydata3.push(Math.round(Math.random() * 100))
            }
            zdrykl.setOption({
                series: [{
                        name: '到店',
                        type: 'bar',
                        stack: '1',
                        barMaxWidth: 15,
                        barGap: '10%',
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                            offset: 0,
                                            color: '#2478F7', // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#2478F7', // 100% 处的颜色
                                        },
                                    ],
                                    global: false, // 缺省为 false
                                },
                                opacity: 1,
                            },
                        },
                        data: ydata1,
                    },

                    {
                        name: '救援',
                        type: 'bar',
                        stack: '1',
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                            offset: 0,
                                            color: '#24BEF7', // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#24BEF7', // 100% 处的颜色
                                        },
                                    ],
                                    global: false, // 缺省为 false
                                },
                                opacity: 0.9,
                                barBorderRadius: 0,
                            },
                        },
                        data: ydata2,
                    },
                    {
                        name: '上门',
                        type: 'bar',
                        stack: '1',
                        barMaxWidth: 15,
                        barGap: '10%',
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                            offset: 0,
                                            color: '#48F9FF', // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#48F9FF', // 100% 处的颜色
                                        },
                                    ],
                                    global: false, // 缺省为 false
                                },
                                opacity: 1,
                            },
                        },
                        data: ydata3,
                    },
                ]
            })
        }, 3000)

        window.onresize = function () {
            zdrykl.resize();
        }
    </script>