旭日图必须借助JavaScript图表库（如ECharts或D3）实现，纯HTML/CSS无法支持动态层级环形结构及交互功能；ECharts自4.0起原生支持sunburst类型，数据需为树形结构，配置series.type为'sunburst'并合理设置levels与label等细节参数。
HTML 本身不支持旭日图（Sunburst），必须借助 JavaScript 图表库实现；纯 HTML/CSS 无法动态渲染层级环形结构，强行模拟会失去交互、缩放、数据绑定等核心能力。
用 echarts 最快跑通一个可交互的旭日图
这是当前最省心、兼容性最好、文档最全的选择。ECharts 从 4.0 开始原生支持 sunburst 类型，数据格式清晰，API 稳定。
- 引入方式：通过
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> - 图表类型必须设为
"sunburst"，series中不能混用其他 type - 数据是树形结构，每个节点必须含
name和children（叶子节点可省略children，但建议显式设为空数组） - 注意
levels配置：不同层级可单独设置颜色、label 显示策略，比如levels: [{}, {label: {show: false}}, {label: {formatter: '{b}'}}]
option = {
series: [{
type: 'sunburst',
data: [{
name: 'A',
children: [
{ name: 'A1', value: 10 },
{ name: 'A2', children: [{ name: 'A2-1', value: 5 }] }
]
}]
}]
};
d3.js 实现旭日图时绕不开的三个坑
D3 灵活但门槛高，尤其对初学者，容易卡在坐标转换和数据绑定上。
-
d3.partition()是核心布局函数，但它只生成矩形坐标（x/y/width/height），需配合d3.arc()手动转成环形路径 —— 忘了这步就只能画出“饼图拉伸版” - 层级深度靠
root.sum(d => d.value)+d3.partition().size([2 * Math.PI, radius])控制，size第二个参数不是像素，而是“最大半径值”，单位抽象 - 鼠标事件绑定在
<path>上时，必须用.on('click', (event, d) => {...})形式（D3 v6+），旧写法.on('click', function(d) {...})拿不到正确的d.data
为什么不用 Chart.js 或 ApexCharts 做旭日图
它们目前都不支持 sunburst 图表类型，强行找插件或 fork 改源码风险高、维护难。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
Chart.js官方插件库中没有成熟sunburst插件，社区个别实现仅支持单层，且不响应数据更新 -
ApexCharts的 GitHub issue 中明确标注sunburst为 “planned but not scheduled”，最近两年无进展 - 如果项目已重度依赖这两个库，更推荐降级方案：用
treemap替代（两者都支持），视觉信息密度接近，且保留 drill-down 逻辑
移动端适配和性能要注意什么
旭日图在小屏上极易因文字重叠、点击热区过小导致体验崩坏。
- 禁用默认 label：设
label: { show: false }（ECharts）或完全不绑定text元素（D3），改用 tooltip 触发显示 - 最小可点击半径建议 ≥ 32px，可通过
nodeClick: 'link'（ECharts）或给<path>加pointer-events: stroke并扩大stroke-width模拟 - 超过 500 个节点时，ECharts 默认会卡顿，需开启
renderMode: 'canvas'并关闭动画：animation: false
真正麻烦的从来不是“怎么画出来”，而是“怎么让每一层都响应正确、缩放不糊、下钻不崩、小屏能点准”。选库只是第一步，后续几乎都要调 levels、label.formatter、silent 这些细节参数才能落地。
