echarts根据数据动态生成饼图的个数，并排序

动态生成个数

function initPurchaseContract() {
    // 获取数据的keys
    let keys = Object.keys(dataPurchaseContract[0]);
    let totalCharts = keys.length - 1; // 饼图数量

    // 动态计算行数和列数（使布局接近正方形）
    let cols =3; // 列数
    let rows = Math.ceil(totalCharts / cols); // 行数

    // 定义饼图的半径
    let pieRadius = '40px';

    // 创建option对象
    const option = {
        legend: {},
        tooltip: {},
        dataset: {
            source: dataPurchaseContract,
        },
        title: [
            { text: '各部门采购合同额组成', left: 'center', top: '10%' },  // 总标题
        ],
        series: [],
    };

    // 动态设置每个饼图的位置（center）并添加子标题
    for (let j = 0; j < totalCharts; j++) {
        let colIndex = j % cols; // 当前的列
        let rowIndex = Math.floor(j / cols); // 当前的行

        // 根据当前的行和列计算center坐标（x, y）
        let centerX = (20 + colIndex * (40 / cols) * 2) + '%'; // 横向间距动态调节
        let centerY = (40 + rowIndex * (40 / rows) * 2) + '%';  // 纵向间距动态调节

        // 添加饼图的series
        option.series.push({
            name: keys[j + 1],
            type: 'pie',
            radius: pieRadius,
            center: [centerX, centerY],
            encode: { itemName: 'name', value: keys[j + 1] },
        });

        // 为每个饼图添加说明（子标题），放置在饼图的上方
        option.title.push({
            text: keys[j + 1],  // 使用key作为子标题
            left: centerX,
            top: (parseFloat(centerY) + 15) + '%',  // 子标题放置在饼图上方
            textAlign: 'center',
            textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
            },
        });
    }
    
    if(totalCharts>7){
      totalCharts=4
      PurchaseContract.style.height=totalCharts*150+'px'
      Pieheight.value='600px'
    }
    if(totalCharts>10){
      PurchaseContract.style.height='800px'
      Pieheight.value='800px'
    }
    let Chart = echarts.init(document.getElementById("PurchaseContract"));
    // 渲染图表
    Chart.setOption(option);
}

从后台获取数据

const LoadData = () => {
  if (onLoading.value)
        return
  onl oading.value=true
  dataSaleContract = [{},{},{},{}];
  dataPurchaseContract = [{},{},{}]

  GetContractAmountCompose(Yearly.value).then((data) => {
      if (data) {
        for (let node of data) {
          //各部门销售
          dataSaleContract[0]['name']="应收账款" 
          if(node.ReceivableAmount!=0)
          {
            dataSaleContract['0'][node.Department]=node.ReceivableAmount
            if(dataSaleContract['1'][node.Department]==null){ dataSaleContract['1'][node.Department]=0 }
            if(dataSaleContract['2'][node.Department]==null){ dataSaleContract['2'][node.Department]=0 }
            if(dataSaleContract['3'][node.Department]==null){ dataSaleContract['3'][node.Department]=0 } 
          }
          dataSaleContract[1]['name']="到账款"
          if(node.ReceivedAmount!=0)
          {
            dataSaleContract[1][node.Department]=node.ReceivedAmount
            if(dataSaleContract['0'][node.Department]==null){ dataSaleContract['0'][node.Department]=0 }
            if(dataSaleContract['2'][node.Department]==null){ dataSaleContract['2'][node.Department]=0 }
            if(dataSaleContract['3'][node.Department]==null){ dataSaleContract['3'][node.Department]=0 } 
          }
          dataSaleContract[2]['name']="手持额"
          if(node.InhandAmount!=0)
          {
            dataSaleContract['2'][node.Department]=node.InhandAmount
            if(dataSaleContract['1'][node.Department]==null){ dataSaleContract['1'][node.Department]=0 }
            if(dataSaleContract['0'][node.Department]==null){ dataSaleContract['0'][node.Department]=0 }
            if(dataSaleContract['3'][node.Department]==null){ dataSaleContract['3'][node.Department]=0 } 
          }
          dataSaleContract[3]['name']="外协金额"
          if(node.SaleOutsourcingAmount!=0)
          { 
            dataSaleContract[3][node.Department]=node.SaleOutsourcingAmount 
            if(dataSaleContract['1'][node.Department]==null){ dataSaleContract['1'][node.Department]=0 }
            if(dataSaleContract['2'][node.Department]==null){ dataSaleContract['2'][node.Department]=0 }
            if(dataSaleContract['0'][node.Department]==null){ dataSaleContract['0'][node.Department]=0 } 
          }
          //各部门采购
          dataPurchaseContract[0]['name']="应付账款" 
          if(node.PayableAmount!=0)
          {
            dataPurchaseContract['0'][node.Department]=node.PayableAmount
            if(dataPurchaseContract['2'][node.Department]==null){ dataPurchaseContract['2'][node.Department]=0 }
            if(dataPurchaseContract['1'][node.Department]==null){ dataPurchaseContract['1'][node.Department]=0 }
          }
          dataPurchaseContract[1]['name']="已付账款"
          if(node.PayedAmount!=0)
          {
            dataPurchaseContract[1][node.Department]=node.PayedAmount
            if(dataPurchaseContract['0'][node.Department]==null){ dataPurchaseContract['0'][node.Department]=0 }
            if(dataPurchaseContract['2'][node.Department]==null){ dataPurchaseContract['2'][node.Department]=0 }
          }
          dataPurchaseContract[2]['name']="其他未开票金额"
          if(node.PurchaseTotalAmount-node.PayableAmount-node.PayedAmount!=0)
          {
            dataPurchaseContract['2'][node.Department]=node.PurchaseTotalAmount-node.PayableAmount-node.PayedAmount
            if(dataPurchaseContract['0'][node.Department]==null){ dataPurchaseContract['0'][node.Department]=0 }
            if(dataPurchaseContract['1'][node.Department]==null){ dataPurchaseContract['1'][node.Department]=0 }
          }  
        }
        if(Object.keys(dataSaleContract[0]).length>7||Object.keys(dataPurchaseContract[0]).length>7){
          //Pieheight.value='1000px'
        }
        initSaleContract()
        initPurchaseContract()
      } nextTick(() => {}) })
  

        
       initContractMonth()
      }
    }).finally(() => {
      
      onl oading.value=false
    }) 
    
}