动态象形柱图

    var myCharts = echarts.init(document.getElementById(id));
    var unit = '元';
    var option = {
        grid: {
            left: '8%',
            right: '20%',
            top: '20%',
            bottom: '15%',
            containLabel: true
        },
        tooltip: {
            trigger: "item",
            formatter: function (p) {
                return p.value + unit;
            },
        },
        xAxis: {
            splitLine: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        yAxis: [{
            type: "category",
            inverse: false,
            data: [],
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
                lineStyle: {
                    type: "dashed",
                    color: "#8e5139",
                },
            },
            axisLabel: {
                margin: 35,
                textStyle: {
                    color: "#fff",
                    fontSize: 14,
                },
            },
        }, ],
        series: [{
                tooltip: {
                    show: false,
                },
                itemStyle: {
                    normal: {
                        opacity: 0.2
                    }
                },
                z: 4,
                type: "pictorialBar",
                symbolSize: [14, 14],
                symbolRepeat: "fixed",
                data: [],
            },

            {
                z: 6,
                type: "pictorialBar",

                symbolSize: [14, 14],

                animation: true,
                symbolRepeat: "fixed",
                symbolClip: true,
                symbolPosition: "start",
                symbolOffset: [0, 0],
                data: [],
                label: {
                    normal: {
                        show: true,

                        textStyle: {
                            color: "#ffffff",
                            fontSize: 14,
                        },
                        formatter: function (p) {
                            return p.value + unit;
                        },
                        position: "right",
                        offset: [8, 0],
                    },
                },
            },
        ],
    };
    var img1 = {
        finance1: './images/icon-finance-yellow.png',
        finance2: './images/icon-finance-purple.png',
    };
    var res = {
        data:[1260,2680,3320,12360,85600,10000],
        axisData:['水费','电费','物业费','劳务费','资产性支出','其他']
    };

    if (res.data.length == 0) {
        $('#' + id).html(_err)
    } else {
        let yAxisData = res.axisData;
        let serData = res.data;
        option.yAxis[0].data = yAxisData.slice(0, 5);
        var data = [],
            data_max = [];
        var max = 0;
        max = Math.max(...serData);
        for (var i = 0; i < serData.slice(0, 5).length; i++) {
            data.push({
                value: serData.slice(0, 5)[i],
                symbol: "image://"+img1['finance' + (i % 2 == 0 ? 1 : 2)],
                symbolSize: [14, 14],
            })
            data_max.push({
                value: max,
                symbol:"image://"+ img1['finance' + (i % 2 == 0 ? 1 : 2)],
                symbolSize: [14, 14],
            })
        }
        option.series[0].data = data_max
        option.series[1].data = data
        myCharts.setOption(option);

        function moveFun() {
            var yAxisData_data = yAxisData.shift(),
                serData_data = serData.shift();
            yAxisData.push(yAxisData_data);
            serData.push(serData_data);
            option.yAxis[0].data = yAxisData.slice(0, 5);
            var data = [],
                data_max = [];
            var max = 0;
            max = Math.max(...serData);
            for (var i = 0; i < serData.slice(0, 5).length; i++) {
                data.push({
                    value: serData.slice(0, 5)[i],
                    symbol: "image://"+img1['finance' + (i % 2 == 0 ? 1 : 2)],
                    symbolSize: [14, 14],
                })
                data_max.push({
                    value: max,
                    symbol:"image://"+ img1['finance' + (i % 2 == 0 ? 1 : 2)],
                    symbolSize: [14, 14],
                })
            }
            option.series[0].data = data_max
            option.series[1].data = data
            myCharts.setOption(option);
        }
        if (serData.length > 5) {
            var timer = setInterval(moveFun, 3000)
            $('#' + id).hover(function () {
                clearInterval(timer)
            }, function () {
                timer = setTimeout(moveFun, 500)
                timer = setInterval(moveFun, 3000);
            })
        }

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