{{ target: sunburst-series }}
旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点。因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。
旭日图是 ECharts 4.0 新增的图表类型,从 CDN 引入完整版的 echarts.min.js
创建旭日图需要在 series
配置项中声明类型为 'sunburst'
的系列,并且以树形结构声明其 data
:
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
的设置。
下面,我们将整体的颜色设为灰色 '#aaa'
,将最内层的颜色设为蓝色 'blue'
,将 Aa
、B
这两块设为红色 'red'
。
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 项表示数据下钻后返回上级的图形,其后的每一项分别表示从圆心向外层的层级。
例如,假设我们没有数据下钻功能,并且希望将最内层的扇形块的颜色设为红色,文字设为蓝色,可以这样设置:
series: { // ... levels: [ { // 留给数据下钻点的空白配置 }, { // 最靠内测的第一层 itemStyle: { color: 'red' }, label: { color: 'blue' } }, { // 第二层 ... } ] }
在实际使用的过程中,你会发现按层配置样式是一个很常用的功能,能够很大程度上提高配置的效率。
旭日图默认支持数据下钻,也就是说,当点击了扇形块之后,将以该扇形块的数据作为根节点,便于进一步了解该数据的细节。
当数据下钻后,中间会出现一个用于返回上一层的图形,该图形的样式可以通过 levels[0] 配置。
如果不需要数据下钻功能,可以通过将 nodeClick 设置为 false
关闭;或者将其设为 'link'
,并将 data.link 设为点击扇形块对应打开的链接。
旭日图支持鼠标移动到某扇形块时,高亮相关数据块的操作,可以通过设置 highlightPolicy,包括以下几种高亮方式:
'descendant'
(默认值):高亮鼠标移动所在扇形块与其后代元素;'ancestor'
:高亮鼠标所在扇形块与其祖先元素;'self'
:仅高亮鼠标所在扇形块;'none'
:不会淡化(downplay)其他元素。上面提到的“高亮”,对于鼠标所在的扇形块,会使用 emphasis
样式;对于其他相关扇形块,则会使用 highlight
样式。通过这种方式,可以很方便地实现突出显示相关数据的需求。
具体来说,对于配置项:
itemStyle: { color: 'yellow', borderWidth: 2, emphasis: { color: 'red' }, highlight: { color: 'orange' }, downplay: { color: '#ccc' } }
highlightPolicy
为 'descendant'
或 'ancestor'
的效果分别为:
上面的教程主要讲述的是如何入门使用旭日图,感兴趣的用户可以在 配置项手册 查看更完整的文档。在灵活应用这些配置项之后,就能做出丰富多彩的旭日图了!