在企业集团的年度与季度营收结构复盘中高管最常提出的一项审视需求是——“在一张图表内同时看清‘一级核心大盘Level-1 Categories’与‘二级细分子品类Level-2 Sub-categories’的父子层级占比与贡献结构”内环Inner Ring / 宏观大盘展示 3 大核心一级事业部如数码 3C (50%)、服饰鞋包 (30%)、生鲜食品 (20%)外环Outer Ring / 微观子品类展示每个一级事业部内部的二级细分如数码 3C 进一步拆解为手机 (30%)、电脑平板 (15%)、智能穿戴 (5%)核心要求外环的各个子品类必须在颜色色系、空间弧度上与内环对应的父品类严格 100% 绝对对齐如果使用两个完全分离的独立饼图读者必须在两张图之间来回反复比对心智负担极重如果使用普通的旭日图Sunburst旭日图更偏向深层多级下钻难以在中心区域留出大面积留白来展示核心 KPI 大总计数值。双层同心嵌套圆环图Nested Multi-Tier Donut Chart是呈现二层父子结构与中心总盘子的终极视觉模型内层圆环半径0.4 ~ 0.65采用深色阶展示一级大盘外层圆环半径0.7 ~ 0.95采用同一色系的浅色阶展示细分子品类中心镂空区域半径0 ~ 0.4高亮展示全集团 Q3 总营收大盘数字如¥ 1.85 亿元今天我们系统拆解如何利用Plotly 的go.Pie配合双重domain与hole属性打造工业级双层嵌套圆环看板。双层嵌套圆环图空间分层与同色系编码模型---------------------------------------------------------------------------------------------------- | 【 双层同心嵌套圆环图 (Nested Donut) 】 | ---------------------------------------------------------------------------------------------------- | / ~ ~ ~ ~ ~ ~ \ | | / ~ ~ \ | | / ~ / ~ ~ ~ ~ ~ \ ~ \ | | / / [ 内环: ] \ \ 外环 (半径 0.70 ~ 0.95): | | | | 数码3C (50%) | | - 手机通讯 (浅蓝 30%) | | | | (深蓝 50%) | | - 电脑平板 (天蓝 15%) | | | | | | | - 智能穿戴 (冰蓝 5%) | | | | ┌───────────┐ | | | | | | │ 全集团 Q3 │ | | | | | | │ 总营收: │ | | (外环子品类严格继承内环父品类的同 | | | | │ ¥ 1.85 亿 │ | | 色调渐变色阶弧度严格 1:1 对齐!) | | | | └───────────┘ | | | | | | [ 中心留白 ] | | | | \ \ / / | | \ ~ \ ~ ~ ~ ~ ~ / ~ / | | \ ~ ~ / | | \ ~ ~ ~ ~ ~ ~ / | ----------------------------------------------------------------------------------------------------生产级 Python 实战代码构建高颜值双层嵌套圆环看板import plotly.graph_objects as go import pandas as pd def generate_nested_donut_dashboard(output_html: str): # 1. 结构化声明父子两层级数据与严密的同色系配色方案 # 内层一级宏观事业部 inner_labels [数码 3C 事业部, 服饰鞋包 事业部, 生鲜食品 事业部] inner_values [5000, 3000, 2000] # 总计 10,000 万元 inner_colors [#0284c7, #f59e0b, #10b981] # 深天蓝, 琥珀黄, 翡翠绿 # 外层二级细分子品类 (必须严格按内层顺序排列以保证弧度对齐) outer_labels [ 手机通讯, 电脑平板, 智能穿戴, # 对应数码 3C (3000, 1500, 500) 潮流女装, 运动鞋靴, 箱包配饰, # 对应服饰鞋包 (1600, 900, 500) 时令鲜果, 海鲜水产, 肉禽蛋品 # 对应生鲜食品 (1000, 600, 400) ] outer_values [3000, 1500, 500, 1600, 900, 500, 1000, 600, 400] # 核心外层子品类采用同色系阶梯明度色阶 outer_colors [ #38bdf8, #7dd3fc, #bae6fd, # 蓝色系子品类 #fbbf24, #fcd34d, #fde68a, # 黄色系子品类 #34d399, #6ee7b7, #a7f3d0 # 绿色系子品类 ] # 2. 构建 Plotly 图形 fig go.Figure() # 添加内层圆环 Trace (半径比例: 0.38 ~ 0.65) fig.add_trace(go.Pie( labelsinner_labels, valuesinner_values, hole0.38, # 核心中心留白孔径 domain{x: [0.1, 0.9], y: [0.1, 0.9]}, # 缩放内环物理包围盒 markerdict(colorsinner_colors, linedict(color#0f172a, width2.5)), textinfolabelpercent, textpositioninside, textfontdict(color#ffffff, size13), sortFalse, # 核心禁止自动按大小排序严格保持与外环数据顺序 1:1 对齐 hoverinfolabelvaluepercent, hovertemplate一级事业部: b%{label}/bbr营收贡献: b¥ %{value:,.0f} 万元/bbr全站大盘占比: b%{percent}/bextra/extra )) # 添加外层圆环 Trace (半径比例: 0.70 ~ 0.98) fig.add_trace(go.Pie( labelsouter_labels, valuesouter_values, hole0.70, # 外环孔径扩大 domain{x: [0.0, 1.0], y: [0.0, 1.0]}, # 外环全屏展开 markerdict(colorsouter_colors, linedict(color#0f172a, width1.5)), textinfolabelpercent, textpositionoutside, textfontdict(color#f8fafc, size11), sortFalse, hoverinfolabelvaluepercent, hovertemplate细分子品类: b%{label}/bbr子品类营收: b¥ %{value:,.0f} 万元/bbr在全站占比: b%{percent}/bextra/extra )) # 3. 中心区域注入总营收 KPI 指标卡 (Annotation) fig.add_annotation( textb2026 Q3/bbrspan stylefont-size:18px;color:#38bdf8;b¥ 1.0 亿元/b/spanbrspan stylefont-size:11px;color:#94a3b8;全域总营收/span, x0.5, y0.5, fontdict(size14, color#ffffff), showarrowFalse ) # 4. 界面排版与视觉渲染调优 fig.update_layout( titleb2026 年 Q3 集团全域核心大盘与二级细分子品类贡献双层嵌套圆环图 (Nested Donut)/b, title_font_size18, title_x0.5, templateplotly_dark, paper_bgcolor#0f172a, plot_bgcolor#0f172a, showlegendFalse, height700, margindict(l50, r50, t80, b50) ) fig.write_html(output_html, include_plotlyjscdn) print(f双层嵌套圆环看板已成功导出至: {output_html})生产落地的三条核心红线绝对禁止开启自动排序sortFalsePlotly 默认会将切片按数值从大到小重新排序必须显式配置sortFalse确保外层子品类的数组切片严格紧跟在对应的父品类后面防止内外环发生严重的几何错位。中心孔径尺寸严格按0.38与0.70黄金比例切分保持内环厚度与外环厚度的视觉平衡留出足够的中心空隙放置高管最关心的“总盘子大数字”。外环文字必须配置textpositionoutside外层细分子品类数量较多、切片较细文字外挂配合折线引出彻底消灭文字重叠。
