大家好，又见面了，我是你们的朋友全栈君。
更多关于Apache ECharts的文档，请阅读:
- Apache ECharts文档专题
《Apache ECharts教程》
- 5 分钟上手 ECharts
- ECharts 5 新特性
- ECharts 5 升级指南
- 在打包环境中使用 ECharts
- ECharts 基础概念概览
- 个性化图表的样式
- ECharts 中的样式简介
- 异步数据加载和更新
- 使用 dataset 管理数据
- 使用 transform 进行数据转换第一部分
- 使用 transform 进行数据转换第二部分
- 在图表中加入交互组件
- 移动端自适应
- 数据的视觉映射
- ECharts 中的事件和行为
- 动态排序柱状图
- 小例子：自己实现拖拽
- 小例子：实现日历图
- 旭日图
- 自定义系列
- 富文本标签
- 服务端渲染
- 使用 Canvas 或者 SVG 渲染
- 地理坐标系和地图系列的 SVG 底图
- 在图表中支持无障碍访问
- 使用 ECharts GL 实现基础的三维可视化
- 在微信小程序中使用 ECharts
旭日图（Sunburst）由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。
引入相关文件
旭日图是 Apache EChartsTM 4.0 新增的图表类型，从 CDN 引入完整版的 echarts.min.js
最简单的旭日图
创建旭日图需要在 series 配置项中声明类型为 ‘sunburst’ 的系列，并且以树形结构声明其 data：
代码语言：javascript复制var option = {
series: {
type: 'sunburst',
data: [{
name: 'A',
value: 10,
children: [{
value: 3,
name: 'Aa'
}, {
value: 5,
name: 'Ab'
}]
}, {
name: 'B',
children: [{
name: 'Ba',
value: 4
}, {
name: 'Bb',
value: 2
}]
}, {
name: 'C',
value: 3
}]
}
};得到以下结果：
颜色等样式调整
默认情况下会使用全局调色盘 color 分配最内层的颜色，其余层则与其父元素同色。在旭日图中，扇形块的颜色有以下三种设置方式：
- 在 series.data.itemStyle 中设置每个扇形块的样式；
- 在 series.levels.itemStyle 中设置每一层的样式；
- 在 series.itemStyle 中设置整个旭日图的样式。 上述三者的优先级是从高到低的，也就是说，配置了 series.data.itemStyle 的扇形块将会覆盖 series.levels.itemStyle 和 series.itemStyle 的设置。
下面，我们将整体的颜色设为灰色 ‘#aaa’，将最内层的颜色设为蓝色 ‘blue’，将 Aa、B 这两块设为红色 ‘red’。
代码语言：javascript复制var option = {
series: {
type: 'sunburst',
data: [{
name: 'A',
value: 10,
children: [{
value: 3,
name: 'Aa',
itemStyle: {
color: 'red'
}
}, {
value: 5,
name: 'Ab'
}]
}, {
name: 'B',
children: [{
name: 'Ba',
value: 4
}, {
name: 'Bb',
value: 2
}],
itemStyle: {
color: 'red'
}
}, {
name: 'C',
value: 3
}],
itemStyle: {
color: '#aaa'
},
levels: [{
// 留给数据下钻的节点属性
}, {
itemStyle: {
color: 'blue'
}
}]
}
};效果为：
按层配置样式
旭日图是一种有层次的结构，为了方便同一层样式的配置，我们提供了 levels 配置项。它是一个数组，其中的第 0 项表示数据下钻后返回上级的图形，其后的每一项分别表示从圆心向外层的层级。
例如，假设我们没有数据下钻功能，并且希望将最内层的扇形块的颜色设为红色，文字设为蓝色，可以这样设置：
代码语言：javascript复制series: {
// ...
levels: [
{
// 留给数据下钻点的空白配置
},
{
// 最靠内测的第一层
itemStyle: {
color: 'red'
},
label: {
color: 'blue'
}
},
{
// 第二层 ...
}
]
}在实际使用的过程中，你会发现按层配置样式是一个很常用的功能，能够很大程度上提高配置的效率。
数据下钻
旭日图默认支持数据下钻，也就是说，当点击了扇形块之后，将以该扇形块的数据作为根节点，便于进一步了解该数据的细节。
当数据下钻后，中间会出现一个用于返回上一层的图形，该图形的样式可以通过 levels[0] 配置。
如果不需要数据下钻功能，可以通过将 nodeClick 设置为 false 关闭；或者将其设为 ‘link’，并将 data.link 设为点击扇形块对应打开的链接。
高亮相关扇形块
旭日图支持鼠标移动到某扇形块时，高亮相关数据块的操作，可以通过设置 highlightPolicy，包括以下几种高亮方式：
- ‘descendant’（默认值）：高亮鼠标移动所在扇形块与其后代元素；
- ‘ancestor’：高亮鼠标所在扇形块与其祖先元素；
- ‘self’：仅高亮鼠标所在扇形块；
- ‘none’：不会淡化（downplay）其他元素。
上面提到的“高亮”，对于鼠标所在的扇形块，会使用 emphasis 样式；对于其他相关扇形块，则会使用 highlight 样式。通过这种方式，可以很方便地实现突出显示相关数据的需求。
具体来说，对于配置项：
代码语言：javascript复制itemStyle: {
color: 'yellow',
borderWidth: 2,
emphasis: {
color: 'red'
},
highlight: {
color: 'orange'
},
downplay: {
color: '#ccc'
}
}highlightPolicy 为 ‘descendant’ 或 ‘ancestor’ 的效果分别为：
总结
上面的教程主要讲述的是如何入门使用旭日图，感兴趣的用户可以在 配置项手册 查看更完整的文档。在灵活应用这些配置项之后，就能做出丰富多彩的旭日图了！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/189412.html原文链接：https://javaforall.cn
