饼图高级特性完全指南 - 嵌套与组合图

📋 概述

饼图高级特性 包括环形图、嵌套饼图、玫瑰图（南丁格尔图）、组合饼图等进阶功能。这些特性能够展示层级关系、对比多个维度，是占比分析的利器。

核心价值

• 环形图：中心可显示总计信息
• 嵌套饼图：展示多层级占比关系
• 玫瑰图：用半径和角度同时表达数据
• 组合饼图：饼图与其他图表类型结合

---

🎯 核心概念

1. 环形图（Donut Chart）

option = {
  series: [{
    type: 'pie',
    radius: ['40%', '70%'], // 内径和外径
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 234, name: '联盟广告' }
    ]
  }]
};

2. 嵌套饼图（Nested Pie）

option = {
  series: [
    {
      // 外层饼图
      name: '大类',
      type: 'pie',
      radius: ['50%', '70%'],
      data: [...]
    },
    {
      // 内层饼图
      name: '子类',
      type: 'pie',
      radius: ['30%', '45%'],
      data: [...]
    }
  ]
};

3. 玫瑰图（Nightingale Rose）

option = {
  series: [{
    type: 'pie',
    radius: [20, 140],
    roseType: 'area', // 面积模式
    data: [
      { value: 40, name: '分类A' },
      { value: 38, name: '分类B' },
      { value: 32, name: '分类C' }
    ]
  }]
};

---

🔧 详细配置项

完整环形图配置

option = {
  title: {
    text: '访问来源分析',
    subtext: '环形图展示',
    left: 'center'
  },
  
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  },
  
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['40%', '70%'], // 环形
      center: ['50%', '50%'], // 圆心位置
      avoidLabelOverlap: true, // 避免标签重叠
      
      // === 标签配置 ===
      label: {
        show: true,
        position: 'outside',
        formatter: '{b}\n{d}%',
        fontSize: 12
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      
      // === 线条样式 ===
      labelLine: {
        show: true,
        length: 15,    // 第一段线长度
        length2: 20,   // 第二段线长度
        smooth: false  // 是否平滑
      },
      
      // === 数据项 ===
      data: [
        { 
          value: 335, 
          name: '直接访问',
          itemStyle: { color: '#5470c6' }
        },
        { 
          value: 310, 
          name: '邮件营销',
          itemStyle: { color: '#91cc75' }
        },
        { 
          value: 234, 
          name: '联盟广告',
          itemStyle: { color: '#fac858' }
        },
        { 
          value: 135, 
          name: '视频广告',
          itemStyle: { color: '#ee6666' }
        },
        { 
          value: 1548, 
          name: '搜索引擎',
          itemStyle: { color: '#73c0de' }
        }
      ]
    }
  ]
};

嵌套饼图完整配置

option = {
  title: {
    text: '产品销售层级分析',
    subtext: '外层=产品大类，内层=具体产品',
    left: 'center'
  },
  
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  
  legend: {
    data: ['电子产品', '服装', '食品', 'iPhone', 'iPad', 'Mac', 'T恤', '衬衫', '牛仔裤'],
    top: 40
  },
  
  series: [
    // 外层：产品大类
    {
      name: '产品大类',
      type: 'pie',
      selectedMode: 'single', // 单选模式
      radius: ['50%', '70%'],
      label: {
        position: 'outside',
        formatter: '{b}\n{d}%'
      },
      labelLine: {
        show: true
      },
      data: [
        { value: 1048, name: '电子产品' },
        { value: 735, name: '服装' },
        { value: 580, name: '食品' }
      ]
    },
    // 内层：具体产品
    {
      name: '具体产品',
      type: 'pie',
      radius: ['30%', '45%'],
      label: {
        formatter: '{b|{b}}\n{c}',
        rich: {
          b: {
            fontSize: 12,
            lineHeight: 20
          }
        }
      },
      data: [
        // 电子产品细分
        { value: 535, name: 'iPhone', itemStyle: { color: '#5470c6' } },
        { value: 310, name: 'iPad', itemStyle: { color: '#6f8cd9' } },
        { value: 203, name: 'Mac', itemStyle: { color: '#8aa8e6' } },
        // 服装细分
        { value: 335, name: 'T恤', itemStyle: { color: '#91cc75' } },
        { value: 230, name: '衬衫', itemStyle: { color: '#a8d991' } },
        { value: 170, name: '牛仔裤', itemStyle: { color: '#c0e6ad' } },
        // 食品细分
        { value: 310, name: '零食', itemStyle: { color: '#fac858' } },
        { value: 150, name: '饮料', itemStyle: { color: '#fbd68a' } },
        { value: 120, name: '保健品', itemStyle: { color: '#fce4bc' } }
      ]
    }
  ]
};

玫瑰图完整配置

option = {
  title: {
    text: '玫瑰图示例',
    subtext: '半径和角度同时表示数值',
    left: 'center'
  },
  
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  
  legend: {
    orient: 'vertical',
    right: 'right',
    data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
  },
  
  series: [
    {
      name: '面积模式',
      type: 'pie',
      radius: [30, 150], // 最小和最大半径
      center: ['30%', '50%'],
      roseType: 'area', // 面积模式（半径和角度都变化）
      itemStyle: {
        borderRadius: 5 // 圆角
      },
      data: [
        { value: 40, name: 'rose1' },
        { value: 38, name: 'rose2' },
        { value: 32, name: 'rose3' },
        { value: 30, name: 'rose4' },
        { value: 28, name: 'rose5' },
        { value: 26, name: 'rose6' },
        { value: 22, name: 'rose7' },
        { value: 18, name: 'rose8' }
      ]
    },
    {
      name: '半径模式',
      type: 'pie',
      radius: [30, 150],
      center: ['70%', '50%'],
      roseType: 'radius', // 半径模式（只有半径变化）
      itemStyle: {
        borderRadius: 5
      },
      data: [
        { value: 40, name: 'rose1' },
        { value: 38, name: 'rose2' },
        { value: 32, name: 'rose3' },
        { value: 30, name: 'rose4' },
        { value: 28, name: 'rose5' },
        { value: 26, name: 'rose6' },
        { value: 22, name: 'rose7' },
        { value: 18, name: 'rose8' }
      ]
    }
  ]
};

---

💡 实战案例

案例1：带总计信息的环形图

const pieData = [
  { value: 335, name: '直接访问' },
  { value: 310, name: '邮件营销' },
  { value: 234, name: '联盟广告' },
  { value: 135, name: '视频广告' },
  { value: 1548, name: '搜索引擎' }
];

const total = pieData.reduce((sum, item) => sum + item.value, 0);

option = {
  title: [
    {
      text: '访问来源',
      left: 'center',
      top: '40%',
      textStyle: {
        fontSize: 14,
        color: '#999'
      }
    },
    {
      text: total.toLocaleString(),
      left: 'center',
      top: '45%',
      textStyle: {
        fontSize: 24,
        fontWeight: 'bold',
        color: '#333'
      }
    }
  ],
  
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  
  series: [{
    type: 'pie',
    radius: ['50%', '70%'],
    center: ['50%', '50%'],
    data: pieData,
    label: {
      show: true,
      formatter: '{b}\n{d}%'
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
};

案例2：销售层级嵌套饼图

option = {
  title: {
    text: '全国销售分布',
    subtext: '外层=大区，内层=省份',
    left: 'center'
  },
  
  tooltip: {
    trigger: 'item',
    formatter: '{a} - {b}: {c}万 ({d}%)'
  },
  
  series: [
    // 外层：大区
    {
      name: '大区',
      type: 'pie',
      radius: ['50%', '70%'],
      label: {
        formatter: '{b}\n{d}%'
      },
      data: [
        { value: 3500, name: '华东区' },
        { value: 2800, name: '华南区' },
        { value: 2200, name: '华北区' },
        { value: 1500, name: '西南区' }
      ]
    },
    // 内层：省份
    {
      name: '省份',
      type: 'pie',
      radius: ['30%', '45%'],
      label: {
        show: false // 内层不显示标签，避免拥挤
      },
      emphasis: {
        label: {
          show: true
        }
      },
      data: [
        // 华东区
        { value: 1500, name: '上海', itemStyle: { color: '#5470c6' } },
        { value: 1200, name: '江苏', itemStyle: { color: '#6f8cd9' } },
        { value: 800, name: '浙江', itemStyle: { color: '#8aa8e6' } },
        // 华南区
        { value: 1300, name: '广东', itemStyle: { color: '#91cc75' } },
        { value: 900, name: '福建', itemStyle: { color: '#a8d991' } },
        { value: 600, name: '广西', itemStyle: { color: '#c0e6ad' } },
        // 华北区
        { value: 1100, name: '北京', itemStyle: { color: '#fac858' } },
        { value: 700, name: '天津', itemStyle: { color: '#fbd68a' } },
        { value: 400, name: '河北', itemStyle: { color: '#fce4bc' } },
        // 西南区
        { value: 800, name: '四川', itemStyle: { color: '#ee6666' } },
        { value: 450, name: '重庆', itemStyle: { color: '#f18a8a' } },
        { value: 250, name: '云南', itemStyle: { color: '#f6aea9' } }
      ]
    }
  ]
};

案例3：玫瑰图对比分析

option = {
  title: {
    text: '各季度销售对比（玫瑰图）',
    left: 'center'
  },
  
  tooltip: {
    trigger: 'item',
    formatter: '{b}: ¥{c}万'
  },
  
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  
  series: [
    {
      name: '2022年',
      type: 'pie',
      radius: [30, 120],
      center: ['30%', '50%'],
      roseType: 'area',
      label: {
        formatter: '{b}\n{c}万'
      },
      data: [
        { value: 320, name: 'Q1' },
        { value: 450, name: 'Q2' },
        { value: 380, name: 'Q3' },
        { value: 520, name: 'Q4' }
      ]
    },
    {
      name: '2023年',
      type: 'pie',
      radius: [30, 120],
      center: ['70%', '50%'],
      roseType: 'area',
      label: {
        formatter: '{b}\n{c}万'
      },
      data: [
        { value: 380, name: 'Q1' },
        { value: 520, name: 'Q2' },
        { value: 450, name: 'Q3' },
        { value: 620, name: 'Q4' }
      ]
    }
  ]
};

---

⚠️ 常见问题

问题1：标签重叠

症状：饼图标签挤在一起

解决：

series: [{
  type: 'pie',
  avoidLabelOverlap: true, // 启用自动避让
  label: {
    show: true,
    minMargin: 10, // 最小边距
    formatter: function(params) {
      // 只显示大于5%的标签
      return params.percent > 5 ? params.name : '';
    }
  }
}]

问题2：小扇区不可见

症状：数据太小的扇区看不清

解决：

// 方式1：设置最小角度
series: [{
  type: 'pie',
  minAngle: 5 // 最小5度
}]

// 方式2：合并小扇区
const threshold = 5; // 5%
const mainData = [];
let otherValue = 0;

data.forEach(item => {
  if (item.value / total * 100 >= threshold) {
    mainData.push(item);
  } else {
    otherValue += item.value;
  }
});

if (otherValue > 0) {
  mainData.push({ value: otherValue, name: '其他' });
}

问题3：嵌套图对齐问题

症状：内外层饼图不对齐

解决：

// 确保center和radius配置一致
series: [
  {
    center: ['50%', '50%'],
    radius: ['50%', '70%']
  },
  {
    center: ['50%', '50%'], // 相同的center
    radius: ['30%', '45%']
  }
]

---

🎯 最佳实践

1. 选择合适的图表类型

// 环形图 vs 饼图
// ✅ 环形图：需要在中心显示信息
// ✅ 饼图：传统展示，简单明了

// 玫瑰图 vs 普通饼图
// ✅ 玫瑰图：数据差异小，需要增强视觉对比
// ✅ 普通饼图：数据差异大，角度已足够区分

2. 标签优化

// 智能标签显示
label: {
  formatter: function(params) {
    const percent = params.percent;
    if (percent > 10) {
      return '{name|' + params.name + '}\n{val|' + percent + '%}';
    } else if (percent > 5) {
      return params.name;
    }
    return ''; // 小于5%不显示
  },
  rich: {
    name: { fontSize: 12 },
    val: { fontSize: 10, color: '#999' }
  }
}

3. 交互增强

// 悬停高亮效果
emphasis: {
  scale: true, // 放大效果
  scaleSize: 10,
  itemStyle: {
    shadowBlur: 20,
    shadowColor: 'rgba(0, 0, 0, 0.3)'
  }
}

// 选中效果
selectedMode: 'single', // 或 'multiple'
selectedOffset: 15 // 选中偏移距离

---

📊 性能指标

配置	10扇区	50扇区	建议
普通饼图	8ms	25ms	扇区≤20
嵌套饼图	12ms	40ms	每层≤15
玫瑰图	10ms	30ms	注意标签
复杂标签	15ms	50ms	简化formatter

---

🔗 相关链接

• 饼图基础.md)
• 富文本样式.md)
• 颜色系统配置

---

💎 总结

高级饼图核心价值：

• ✅ 环形图中心可展示总计
• ✅ 嵌套图展示层级关系
• ✅ 玫瑰图增强视觉对比
• ✅ 组合图多维度分析

关键决策点：

1. 需要显示总计 → 使用环形图
2. 有层级数据 → 使用嵌套饼图
3. 数据差异小 → 使用玫瑰图
4. 多年度对比 → 使用双玫瑰图

掌握高级饼图，让占比分析更立体！🥧

嵌套饼图效果

{
  "title": {
    "text": "多层级占比分析",
    "left": "center"
  },
  "tooltip": {
    "trigger": "item"
  },
  "series": [
    {
      "name": "大类",
      "type": "pie",
      "radius": [
        0,
        "30%"
      ],
      "label": {
        "position": "inner"
      },
      "data": [
        {
          "value": 60,
          "name": "类别A"
        },
        {
          "value": 40,
          "name": "类别B"
        }
      ]
    },
    {
      "name": "细分",
      "type": "pie",
      "radius": [
        "45%",
        "60%"
      ],
      "label": {
        "formatter": "{b}: {d}%"
      },
      "data": [
        {
          "value": 35,
          "name": "A-1"
        },
        {
          "value": 25,
          "name": "A-2"
        },
        {
          "value": 22,
          "name": "B-1"
        },
        {
          "value": 18,
          "name": "B-2"
        }
      ]
    }
  ]
}