给elmentui中的el-table-column 添加背景色怎么加

const list = res.data?.records || [];
console.log('原始数据:', list); // 调试用，查看原始数据结构

const data = list.map(item => {
  console.log('当前处理项:', item); // 调试用，查看每个项的结构
  
  // 统一使用 typeName 或 TypeName，根据你的数据结构来定
  const typeName = item.typeName || item.TypeName; // 尝试两种可能的属性名
  
  const obj = {
    ...item,
    value: item.count,
    name: typeName || '未知类型', // 确保 name 字段有值
  };
  
  // 根据 typeName 设置不同的颜色
  if (typeName === '一搬') {
    obj.itemStyle = { color: '#165DFF' };
  } else if (typeName === '较大') {
    obj.itemStyle = { color: '#FFFF00' };
  } else if (typeName === '特大') {
    obj.itemStyle = { color: '#D9001B' };
  } else if (typeName === '重大') {
    obj.itemStyle = { color: '#F59A23' };
  }
  
  return obj;
});

console.log('处理后的数据:', data); // 调试用，查看处理后的数据

// 计算总数值，用于百分比计算
const total = data.reduce((sum, item) => sum + (item.value || 0), 0);

const option = {
  title: {},
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)' // 显示名称、值和百分比
  },
  legend: {
    orient: 'vertical',
    right: 0,
    bottom: 0,
    show: true,
    type: 'scroll', // 启用滚动，防止数据过多时溢出
    pageButtonItemGap: 5,
    pageButtonGap: 10,
    pageIconColor: '#999',
    pageIconInactiveColor: '#ccc',
    pageIconSize: 12,
    pageTextStyle: {
      color: '#999'
    },
    // 自定义图例格式：名称 + 值 + 百分比
    formatter: function(name) {
      const item = data.find(item => item.name === name);
      if (!item || item.value === undefined) return name;
      
      const value = item.value;
      const percent = total > 0 ? Math.round((value / total) * 100) : 0;
      
      // 使用 \n 可以让图例显示为多行，使用空格控制对齐
      return `${name}   ${value}   ${percent}%`;
      
      // 或者使用 HTML 标签实现更好的样式控制（需要开启 legend.useHTML）
      // return `<div style="width:150px;display:flex;justify-content:space-between;">
      //   <span>${name}</span>
      //   <span>${value}</span>
      //   <span>${percent}%</span>
      // </div>`;
    },
    // 如果使用 HTML 格式化，需要开启此选项
    // useHTML: true,
    // 调整图例项的样式
    itemWidth: 12,
    itemHeight: 12,
    textStyle: {
      fontSize: 12,
      rich: {
        name: {
          width: 80,
          align: 'left'
        },
        value: {
          width: 40,
          align: 'center'
        },
        percent: {
          width: 40,
          align: 'right'
        }
      }
    }
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'], // 使用环形图，更容易查看标签
      avoidLabelOverlap: true,
      label: {
        show: true,
        position: 'outside',
        formatter: '{b}\n{c} ({d}%)', // 显示名称、值和百分比
        color: '#000',
        backgroundColor: '#fff',
        borderColor: '#aaa',
        borderWidth: 1,
        borderRadius: 4,
        padding: [4, 8],
        rich: {
          name: {
            fontSize: 14,
            fontWeight: 'bold'
          },
          value: {
            color: '#666'
          },
          percent: {
            color: '#999'
          }
        }
      },
      labelLine: {
        show: true,
        length: 10,
        length2: 20,
        lineStyle: {
          color: '#aaa'
        }
      },
      data: data,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
};