在Vue（ECharts）中生成饼图时出现问题

Question

我在ECharts中编写了以下代码，您可以在链接中替换它：https://echarts.apache.org/examples/en/editor.html?c=pie-rich-text&lang=ts

import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;

var chartDom = document.getElementById('main')!;
var myChart = echarts.init(chartDom);
var option: EChartsOption;

const values = [0, 0, 0, 0, 1];
const names = ['A', 'B', 'C', 'D', 'E'];

const initialValues = values.map((v, i) => ({ name: names[i], value: v }));

option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    bottom: 10,
    left: 'center',
    data: names
  },
  series: [
    {
      type: 'pie',
      radius: '65%',
      center: ['50%', '50%'],
      selectedMode: 'single',
      data: initialValues,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option && myChart.setOption(option);

当我只有一个

value

时就会出现问题。

const values = [0, 0, 0, 0, 1];

选择项目 E 删除标签时，会出现所有项目的 1/4，但它们为零。

我的问题是如何确保这些项目都不会出现并且项目E中有0％。

类似的东西

Answer 1

这些值实际上是比率，因为饼图只能表示比例。因此，如果所有值都为 0，则图表会正确绘制，这些值会从图表中按相同比例切出。如果该值为“空”，表示没有“无”，则应应用

null

。如果所有值都是

null

，那么不绘制饼图是正确的，因为我们没有数据。

顺便说一下，社区已经讨论过这个错误了：

• https://github.com/apache/echarts/issues/3264

解决方案

所以，答案是，如果所有值都是

null

（意味着我们没有值），我们如何绘制一个表示“空饼图”的圆圈。

graphic: { 
  elements: [
    {
      type: 'circle',
      left: 'center', // Position at horizontal center according to its parent.
      top: 'middle',  // Position at vertical center according to its parent.
      shape: {
        r: 100,
      },
      style: {
        fill: '#f7f7f7',
        stroke: '#ddd',
        lineWidth: 1
      }
    }
  ]
}

如果所有值为空，则会出现灰色圆圈；不幸的是，R 不能包含百分比，因此圆必须具有固定宽度，或者您需要动态计算并提供 r 的值。我现在已将其固定为 100，因此圆圈和灰色图形元素具有固定宽度。

示例

/**
 ** Initialize
 */
const chartDom = document.getElementById('chart')
const chart = echarts.init(chartDom)

/**
 ** Data
 */
let values = [null, null, null, null, null]
const names = ['A', 'B', 'C', 'D', 'E']

// Just for the sake of example, it's here so you can see it both with data and without.
document.getElementById('showNullChart').addEventListener('click', (e) => {
  const showNull = e.target.checked

  if (showNull) {
    values.fill(null)
  } else {
    values = [10, 20, 30, 40, 50]
  }
  
  updateChart()
})

/**
 ** Chart
 */
function updateChart () {
  /**
   ** Option
   */
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      bottom: 10,
      left: 'center',
      data: names
    },
    series: [
      {
        type: 'pie',
        radius: '100',
        center: ['50%', '50%'],
        selectedMode: 'single',
        data: values.map((v, i) => ({ name: names[i], value: v })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
      }
    ],
    // Extra graphics
    graphic: { 
      elements: [
        {
          type: 'circle',
          left: 'center', // Position at horizontal center according to its parent.
          top: 'middle',  // Position at vertical center according to its parent.
          shape: {
            r: 100,
          },
          style: {
            fill: '#f7f7f7',
            stroke: '#ddd',
            lineWidth: 1
          }
        }
      ]
    }
  }

  /**
   ** Render Chart
   */
  chart.setOption(option)
}
// First render
updateChart() 

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js" integrity="sha512-VdqgeoWrVJcsDXFlQEKqE5MyhaIgB9yXUVaiUa8DR2J4Lr1uWcFm+ZH/YnzV5WqgKf4GPyHQ64vVLgzqGIchyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<input type="checkbox" id="showNullChart" checked> Null (Empty Chart)

<div id="chart" style="width: 300px; height: 300px;"></div>