在echarts饼图上以单独的标签显示切片名称和值

Question

我正在尝试 ECharts 库 我的目标是获得如下所示的图表，其中切片标签显示在饼图周围，值显示在每个切片的顶部：

我希望我可以在系列上定义一个单独的

label

，然后在

label

上定义一个

data

并获得不同的值，例如：

const option = {
  "series": {
    "data": [
      {
        "label": {
          "formatter": (params) => params.value,
          "show": true,
          "position": "inside"
        },
        "value": 65.98750000000001,
        "name": "Asia"
      },
      {
          "label": {
            "formatter": (params) => params.value,
            "show": true,
            "position": "inside"
          },
          "value": 76.85333333333332,
          "name": "Europe"
      },
      {
          "label": {
            "formatter": (params) => params.value,
            "show": true,
            "position": "inside"
          },
          "value": 72.15909090909092,
          "name": "North America"
      },
      {
          "label": {
            "formatter": (params) => params.value,
            "show": true,
            "position": "inside"
          },
          "value": 51.4695652173913,
          "name": "Africa"
      },
      {
          "label": {
            "formatter": (params) => params.value,
            "show": true,
            "position": "inside"
          },
          "value": 71.91666666666667,
          "name": "Oceania"
      },
      {
          "label": {
            "formatter": (params) => params.value,
            "show": true,
            "position": "inside"
          },
          "value": 68.97142857142858,
          "name": "South America"
      }
    ],
    "label": {
      "show": true,
      "position": "outside"
    },
    "radius": [
      "30%",
      "80%"
    ],
    "type": "pie"
  },
  "tooltip": {}
};

但是没有骰子，看起来

option.data.label

会覆盖我在

option.label

上设置的任何内容。我尝试了多种变体，但没有运气，并且文档没有包含我想要做的事情的示例，所以我越来越不确定它是否可能。

Answer 1

您只需为您的预期输出添加多个系列

这里我举个例子：-

option = {

series: [
{
  type: 'pie',
   radius: ['50%', '80%'],
  data:[ 
    { value: 65, name: 'Asia' },
  { value: 76, name: 'Europe' },
  { value: 72, name: 'North America' },
  { value: 51, name: 'Africa' },
  { value: 71, name: 'Oceania' },
  { value: 68, name: 'South America' }]
},
{
  type: 'pie',
   radius: ['50%', '80%'],
  label: { position: 'inside', formatter: '{c}' },
  data:[65,76,72,51,71,68]
}
],
"radius": [
  "30%",
  "80%"
],  "type": "pie"

}