echarts柱状图折线图，给后端返回的数据设置宽度和不同颜色

 getsummaryinfo(){
     summaryinfo().then((response) => {
         this.xaxis = response.data.xaxis;
         this.series = response.data.series;
         for (let i = 0; i < response.data.series.length; i++) {
             this.legend.push(response.data.series[i].name)
         }
         response.data.series.forEach(series => {
             if (series.type === 'bar') {
                 series.barWidth = 20;
                 // 同时设置颜色
                 if (series.name === '合格') {
                     series.itemStyle = { color: '#82FA7D' };
                 } else if (series.name === '不合格') {
                     series.itemStyle = { color: '#FF6B6B' };
                 }
             } else if (series.type === 'line') {
                 // 为折线图设置样式
                 series.symbol = 'circle';
                 series.symbolSize = 8;
                 series.lineStyle = { width: 3 };
                 series.itemStyle = { color: '#5292FF' };
             }
         });
         this.$nextTick(()=> {
             this.drawsummarylinebar()
         })
     })
 },

 // 统计图表
            drawsummarylinebar(){
                var summarylinebar=echarts.init(document.getElementById('summarylinebar'));
                var summarylinebarOption={
                    color: ["rgb(82,146,255)"],
                    backgroundColor: '#2C3D55',
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        top: "15%",
                        left: "5%",
                        right: "3%",
                        bottom: "15%",
                    },
                    legend: {
                        data: this.legend,
                        textStyle: {
                            color: "#f9f9f9",
                            borderColor: "#fff",
                        },
                    },
                    xAxis: [
                        {
                            type: "category",
                            boundaryGap: true,
                            axisLine: {
                                //坐标轴轴线相关设置。数学上的x轴
                                show: true,
                                lineStyle: {
                                color: "#f9f9f9",
                                },
                            },
                            axisLabel: {
                                //坐标轴刻度标签的相关设置
                                textStyle: {
                                color: "#d1e6eb",
                                margin: 15,
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            data:this.xaxis,
                        },
                    ],
                    yAxis: [
                        {
                            type: "value",
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: "#0a3256",
                                },
                            },
                            axisLine: {
                                show: false,
                            },
                            axisLabel: {
                                margin: 20,
                                textStyle: {
                                    color: "#d1e6eb",
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series:this.series
                }
                summarylinebar.setOption(summarylinebarOption);
            },

{
    "msg": "操作成功",
    "code": 200,
    "data": {
        "xaxis": [
            "20250902",
            "20250903",
            "20250907"
        ],
        "series": [
            {
                "data": [
                    3,
                    4,
                    3
                ],
                "name": "总数",
                "type": "line"
            },
            {
                "data": [
                    2,
                    4,
                    2
                ],
                "name": "合格",
                "type": "bar"
            },
            {
                "data": [
                    1,
                    0,
                    1
                ],
                "name": "不合格",
                "type": "bar"
            }
        ]
    }
}