echart旭日图_海报级设计感的旭日图,就在 ECharts 4.0
2018 年 1 月 16 日 ECharts 发布了 4.0,其中包括一种新的图表系列——旭日图。
普通旭日图:
文艺旭日图:
2B 旭日图——这货真的长得像个旭日啊 щ(゚Д゚щ):
可能大家印象中的旭日图就只能做到上面“普通旭日图”的样子了,很难想象这么有设计感的作品,居然可以是通过配置项写出来的吧?(羡婆卖瓜~)
因为这可是 ECharts 家的旭日图呀!
除了颜值之外,我们还提供了丰富的功能使得旭日图更加好用,包括:数据下钻、视觉映射、多种高亮方式及交互处理等等。我们力求用(黑)科技让可视化变得更简单,只要跟着这篇教程,就能轻松上手!
(上课铃声响起~~~)
大家对“旭日图”(Sunburst)这个名称可能有些陌生,但事实上在我们推出旭日图之前,在 ECharts 作品展示平台 Gallery 上,已经有用户使用非常 naive 的方式自己折腾出旭日图了——用多层饼图实现的“旭日图”,来自社区的作品:ECharts Gallery
旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点。因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。
引入相关文件
旭日图是 ECharts 4.0 新增的图表类型,在官网下载页面下载“完整版” ECharts,并将下载的 JavaScript 文件引入即可创建旭日图。
最简单的旭日图
创建旭日图需要在 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' 的效果分别为:设置为 'descendant',高亮所有后代设置为 'ancestor',高亮所有祖先
总结
上面的教程主要讲述的是如何入门使用旭日图,感兴趣的用户可以在 配置项手册 查看更完整的文档。在灵活应用这些配置项之后,就能做出丰富多彩的旭日图了!
echart旭日图_海报级设计感的旭日图,就在 ECharts 4.0相关推荐
- echart旭日图_基于Echarts4.0实现旭日图
昨天Echarts4.0正式发布,随着4.0而来的是一系列的更新,挑几个主要的简单说明: 1.展示方面通过增量渲染技术(4.0+)ECharts 能够展现千万级的数据量 2.针对移动端优化,移动端小屏 ...
- echart旭日图_旭日图(echarts)
旭日图 var dataL1 = []; var dataL2 = []; var data1 = []; for (var i = 0; i <= 60; i++) { dataL1.push ...
- 7段均衡器最佳调节图_超高级的吉他均衡器 更细腻的控制 你值得拥有
BOSS DD-200吉他均衡器 最近 BOSS推出了一款全新的吉他均衡效果器,为了追求更细腻的控制,这一次的更新,EQ200 可以说做出了不少的颠覆性改进.面板上很直观的看到,EQ的推子增加到了10 ...
- 嵌套饼图_旭日图的效率,高到饼图都羡慕
在展示占比情况时,饼图是我们最常用的选择.但是,饼图只能展示单层数据的占比情况,在面对多层级数据时,我们真的要用10个饼图进行可视化吗?不用挠头苦思,今天我们就来看看多个饼图的组合升级版--旭日图是怎 ...
- echart雷达图数据图形的填充颜色_数据可视化,职场数据分析都需要哪些常用的图表?...
数据可视化是为了使得数据更高效的反应数据情况,便于让读者更高效阅读,而不单是自己使用,通过数据可视化突出数据背后的规律,以此突出数据中的重要因素,并且,数据可视化可以将数据变得更加直观. 使用图表数据 ...
- echart旭日图_echarts之用饼图制作带labelline的旭日图(一)
前言 如果你想要用较少的代码实现比较酷炫的数据统计表,echarts是值得你考虑的一种实现方式.官网提供了很多实例供参考.并且配置项手册很详细,几乎囊括了所有的绘图需求.但是再全的配置,偶尔也会有不满 ...
- 用 Python 快速制作海报级地图
作者:费弗里 来源:Python大数据分析 1 简介 基于Python中诸如matplotlib等功能丰富.自由度极高的绘图库,我们可以完成各种极富艺术感的可视化作品,关于这一点我在系列文章在模仿中精 ...
- 用旭日图展示数据的三种方法
什么是旭日图? 旭日图(Sunburst Chart)是一种现代饼图,它超越传统的饼图和环图,能表达清晰的层级和归属关系,以父子层次结构来显示数据构成情况.旭日图中,离远点越近表示级别越高,相邻两层中 ...
- echarts旭日图数据重构处理
网上对于旭日图的数据结构处理资料很少,所以自己记录一下. 首先看旭日图需要的数据结构: // 旭日图{name: '淘宝',children: [{name: '女装',children:[{name ...
最新文章
- 十进制转十六进制(蓝桥杯)
- 《西河大鼓——夸轿车》(唱词文本)
- kdevelp 导入makefile工程
- Codeforces Round #379 (Div. 2) E. Anton and Tree
- springmvc中的全注解模式
- python水印_Python如何为图片添加水印
- R_ggplot2基础(四)
- 关于凸包算法和叉积的应用
- Java面试--Structs
- EPSON LQ-675KT 打印机无法进纸解决方法
- 用奈式第一准则判断是否有码间干扰
- 纯css实现icon的网站,代码可复制
- 软件工程基础知识--系统设计
- OpenGL课程设计 三维图形交互程序 bunny兔+飞机模型
- com.itextpdf.text.exceptions.IllegalPdfSyntaxException: Unbalanced save/restore state operators
- 【小程序源码】经典语录大全多种分类语录
- 视频前景提取 (III)【Mat版本】
- 用最通俗易懂的话告诉你交换机和路由器的区别
- 为什么要有无参构造方法,无参构造的运行原理
- 蓝牙架构(6)—— 3 数据传输架构(3.1 核心传输载体)