如何使用Britecharts实现堆叠环形图（Stacked Donut Chart）

嘿，我来帮你搞定用Britecharts实现这种堆叠环形图的需求！下面是一步步的实现方案，照着来就能做出和示例类似的效果：

1. 准备符合要求的数据 #

Britecharts的堆叠环形图需要特定格式的数据集——每个层级的环形对应一个数据组，每个组里包含该环的各个分段数据。示例格式如下：

const stackedDonutData = [
  {
    name: '外层环',
    data: [
      { name: '分段1', value: 30 },
      { name: '分段2', value: 20 },
      { name: '分段3', value: 50 }
    ]
  },
  {
    name: '中层环',
    data: [
      { name: '分段A', value: 40 },
      { name: '分段B', value: 60 }
    ]
  },
  {
    name: '内层环',
    data: [
      { name: '分组X', value: 70 },
      { name: '分组Y', value: 30 }
    ]
  }
];

2. 引入Britecharts资源 #

你可以通过CDN快速引入，也可以用npm本地安装：

• CDN方式：在HTML中加入以下代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css">
<script src="https://cdn.jsdelivr.net/npm/britecharts/dist/umd/stackedDonut.min.js"></script>

• npm安装方式：先执行安装命令

npm install britecharts --save

再在项目代码中导入：

import { stackedDonut } from 'britecharts';
import 'britecharts/dist/css/britecharts.min.css';

3. 创建DOM容器 #

在HTML中准备一个用于渲染图表的容器：

<div id="stackedDonutContainer"></div>

4. 初始化并配置堆叠环形图 #

编写JS代码初始化图表，配置尺寸、动画等参数来匹配你的需求：

// 获取图表容器元素
const container = document.getElementById('stackedDonutContainer');

// 初始化堆叠环形图实例
const stackedDonutChart = stackedDonut();

// 配置图表核心参数
stackedDonutChart
  .width(600) // 图表宽度
  .height(600) // 图表高度
  .isAnimated(true) // 启用加载动画
  .percentageThreshold(0.01) // 隐藏占比极小的分段
  .externalRadius(250) // 外层环的最大半径
  .internalRadius(100); // 内层环的最小半径

// 渲染图表到容器中
stackedDonutChart(container, stackedDonutData);

5. 自定义样式与交互（可选） #

如果想要更贴近示例的效果，可以做这些优化：

• 自定义配色：替换默认的颜色方案

stackedDonutChart
  .colorSchema(['#2c7bb6', '#00a6ca', '#00ccbc', '#90eb9d', '#ffff8c', '#f9d057', '#f29e2e', '#e76818', '#d7191c']);

• 添加图例：搭配Britecharts的图例组件展示分段说明

import { legend } from 'britecharts';

// 先在HTML中加一个图例容器：<div id="legendContainer"></div>
const legendContainer = document.getElementById('legendContainer');
const legendChart = legend();

legendChart
  .width(600)
  .height(100)
  .colorSchema(stackedDonutChart.colorSchema());

legendChart(legendContainer, stackedDonutData);

注意事项 #

• 确保数据格式正确，每个环的data数组里的value数值要合理，这样环形比例才会准确。
• 调整externalRadius和internalRadius可以控制环形的厚度和整体大小，多层环的半径会自动均匀分配。

内容的提问来源于stack exchange，提问作者Thomas T.brhan