旭日图 sunburst
层级构成的环形表达:内圈是上层、外圈是下层,同一份数据同时看到层级路径与各级占比。与矩形树图同源,sunburstData 驱动。
何时使用
- 数据有父子包含关系且层级 2–3 层、每层类目 3–6 个——这是它和环形图的分界线;
- 想同时回答「各部门占多少」和「部门里面又是什么构成」;
- 只有一层构成、不需要路径感时,它退化成环形图,请直接用环形图;
- 空间紧张、层级多到外圈切片过碎时,改用矩形树图。
示例
数据结构与 treemap 一致:{ name, value?, children? } 嵌套数组,叶子节点必须有 value,上层角宽由子节点汇总。
三级结构
旭日图的真正主场:三层预算树,内圈看事业群盘子、中圈看部门、外圈看细项——一条射线读完整条路径。
数值直标
外圈切片需要精确读数时开 showValues,数值随外层标签一起标出来。
分幕展开:从环形图长出旭日图
只有一层时旭日图就是环形图——所以它最自然的讲法是先给结论、再展开构成。用 scenes 分两幕:第一幕只有来源大类(环形图形态),推进到第二幕展开子层级。
第 1 / 2 幕
配置要点
- 内圈角宽由子节点汇总决定,叶子节点必须有
value; - 悬浮读取节点路径与数值;
showValues让外层标签带数值; - 层级深、类目多的数据先做归并,否则外圈切片过碎;
- 分幕展示用
scenes(见上例),字段速查见 API 参考。