如何使用Apache ECharts的dataset和source绘制多个饼图

我有如下数据集：

• 表头数组：["a", "b", "c"]
• 数据数组：

[[5, 15, 25],
[10, 20, 30]]

希望绘制出指定的饼图效果，且不想预处理数据，能否用dataset和source实现？

目标效果（未使用dataset） #

option = {
  series: [
    {
      type: 'pie',
      radius: '100',
      right: "300",
      data: [["a", 5], ["b", 5], ["c",5]],
      encode: {value: 1},
      label: {formatter: "{@[0]}: {d}%"}
    },
   {
      type: 'pie',
      radius: '100',
      left: "300",
      data: [["a", 10], ["b", 20], ["c", 30]],
      encode: {value: 1},
      label: {formatter: "{@[0]}: {d}%"}
    },
  ]
};

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

<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <div id="main" style="width: 700px; height:400px;"></div>
  </body>
</html>

尝试的代码（无法显示表头） #

option = {
  dataset: {
    dimensions: ["a", "b", "c"],
    source: [[5, 15, 25], [10, 20, 30]]
  },
  series: [
    {
      type: 'pie',
      radius: '100',
      right: "300",
      seriesLayoutBy: 'row',
      encode: {value: 0},
      label: {formatter: "{@[0]}: {d}%"}
    },
   {
      type: 'pie',
      radius: '100',
      left: "300",
      encode: {value: 1},
      seriesLayoutBy: 'row',
      label: {formatter: "{@[1]}: {d}%"}
    },
  ]
};

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

<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <div id="main" style="width: 700px; height:400px;"></div>
  </body>
</html>

正确实现方案 #

可以通过调整dataset配置、series的encode规则和label.formatter实现，无需预处理数据。核心是让每个饼图对应dataset中的一行数据，并用dimensions里的表头作为饼图项名称：

option = {
  dataset: {
    dimensions: ["a", "b", "c"],
    source: [[5, 15, 25], [10, 20, 30]]
  },
  series: [
    {
      type: 'pie',
      radius: '100',
      right: "300",
      seriesLayoutBy: 'row',
      encode: {
        name: 'dimension',
        value: 'value'
      },
      label: {
        formatter: function(params) {
          return params.name + ': ' + params.percent + '%';
        }
      }
    },
    {
      type: 'pie',
      radius: '100',
      left: "300",
      seriesLayoutBy: 'row',
      encode: {
        name: 'dimension',
        value: 'value'
      },
      label: {
        formatter: function(params) {
          return params.name + ': ' + params.percent + '%';
        }
      },
      datasetIndex: 1
    }
  ]
};

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

<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <div id="main" style="width: 700px; height:400px;"></div>
  </body>
</html>

关键调整说明 #

1. seriesLayoutBy: 'row'：指定每个系列对应dataset中的一行数据，每个维度（表头）对应饼图的一个扇区。
2. encode配置：name: 'dimension'用维度名称（表头a/b/c）作为饼图项名称，value: 'value'用对应行的数值作为扇区值。
3. datasetIndex：第二个饼图设置datasetIndex: 1，指定使用source中的第二行数据。
4. label.formatter：通过回调函数获取params.name（表头名称）和params.percent格式化显示内容，确保表头正确展示。

内容的提问来源于stack exchange，提问作者a5hk