如何在Vue.js中使用Highcharts实现堆叠环形（甜甜圈）图？

要实现你需要的堆叠环形图，核心是通过多个独立的series构建多层环形，而非在单个series的data中添加子项。每个series对应环形的一层，通过配置innerSize和outerSize控制每层的半径范围，同时调整tooltip和数据标签的显示逻辑适配多层结构。

以下是修改后的完整Vue代码：

<template>
  <div>
    <b-col md="12" style="margin-top: 40px">
      <highcharts :options="pieChartOptions"></highcharts>
    </b-col>
  </div>
</template>

<script>
import axios from 'axios'
import { mapActions } from "vuex";
import Highcharts from "highcharts";
import { Chart } from 'highcharts-vue'
import DashboardTable from "../../components/DashboardTable/DashboardTable";
import Widget from '@/components/Widget/Widget';

export default {
  name: "TestChart",
  components: {
    DashboardTable, Widget,
    highcharts: Chart
  },
  data() {
    return {
      pieChartOptions: {
        colors: ['#01BAF2', '#71BF45', '#FAA74B', '#B37CD2', '#FF6B6B', '#4ECDC4'],
        chart: {
          type: 'pie'
        },
        accessibility: {
          point: {
            valueSuffix: '%'
          }
        },
        title: {
          text: 'Coffee'
        },
        tooltip: {
          // 自定义tooltip显示多层数据信息
          formatter: function() {
            return `<b>${this.series.name}</b><br/>${this.point.name}: <b>${this.point.y}%</b>`;
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              format: '{point.name}: {y}%',
              // 调整标签位置避免多层重叠
              distance: 15
            },
            showInLegend: true
          }
        },
        series: [
          // 外层环形：对应一级分类
          {
            name: '咖啡类型',
            colorByPoint: true,
            innerSize: '60%',
            outerSize: '80%',
            data: [
              { name: 'Filtre', y: 68.1 },
              { name: 'Türk', y: 11.0 },
              { name: 'Latte', y: 11.2 },
              { name: 'Espresso', y: 9.7 }
            ]
          },
          // 内层环形：对应二级分类（示例数据）
          {
            name: '细分品类',
            colorByPoint: true,
            innerSize: '0%',
            outerSize: '50%',
            data: [
              { name: '美式', y: 40.2 },
              { name: '手冲', y: 27.9 },
              { name: '冰滴', y: 15.3 },
              { name: '其他', y: 16.6 }
            ]
          }
        ]
      }
    }
  },
}
</script>

<style>
</style>

关键修改说明： #

• 多series配置：添加多个series，每个series对应环形的一层，通过innerSize和outerSize定义每层的半径区间（比如外层覆盖60%-80%半径，内层覆盖0%-50%半径）
• 自定义tooltip：使用formatter函数自定义tooltip内容，清晰展示当前层级的系列名称和数据
• 数据标签优化：调整dataLabels.distance避免多层标签重叠，也可根据需求修改标签格式
• 颜色扩展：增加颜色数组，确保多层数据的颜色不重复

内容的提问来源于stack exchange，提问作者su-wan Kenobi