《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：

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’。

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’ 的效果分别为：

总结

上面的教程主要讲述的是如何入门使用旭日图，感兴趣的用户可以在配置项手册查看更完整的文档。在灵活应用这些配置项之后，就能做出丰富多彩的旭日图了！

旭日图（Sunburst）相关推荐

pyecharts第九节、旭日图(现代饼图)
旭日图用的包是: pip install pyecharts -U 执行就好创建[demo9.py]测试类输入以下编码 from pyecharts import options as optsf ...
嵌套饼图_旭日图的效率，高到饼图都羡慕
在展示占比情况时,饼图是我们最常用的选择.但是,饼图只能展示单层数据的占比情况,在面对多层级数据时,我们真的要用10个饼图进行可视化吗?不用挠头苦思,今天我们就来看看多个饼图的组合升级版--旭日图是怎 ...
echart旭日图_海报级设计感的旭日图，就在 ECharts 4.0
2018 年 1 月 16 日 ECharts 发布了 4.0,其中包括一种新的图表系列--旭日图. 普通旭日图: 文艺旭日图: 2B 旭日图--这货真的长得像个旭日啊 щ(ﾟДﾟщ): 可能大家印象 ...
用旭日图展示数据的三种方法
什么是旭日图? 旭日图(Sunburst Chart)是一种现代饼图,它超越传统的饼图和环图,能表达清晰的层级和归属关系,以父子层次结构来显示数据构成情况.旭日图中,离远点越近表示级别越高,相邻两层中 ...
Echars 旭日图鼠标浮动显示value值
效果如图所示: 可能是搜索方法的问题,想要在旭日图上实现鼠标浮动,显示value,百度后都说旭日图不支持tooltip.反复翻官方文档后找到一个属性可以实现. 官方文档如图下为修改后的官方示例: ...
极致呈现系列之：Echarts旭日图的绚丽奇观
目录什么是旭日图旭日图的特性及应用场景旭日图的特性应用场景旭日图常用的配置项创建基本的旭日图自定义旭日图样式样式旭日图的高级应用什么是旭日图旭日图是一种可视化图表,用于展示层级结构 ...
8.旭日图+热力地图
旭日图+热力地图 1.旭日图 2.热力地图(中国和世界) 2.1 2020年全国各省市GDP排名前十省市 2.2新冠肺炎累计确诊病例数最多的十个国家 1.旭日图 from pyecharts.char ...
echart旭日图_echarts之用饼图制作带labelline的旭日图(一)
前言如果你想要用较少的代码实现比较酷炫的数据统计表,echarts是值得你考虑的一种实现方式.官网提供了很多实例供参考.并且配置项手册很详细,几乎囊括了所有的绘图需求.但是再全的配置,偶尔也会有不满 ...
旭日图更好地呈现数据的层次结构，细致划分各项数据
旭日图也称为"太阳图",是一种圆环镶接图.旭日图中每个级别的数据通过一个圆环表示,离原点越近代表圆环级别越高,最内层的圆表示层次结构的顶级,然后一层一层去看数据的占比情况.越往外, ...
echarts旭日图添加图例
echarts官网中的示例如下,我们只能看到一个visualMap的属性中加了inRange,便可以出来一个渐变色的图例但往往业务需求要的图例是这种格式的先贴一个实现的效果图,铛铛啷挡~~ 实现这 ...

旭日图（Sunburst）

更多关于Apache ECharts的文档，请阅读: