echarts饼图的数据有负数，也要显示

Question

echarts饼图的数据有负数，也要在图表中显示，怎么改？
value为null显示0

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
  {
    "name": "金额1",
    "value": -421.5
  },
  {
    "name": "金额2",
    "value": -863.1
  },
  {
    "name": "金额3",
    "value": -7.23
  },
  {
    "name": "金额4",
    "value": null
  },
  {
    "name": "金额5",
    "value": 24.21
  },
  {
    "name": "金额6",
    "value": 0
  },
  {
    "name": "金额7",
    "value": -337.72
  }
]
    }
  ]
};

Answer 1

上午好☀️☀️☀️️
本答案参考通义千问

在使用 ECharts 绘制饼图时，默认情况下，饼图的 value 必须是正数。如果数据中存在负数或 null 值，图表可能不会正确显示这些数据。为了满足你的需求（即：负数也要显示，value 为 null 显示为 0），我们需要对数据进行预处理，并修改 ECharts 的配置。

---

✅ 解决方案

1. 预处理数据

• 将 value 为 null 的值设置为 0
• 允许负数作为 value

const originalData = [
  { name: "金额1", value: -421.5 },
  { name: "金额2", value: -863.1 },
  { name: "金额3", value: -7.23 },
  { name: "金额4", value: null },
  { name: "金额5", value: 24.21 },
  { name: "金额6", value: 0 },
  { name: "金额7", value: -337.72 }
];

// 预处理数据：将 null 转换为 0
const processedData = originalData.map(item => ({
  ...item,
  value: item.value === null ? 0 : item.value
}));

---

2. 修改 ECharts 配置

在 ECharts 中，可以通过设置 series.label.formatter 来自定义标签内容，同时确保负数能被正确渲染。

✅ 修改后的完整 option 配置如下：

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: true, // 设置为 true 显示数值
        position: 'outside',
        formatter: (params) => {
          return `${params.name}: ${params.value}`;
        },
        color: '#000'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: true
      },
      data: processedData
    }
  ]
};

---

3. 关键点说明

• label.show: true：确保标签显示出来。
• formatter 函数：可以自定义标签内容，如显示名称和值。
• position: 'outside'：将标签放在饼图外部，避免重叠。
• 允许负数：ECharts 默认不支持负数，但通过 value 传入负数即可显示。

---

4. 注意事项

• 如果你希望饼图的扇形区域颜色根据正负值变化，可以添加 itemStyle 配置：

  itemStyle: {
    borderRadius: 5
  },
  

• 若你需要将负数部分用不同颜色表示，可以结合 encode 和 series.color 进行更复杂的样式控制。

---

✅ 总结

| 步骤 | 操作 | |------|------| | 1 | 预处理数据，将 null 转换为 0 | | 2 | 在 label 中启用显示功能并设置格式 | | 3 | 确保 series.data 使用处理后的数据 | | 4 | 可选：自定义颜色区分正负值 |

---

如有更多需求（如动态计算比例、颜色区分等），欢迎继续提问！