ECharts 旭日图（Sunburst Chart）教程
ECharts 的旭日图（series.type = ‘sunburst’）是一种多层级放射状图表，适合展示层次结构数据（如组织架构、文件目录、分类占比）。它从中心向外辐射，每层代表一个级别，扇区大小根据 value 决定，支持交互钻取（点击进入子层）。
1. 基础旭日图示例
以下是一个三级层次的简单旭日图，直接复制到 HTML 文件运行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>ECharts 旭日图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 800px;"></div>
<script>
const myChart = echarts.init(document.getElementById('main'));
const option = {
title: {
text: 'ECharts 旭日图示例',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
series: {
type: 'sunburst',
radius: [0, '90%'], // 内径0，外径90%
label: { // 显示标签
rotate: 'radial', // 径向旋转
show: true
},
itemStyle: {
borderRadius: 8, // 圆角
shadowBlur: 10
},
emphasis: { // 高亮
focus: 'descendant' // 高亮当前及子节点
},
data: [{
name: '根节点',
value: 100,
children: [{
name: '一级A',
value: 40,
children: [
{ name: '二级A1', value: 20 },
{ name: '二级A2', value: 20 }
]
}, {
name: '一级B',
value: 60,
children: [
{ name: '二级B1', value: 30 },
{ name: '二级B2', value: 30 }
]
}]
}]
}
};
myChart.setOption(option);
</script>
</body>
</html>2. 关键配置项（series-sunburst）
| 配置项 | 说明 |
|---|---|
| data | 树状数组：{ name, value, children: […] } |
| radius | [‘内径%’, ‘外径%’] 或 [0, ‘90%’] |
| center | 中心位置 [‘50%’, ‘50%’] |
| label | 标签显示：show/rotate (‘tangential’ 切向 / ‘radial’ 径向) |
| itemStyle | 扇区样式：borderRadius、borderWidth、shadow 等 |
| levels | 自定义每层样式（高级） |
| emphasis.focus | ‘self’（仅自身） / ‘descendant’（子孙） / ‘ancestor’（祖先） |
| highlightPolicy | ‘descendant’ 等，控制高亮行为 |
| downplay | 退出高亮时样式 |
3. 高级技巧
- 钻取交互：默认点击进入子层，点击中心返回上级。结合事件监听可自定义钻取。
- 圆角效果：itemStyle.borderRadius 支持数组 [内上, 外上, 外下, 内下]。
- 视觉映射：结合 visualMap 根据 value 映射颜色/大小。
- 动画：animation: true，支持淡入、展开动画。
更多示例和配置，推荐官方：
- 基础旭日图：https://echarts.apache.org/examples/zh/editor.html?c=sunburst-simple
- 手册：https://echarts.apache.org/zh/option.html#series-sunburst
如果你需要多层数据示例、钻取事件处理、圆角样式或其他自定义（如添加图例），告诉我，我可以给出完整代码！
