ECharts - 15.旭日图
旭日图
旭日图(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 中设置整个旭日图的样式。
上述三者的优先级是从高到低的,也就是说,配置了 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'
的效果分别为:
总结
上面的教程主要讲述的是如何入门使用旭日图,感兴趣的用户可以在 配置项手册 查看更完整的文档。在灵活应用这些配置项之后,就能做出丰富多彩的旭日图了!
ECharts - 15.旭日图相关推荐
- Echarts——sunburt 旭日图
将非结构化数据转换为结构化数据: sunburst是echartsv4.0新增的功能. <div id="demo" style="width: 100%;heig ...
- echart旭日图_海报级设计感的旭日图,就在 ECharts 4.0
2018 年 1 月 16 日 ECharts 发布了 4.0,其中包括一种新的图表系列--旭日图. 普通旭日图: 文艺旭日图: 2B 旭日图--这货真的长得像个旭日啊 щ(゚Д゚щ): 可能大家印象 ...
- Echarts——旭日图
旭日图 旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点.因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系. 引入相关文件 旭日图是 EChar ...
- echart旭日图_旭日图(echarts)
旭日图 var dataL1 = []; var dataL2 = []; var data1 = []; for (var i = 0; i <= 60; i++) { dataL1.push ...
- Echarts绘制差异代谢产物分类与KEGG通路分类的旭日图
文章目录 前言 数据准备工作 绘图 excel旭日图的绘制 ECharts旭日图的绘制 ECharts旭日图 菜鸟编辑器修改后的旭日图 附演示代码 前言 整理实验数据,进行可视化,旭日图有利于简洁明了 ...
- echart旭日图_ECharts 旭日图
ECharts 旭日图 旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点.因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系. ECharts 创 ...
- echart旭日图_echarts(10):旭日图
旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点.因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系. ECharts 创建旭日图很简单,只需要在 ...
- echart旭日图_echarts之用饼图制作带labelline的旭日图(一)
前言 如果你想要用较少的代码实现比较酷炫的数据统计表,echarts是值得你考虑的一种实现方式.官网提供了很多实例供参考.并且配置项手册很详细,几乎囊括了所有的绘图需求.但是再全的配置,偶尔也会有不满 ...
- 旭日图(Sunburst)
更多关于Apache ECharts的文档,请阅读: Apache ECharts文档专题 <Apache ECharts教程> 5 分钟上手 ECharts ECharts 5 新特性 ...
最新文章
- 港大徐爱民组研究助理招聘-内分泌代谢方向
- 亚马逊专家揭秘:如何建立自动检测乳腺癌的深度学习模型
- 分享Kali Linux 2016.2第50周镜像文件
- python 文本聚类算法
- PostgreSQL在何处处理 sql查询之五十一
- sscanf取固定长度的int_翠屏摇臂式取水泵船长沙水泵厂专业设计中大泵业
- 闭包案例产生多个相同的随机数 沙箱
- 本地搭建WordPress (XAMPP环境)
- css文本行高是哪个属性_CSS中的line-height行高属性的使用技巧小结
- js设计模式之Constructor(构造器)
- li标签行内元素高度及居中
- Leetcode每日一题:142.linked-list-cycle-ii(环形链表Ⅱ)
- H - A Shooting Game
- 坐标轨迹计算_【老杨讲坛】737NG无系留最大风速限制的插值计算
- bzoj1612 奶牛的比赛
- 通过一段代码发现 emu8086 和 DOSBox 的一点区别
- xlsxwriter设置列宽_Python3之excel操作——xlsxwriter模块
- 好用又免费的英文校对工具!英文写作就要用Wordvice AI
- 作为使用者对qq拼音输入法和搜狗输入法的评价
- 数字的原码,补码,反码,~和‘-’的区别。取反与负号的区别。