Echarts中饼图进阶使用-多饼图

Echarts中的多饼图是一种将多个饼图组合在一起展示的图表类型，可以同时比较不同组的数据占比和相对关系。以下是Echarts中多饼图的基本画法：

1. 引入Echarts库：确保项目中引入了Echarts库。
2. 创建图表容器：在HTML中创建一个容器元素，用于承载多饼图。指定一个唯一的ID作为图表容器的标识。
3. 准备数据：准备多组饼图的数据，每组数据包含名称和对应的数值。每组数据可以作为一个饼图的系列。
4. 配置图表参数：使用JavaScript代码创建Echarts实例，并配置相关参数。以下是一个基本的多饼图配置示例：

要实现多个饼图并列显示，而不是重叠显示，需要使用坐标系和图例进行设置。以下是一个正确的多饼图的示例代码：

let myChart = echarts.init(document.getElementById('myecharts'));

let option = {
  legend: {},
  series: [
    {
      type: 'pie',
      radius: '40%',
      center: ['25%', '50%'],
      data: [
        { name: '组1-类别1', value: 30 },
        { name: '组1-类别2', value: 50 },
        { name: '组1-类别3', value: 20 },
      ]
    },
    {
      type: 'pie',
      radius: '40%',
      center: ['75%', '50%'],
      data: [
        { name: '组2-类别1', value: 40 },
        { name: '组2-类别2', value: 60 },
        { name: '组2-类别3', value: 80 },
      ]
    }
  ]
};

myChart.setOption(option);

在这个示例中，我们使用legend属性来配置图例的位置和样式。通过设置radius和center属性，确定每个饼图的半径和中心位置，以使它们能够并列显示在图表中。

请注意调整center属性的值来控制每个饼图的位置，以使它们不重叠。在示例中，第一个饼图的中心位置为25%的横坐标和50%的纵坐标，第二个饼图的中心位置为75%的横坐标和50%的纵坐标。