vue3 echarts 堆叠柱状图动态多柱堆叠

在使用echarts堆叠柱状图的时候，常规堆叠柱状图每条柱子的堆叠种类是相同的，实际开发中可能存在不同的数据格式，此处以地区结合材料进行说明，例如 华南地区包含材料（金，银）华北地区包含（铜，金）这样就会出现数据出现差异的情况，echarts现有的堆叠柱状图无法满足需求，需要去手动转换数据

示例数据

let echartsArr = [
    {"materialName": "铜","totalQuantity": 49.959,"region": "华东"},
    {"materialName": "铜","totalQuantity": 2768.37, "region": "华东"},
    {"materialName": "黄金", "totalQuantity": 12450.45,"region": "海外"},
    {"materialName": "铜", "totalQuantity": 182.786, "region": "西南"},
    {"materialName": "铜", "totalQuantity": 100,"region": "华北"},
    {"materialName": "铜", "totalQuantity": 7.567,"region": "华南"},
    {"materialName": "铜", "totalQuantity": 980.614,"region": "西南"},
    {"materialName": "铜","totalQuantity": 17.3785, "region": "华东"},
    {"materialName": "铜","totalQuantity": 614.4005, "region": "华东"},
    {"materialName": "铜", "totalQuantity": 543.001,"region": "华东"},
    { "materialName": "铜","totalQuantity": 340.1462, "region": "华南"},
    {"materialName": "铜", "totalQuantity": 1370.1029, "region": "华南"}
]

需要把数据处理成echarts堆叠图数据格式

       // 处理数据格式
        // X轴坐标  数据排按照X轴排序 生成
        let xAxislegend = [...new Set(mapArrty(res.data.data, 'region'))]  // 
       // 材料名称 材料名称生成  图例  
        let legendData = [...new Set(mapArrty(res.data.data, 'materialName'))] || [] 
        // console.log(, 'totalNum')
        totalNum(res.data.data)
        let seriesData: any = []
        // 根据材料名称组合 echarts 堆叠柱状图数据格式
        legendData.map((val: any) => {
            seriesData.push({
                name: val, // 这个name需要和 legend 下面data里面的 name 对应起来
                type: 'bar', // 类型：柱状图
                // color: '#F56C6C', // 柱子颜色
                barWidth: 20,  // 柱子宽度
                stack: 'AS', // 两个柱子的 stack值相同时就会堆叠放置
                label: {
                    // show: true,  // 
                },
                showBackground: false, // 是否展示背后的阴影
                data: []
            },)
        })
         // 赋值data
         seriesData.map((item1: any) => {
         // totalNum用来获取的材料 对应的各个地区的材料总和
            let materialNameData: any = totalNum(res.data.data)
         // fillMissingValues 用来补全数据格式，有的地区会有这个材料有的地区没有，没有的地区按照X轴的排列顺序补充
            materialNameData[item1.name] = fillMissingValues(xAxislegend, materialNameData[item1.name])
            item1.data = Object.values(materialNameData[item1.name])
        })

//  对应的各个地区的材料总和
let totalNum = (items: any) => {
    let newArr = items.filter((val: any) => val.attribute5 && val.materialName && val.totalQuantity)
    const warehouseTotals = newArr.reduce((totals: any, item: any) => {
        const { materialName, totalQuantity, region} = item
        if (!totals[materialName]) {
            totals[materialName] = {}
        }
        if (!totals[materialName][region]) {
            totals[materialName][region] = 0
        }

        totals[materialName][region] += totalQuantity
        return totals
    }, {})
    // console.log(warehouseTotals, 'warehouseTotals')
    return warehouseTotals
}

// 补全数据格式
let fillMissingValues = (xAxislegend: any, copperData: any) => {
    // console.log(copperData, 'copperData')
    // 将缺失的数据补充  按照 xAxislegend的顺序排序
    var silverData: any = {}
    xAxislegend.forEach((region: any) => {
        silverData[region] = NP.strip(copperData[region]) || 0
    })
    // console.log(silverData, 'silverData')
    return silverData
}

// 获取对应的Key的数组 且不为空
let mapArrty = (data: any, key: any) => {
    let arr: any
    arr = data.filter((val: any) => val[key] != null).map((val: any) => val[key])
    return arr
}