旭日图的基本用法
旭日图(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的内容不止这一点,我只讲述了很少一部分我认为比较实用和常用的图表系列,大家有兴趣可以去官网自行学习。