项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

旭日图 sunburst ​

层级构成的环形表达:内圈是上层、外圈是下层,同一份数据同时看到层级路径与各级占比。与矩形树图同源,sunburstData 驱动。

何时使用 ​

  • 数据有父子包含关系且层级 2–3 层、每层类目 3–6 个——这是它和环形图的分界线;
  • 想同时回答「各部门占多少」和「部门里面又是什么构成」;
  • 只有一层构成、不需要路径感时,它退化成环形图,请直接用环形图;
  • 空间紧张、层级多到外圈切片过碎时,改用矩形树图。

示例 ​

数据结构与 treemap 一致:{ name, value?, children? } 嵌套数组,叶子节点必须有 value,上层角宽由子节点汇总。

三级结构 ​

旭日图的真正主场:三层预算树,内圈看事业群盘子、中圈看部门、外圈看细项——一条射线读完整条路径。

数值直标 ​

外圈切片需要精确读数时开 showValues,数值随外层标签一起标出来。

分幕展开:从环形图长出旭日图 ​

只有一层时旭日图就是环形图——所以它最自然的讲法是先给结论、再展开构成。用 scenes 分两幕:第一幕只有来源大类(环形图形态),推进到第二幕展开子层级。

第 1 / 2 幕

配置要点 ​

  • 内圈角宽由子节点汇总决定,叶子节点必须有 value;
  • 悬浮读取节点路径与数值;showValues 让外层标签带数值;
  • 层级深、类目多的数据先做归并,否则外圈切片过碎;
  • 分幕展示用 scenes(见上例),字段速查见 API 参考。

相关 ​