7天带你搞定一个图表框架echarts（七）

旭日图的基本用法

旭日图（Sunburst）由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。

先声明旭日图所需要的数据，数据本身我们不需要去深究，只需要了解数据格式，下列代码是声明数据并对数据进行一些简单处理

        var colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'];var bgColor = '#2E2733';var itemStyle = {star5: {color: colors[0]},star4: {color: colors[1]},star3: {color: colors[2]},star2: {color: colors[3]}};var data = [{name: '虚构',itemStyle: {color: colors[1]},children: [{name: '小说',children: [{name: '5☆',children: [{name: '疼'}, {name: '慈悲'}, {name: '楼下的房客'}]}, {name: '4☆',children: [{name: '虚无的十字架'}, {name: '无声告白'}, {name: '童年的终结'}]}, {name: '3☆',children: [{name: '疯癫老人日记'}]}]}, {name: '其他',children: [{name: '5☆',children: [{name: '纳博科夫短篇小说全集'}]}, {name: '4☆',children: [{name: '安魂曲'}, {name: '人生拼图版'}]}, {name: '3☆',children: [{name: '比起爱你，我更需要你'}]}]}]}, {name: '非虚构',itemStyle: {color: colors[2]},children: [{name: '设计',children: [{name: '5☆',children: [{name: '无界面交互'}]}, {name: '4☆',children: [{name: '数字绘图的光照与渲染技术'}, {name: '日本建筑解剖书'}]}, {name: '3☆',children: [{name: '奇幻世界艺术\n&RPG地图绘制讲座'}]}]}, {name: '社科',children: [{name: '5☆',children: [{name: '痛点'}]}, {name: '4☆',children: [{name: '卓有成效的管理者'}, {name: '进化'}, {name: '后物欲时代的来临',}]}, {name: '3☆',children: [{name: '疯癫与文明'}]}]}, {name: '心理',children: [{name: '5☆',children: [{name: '我们时代的神经症人格'}]}, {name: '4☆',children: [{name: '皮格马利翁效应'}, {name: '受伤的人'}]}, {name: '3☆',}, {name: '2☆',children: [{name: '迷恋'}]}]}, {name: '居家',children: [{name: '4☆',children: [{name: '把房子住成家'}, {name: '只过必要生活'}, {name: '北欧简约风格'}]}]}, {name: '绘本',children: [{name: '5☆',children: [{name: '设计诗'}]}, {name: '4☆',children: [{name: '假如生活糊弄了你'}, {name: '博物学家的神秘动物图鉴'}]}, {name: '3☆',children: [{name: '方向'}]}]}, {name: '哲学',children: [{name: '4☆',children: [{name: '人生的智慧'}]}]}, {name: '技术',children: [{name: '5☆',children: [{name: '代码整洁之道'}]}, {name: '4☆',children: [{name: 'Three.js 开发指南'}]}]}]}];for (var j = 0; j < data.length; ++j) {var level1 = data[j].children;for (var i = 0; i < level1.length; ++i) {var block = level1[i].children;var bookScore = [];var bookScoreId;for (var star = 0; star < block.length; ++star) {var style = (function(name) {switch (name) {case '5☆':bookScoreId = 0;return itemStyle.star5;case '4☆':bookScoreId = 1;return itemStyle.star4;case '3☆':bookScoreId = 2;return itemStyle.star3;case '2☆':bookScoreId = 3;return itemStyle.star2;}})(block[star].name);block[star].label = {color: style.color,downplay: {opacity: 0.5}};if (block[star].children) {style = {opacity: 1,color: style.color};block[star].children.forEach(function(book) {book.value = 1;book.itemStyle = style;book.label = {color: style.color};var value = 1;if (bookScoreId === 0 || bookScoreId === 3) {value = 5;}if (bookScore[bookScoreId]) {bookScore[bookScoreId].value += value;} else {bookScore[bookScoreId] = {color: colors[bookScoreId],value: value};}});}}level1[i].itemStyle = {color: data[j].itemStyle.color};}}

声明数据的格式：{name:"",value:"",children:[]}，其中name为名称，value为数值，children表示子元素。如果父级元素中使用了value，并且大于子元素之和，可以用来表示还有其他子元素未显示；如果没有使用，，则为子元素之和。children可以进行嵌套使用该格式

下面我们具体看一下配置项：

 var myChart = echarts.init(document.getElementById('main'));var option = {backgroundColor: bgColor,color: colors,series: [{type: 'sunburst',center: ['50%', '48%'],data: data,//扇形块根据数据 value 的排序方式sort: function(a, b) {if (a.depth === 1) {return b.getValue() - a.getValue();} else {return a.dataIndex - b.dataIndex;}},//每个扇形块中，文本标签的样式label: {rotate: 'radial',color: bgColor},//扇形块的样式itemStyle: {borderColor: bgColor,borderWidth: 2},//多层配置//第一层是留给数据下钻点的空白配置//第二层是最靠内测的第一层levels: [{}, {//r0 ,r1 用于定义每一层的大小r0: 0,r: 40,//描述了每个扇形块中，文本标签的样式label: {rotate: 0}}, {r0: 40,r: 105}, {r0: 115,r: 140,//描述旭日图扇形块的样式itemStyle: {shadowBlur: 2,shadowColor: colors[2],color: 'transparent'},label: {rotate: 'tangential',fontSize: 10,color: colors[0]}}, {r0: 140,r: 145,itemStyle: {shadowBlur: 80,shadowColor: colors[0]},label: {position: 'outside',textShadowBlur: 5,textShadowColor: '#333',},//鼠标悬停后不相关扇形块的配置项downplay: {label: {opacity: 0.5}}}]}]};myChart.setOption(option);

上述旭日图中，我们使用到了series组件，我们具体讲解一下series组件中关于旭日图的配置项：

type：当type的值为sunburst表示当前图表为旭日图
center：用于定位旭日图的圆心
sort：扇形块根据数据 value 的排序方式，可以是desc（降序）、asc（升序）、null和回调函数
label：描述了每个扇形块中，文本标签的样式。在data.label属性和levels.label属性中都可以对文本标签的样式进行修改，但是它们的优先级的是：data.label>levels.label>label
itemStyle：旭日图扇形块的样式。其他同上
levels：对旭日图的每一层进行配置。它是一个数组，其中的第 0 项表示数据下钻后返回上级的图形，其后的每一项分别表示从圆心向外层的层级。
- r0，r1：用于设置旭日图每一层的半径
- label：描述了每个扇形块中，文本标签的样式
- itemStyle：描述旭日图扇形块的样式
- downplay：鼠标悬停后不相关扇形块的配置项

关于echarts就到此为止，echarts的内容不止这一点，我只讲述了很少一部分我认为比较实用和常用的图表系列，大家有兴趣可以去官网自行学习。

7天带你搞定一个图表框架echarts（七）相关推荐

7天带你搞定一个图表框架echarts（六）
K线图的基础用法因为K线图所用数据比较多,所以所用数据比较多,我将数据从json文件中提取出来赋值给一个变量,然后再对变量进行处理 var json = [["2004-01-02&quo ...
7天带你搞定一个图表框架echarts（二）
饼图的基础用法第一步是要引用Echarts,第二部是在html中创建一个的容器,具体见上篇文章. var myChart = echarts.init(document.getElementById ...
7天带你搞定一个图表框架echarts（五）
仪表盘图表的基础用法今天整理了echarts中仪表盘,话不多说.还是通过具体案例来讲解一下仪表盘的具体配置项, var myChart = echarts.init(document.getElem ...
一篇文章带你搞定 Java 日志框架 slf4j
文章目录一.门面模式二.为什么要使用 slf4j ? 三.如何使用一.门面模式 slf4j是门面模式的典型应用,因此在讲slf4j前,先简单学习下门面模式, 门面模式,其核心为外部与一个子系统的 ...
清华大学计算机博士，带你搞定大厂面试题
这是我的一个粉丝向我求助的一个大厂面试问题.很多人看到这道题第一个想到的一定是二分法,但其实不一定是往这个方向解题的.还有一部分学过数值计算的同学,能想到用牛顿迭代法,但其实这两个方法都不是最好的解法 ...
java 不重启部署_一篇文章带你搞定SpringBoot不重启项目实现修改静态资源
一.通过配置文件控制静态资源的热部署在配置文件 application.properties 中添加: #表示从这个默认不触发重启的目录中除去static目录 spring.devtools.res ...
linux 测试端口连通性_磨刀不误砍柴工，带你搞定云网络系统性能测试
磨刀不误砍柴工,带你搞定云网络系统性能测试一.前言在部署或管理网络系统时,我们更多的是关心网络的连通性,而对于其整体的性能往往考虑不多,或者即使考虑到性能.异常或稳定性的问题,但却发现没有合适的手 ...
太恐怖了两天搞定一个项目 Java Web MVC 网络商城教程+源代码
两天搞定一个项目 Java Web MVC 网络商城教程+源代码最近自学做了一个网络商城将以下是代码和教程环境搭建–数据库设计–页面设计-后台设计本项目使用的jdk版本是运行项目前需要先配置好 ...
万字长文带你搞定 linux BT 宝塔面板之外网上快速搭建苹果CMS电影网站
文章目录万字长文带你搞定宝塔面板一.本地搭建宝塔面板及安装ecshop 1.1前言 1.2面板特色功能 1.3安装环境说明 1.4安装BT面板 1.5常用管理命令 1.6 BT面板一键安装LAMP ...
举个栗子！Tableau技巧（60）：轻松搞定关系网图表
Tableau 强大的数据分析能力,可以让我们分析一切想要分析的数据,不仅限于数额,还包括关系. 当我们需要理清楚人或物相互之间的关系时,关系网图表是最一目了然的方式. 那么,在 Tableau 中可 ...

7天带你搞定一个图表框架echarts（七）

旭日图的基本用法

7天带你搞定一个图表框架echarts（七）相关推荐

最新文章

热门文章