旭日图

旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点。因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。 https://echarts.baidu.com/gallery/view.html?c=sunburst-monochrome&edit=1&reset=1

引入相关文件

旭日图是 ECharts 4.0 新增的图表类型,在官网下载页面下载“完整版” ECharts,并将下载的 JavaScript 文件引入即可创建旭日图。

最简单的旭日图

创建旭日图需要在 series 配置项中声明类型为 'sunburst' 的系列,并且以树形结构声明其 data

  1. var option ={
  2. series:{
  3. type:'sunburst',
  4. data:[{
  5. name:'A',
  6. value:10,
  7. children:[{
  8. value:3,
  9. name:'Aa'
  10. },{
  11. value:5,
  12. name:'Ab'
  13. }]
  14. },{
  15. name:'B',
  16. children:[{
  17. name:'Ba',
  18. value:4
  19. },{
  20. name:'Bb',
  21. value:2
  22. }]
  23. },{
  24. name:'C',
  25. value:3
  26. }]
  27. }
  28. };

得到以下结果: https://echarts.baidu.com/gallery/view.html?c=doc-example/sunburst-simple&edit=1&reset=1

颜色等样式调整

默认情况下会使用全局调色盘 color 分配最内层的颜色,其余层则与其父元素同色。在旭日图中,扇形块的颜色有以下三种设置方式:

  • series.data.itemStyle 中设置每个扇形块的样式;
  • series.levels.itemStyle 中设置每一层的样式;
  • series.itemStyle 中设置整个旭日图的样式。 上述三者的优先级是从高到低的,也就是说,配置了 series.data.itemStyle 的扇形块将会覆盖 series.levels.itemStyleseries.itemStyle 的设置。

下面,我们将整体的颜色设为灰色 '#aaa',将最内层的颜色设为蓝色 'blue',将 AaB 这两块设为红色 'red'

  1. var option ={
  2. series:{
  3. type:'sunburst',
  4. data:[{
  5. name:'A',
  6. value:10,
  7. children:[{
  8. value:3,
  9. name:'Aa',
  10. itemStyle:{
  11. color:'red'
  12. }
  13. },{
  14. value:5,
  15. name:'Ab'
  16. }]
  17. },{
  18. name:'B',
  19. children:[{
  20. name:'Ba',
  21. value:4
  22. },{
  23. name:'Bb',
  24. value:2
  25. }],
  26. itemStyle:{
  27. color:'red'
  28. }
  29. },{
  30. name:'C',
  31. value:3
  32. }],
  33. itemStyle:{
  34. color:'#aaa'
  35. },
  36. levels:[{
  37. // 留给数据下钻的节点属性
  38. },{
  39. itemStyle:{
  40. color:'blue'
  41. }
  42. }]
  43. }
  44. };

效果为: https://echarts.baidu.com/gallery/view.html?c=doc-example/sunburst-color&edit=1&reset=1

按层配置样式

旭日图是一种有层次的结构,为了方便同一层样式的配置,我们提供了 levels 配置项。它是一个数组,其中的第 0 项表示数据下钻后返回上级的图形,其后的每一项分别表示从圆心向外层的层级。

例如,假设我们没有数据下钻功能,并且希望将最内层的扇形块的颜色设为红色,文字设为蓝色,可以这样设置:

  1. series:{
  2. // ...
  3. levels:[
  4. {
  5. // 留给数据下钻点的空白配置
  6. },
  7. {
  8. // 最靠内测的第一层
  9. itemStyle:{
  10. color:'red'
  11. },
  12. label:{
  13. color:'blue'
  14. }
  15. },
  16. {
  17. // 第二层 ...
  18. }
  19. ]
  20. }

在实际使用的过程中,你会发现按层配置样式是一个很常用的功能,能够很大程度上提高配置的效率。

数据下钻

旭日图默认支持数据下钻,也就是说,当点击了扇形块之后,将以该扇形块的数据作为根节点,便于进一步了解该数据的细节。 https://echarts.baidu.com/gallery/view.html?c=sunburst-simple&edit=1&reset=1

当数据下钻后,中间会出现一个用于返回上一层的图形,该图形的样式可以通过 levels[0] 配置。

如果不需要数据下钻功能,可以通过将 nodeClick 设置为 false 关闭;或者将其设为 'link',并将 data.link 设为点击扇形块对应打开的链接。

高亮相关扇形块

旭日图支持鼠标移动到某扇形块时,高亮相关数据块的操作,可以通过设置 highlightPolicy,包括以下几种高亮方式:

  • 'descendant'(默认值):高亮鼠标移动所在扇形块与其后代元素;
  • 'ancestor':高亮鼠标所在扇形块与其祖先元素;
  • 'self':仅高亮鼠标所在扇形块;
  • 'none':不会淡化(downplay)其他元素。 上面提到的“高亮”,对于鼠标所在的扇形块,会使用 emphasis 样式;对于其他相关扇形块,则会使用 highlight 样式。通过这种方式,可以很方便地实现突出显示相关数据的需求。

具体来说,对于配置项:

  1. itemStyle:{
  2. color:'yellow',
  3. borderWidth:2,
  4. emphasis:{
  5. color:'red'
  6. },
  7. highlight:{
  8. color:'orange'
  9. },
  10. downplay:{
  11. color:'#ccc'
  12. }
  13. }

highlightPolicy'descendant''ancestor' 的效果分别为: https://echarts.baidu.com/gallery/view.html?c=doc-example/sunburst-highlight-descendant&edit=1&reset=1

总结

上面的教程主要讲述的是如何入门使用旭日图,感兴趣的用户可以在 配置项手册 查看更完整的文档。在灵活应用这些配置项之后,就能做出丰富多彩的旭日图了! https://echarts.baidu.com/gallery/view.html?c=sunburst-book&edit=1&reset=1