利用 ECharts 绘制别致的环形图：内环划分集团内外，外环对应内环两类

2023-11-05 11:20:18

如何绘制内环划分集团内外、外环对应内环两类的特殊环形图

在数据可视化领域，环形图因其直观简洁地呈现数据占比而广受青睐。而使用 ECharts，我们可以绘制出更加个性化的环形图，例如一种内环划分集团内外、外环数据对应内环两类的特殊环形图。

内环划分集团内外

首先，让我们了解如何使用 ECharts 将内环划分为集团内部和外部。步骤如下：

创建图表实例：使用 ECharts.init(dom) 方法创建图表实例，其中 dom 为放置图表容器的 HTML 元素。
设置数据系列：定义两个数据系列，分别代表集团内部和集团外部的数据。每个系列应包含 name（名称）、type（类型）和 data（数据值）等属性。
设置内环圆心和半径：通过 innerRadius 和 radius 属性设置内环的圆心和半径，从而形成两层圆环结构。

代码示例：

option = {
  series: [
    {
      name: '集团内部',
      type: 'pie',
      innerRadius: '50%',
      radius: '60%',
      data: [
        { value: 50, name: '部门A' },
        { value: 30, name: '部门B' }
      ]
    },
    {
      name: '集团外部',
      type: 'pie',
      innerRadius: '60%',
      radius: '70%',
      data: [
        { value: 40, name: '供应商A' },
        { value: 20, name: '供应商B' }
      ]
    }
  ]
};

外环对应内环两类

接下来，我们需要将外环的数据分别对应到内环的两类上。ECharts 提供了一种称为 "嵌套" 的功能，可以实现这样的效果：

定义嵌套层：在数据系列中添加 children 属性，创建一个嵌套层。
设置嵌套层数据：在嵌套层中定义新的数据系列，代表外环的数据。每个系列应包含与内环数据对应的 name（名称）和 value（数据值）。

代码示例：

option = {
  series: [
    {
      ...
    },
    {
      ...
    },
    {
      name: '集团内部细分',
      type: 'pie',
      innerRadius: '70%',
      radius: '80%',
      children: [
        { value: 30, name: '部门A-1' },
        { value: 20, name: '部门A-2' }
      ]
    },
    {
      name: '集团外部细分',
      type: 'pie',
      innerRadius: '70%',
      radius: '80%',
      children: [
        { value: 25, name: '供应商A-1' },
        { value: 15, name: '供应商A-2' }
      ]
    }
  ]
};