Echarts中嵌套饼图如何给系列（饼图）起标题/标签

Question

在 Apache Echarts 中，当使用多个饼图（例如嵌套饼图，甚至并排饼图）时，我们如何为每个饼图添加标题以表示饼图代表什么？虽然“title”选项可以接受一系列标题，但没有一种很好的方法来定位它们，使它们位于它们要标记的各个饼图的上方、内部或以某种其他方式与它们相关。就好像在概念上位于图表标题和各个项目标签之间的 seriesLabel / seriesTitle 缺少概念。

系列物品标签已经用于项目（饼图切片），因此不能与 position:center 一起使用，而且这对嵌套饼图也无济于事，因为中心只有一个标签的空间。

Answer 1

我不明白你的标题数组有什么问题......

这是一个简单的例子，展示了如何给每个饼图一个标题：

const data = [
  {
    name: 'Foo',
    value: 10
  },
  {
    name: 'Bar',
    value: 20
  },
  {
    name: 'Baz',
    value: 15
  }
];

let option = {
  title: [
    {
      text: 'Pie 1',
      subtext: 'Left',
      left: '46px',
      textAlign: 'center'
    },
    {
      text: 'Pie 2',
      subtext: 'Center',
      left: '146px',
      textAlign: 'center'
    },
    {
      text: 'Pie 3',
      subtext: 'Right',
      left: '246px',
      textAlign: 'center'
    }
  ],
  series: [
    {
      type: 'pie',
      radius: '42px',
      center: ['50%', '50%'],
      data,
      label: {
        position: 'inner'
      },
      left: 0,
      right: '66%',
      top: 0,
      bottom: 0
    },
    {
      type: 'pie',
      radius: '42px',
      center: ['50%', '50%'],
      data,
      label: {
        position: 'inner'
      },
      left: '33%',
      right: '33%',
      top: 0,
      bottom: 0
    },
    {
      type: 'pie',
      radius: '42px',
      center: ['50%', '50%'],
      data,
      label: {
        position: 'inner'
      },
      left: '66%',
      right: 0,
      top: 0,
      bottom: 0
    }
  ]
};

let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

#main {
  width: 300px;
  height: 200px;
}

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>

<div id="main"></div>