旭日图echarts sunburst配置项内容和展示
配置项如下
//该作品展示了梁启超推荐的国学入门读物，书单详细内容，见作者博客，
//里面还有一些其他可视化图表，欢迎留言评论. just 引一下流量，见笑了.
// 个人博客站点： http://bya.cool 或 http://baiyongan.github.io
var data = [
{
name: '6',//责任体系
itemStyle: {
color: '#B7428C'
},
label: {
fontSize: 20,
fontWeight: 'bold'
},
children: [{
name: '1',
itemStyle: {
color: '#B72E6D'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '责任人',
value: 1,
itemStyle: {
color: '#B72E6D'
}
}]
}, {
name: '1',
itemStyle: {
color: '#B72E6D'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '管理人',
value: 1,
itemStyle: {
color: '#B72E6D'
}
}]
}, {
name: '1',
itemStyle: {
color: '#B72E6D'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '职责',
value: 1,
itemStyle: {
color: '#B72E6D'
}
}]
}, {
name: '1',
itemStyle: {
color: '#B72E6D'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '消防制度',
value: 1,
itemStyle: {
color: '#B72E6D'
}
}]
}, {
name: '1',
itemStyle: {
color: '#B72E6D'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '安全例会',
value: 1,
itemStyle: {
color: '#B72E6D'
}
}]
}, {
name: '1',
itemStyle: {
color: '#B72E6D'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '年度计划',
value: 1,
itemStyle: {
color: '#B72E6D'
}
}]
}]
},
{
name: '5',
itemStyle: {
color: '#B7D26F'
},
label: {
fontSize: 20,
fontWeight: 'bold'
},
children: [{
name: '1',
itemStyle: {
color: '#B7BE50'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '整体预案',
value: 1,
itemStyle: {
color: '#B7BE50'
}
}]
},{
name: '1',
itemStyle: {
color: '#B7BE50'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '分预案',
value: 1,
itemStyle: {
color: '#B7BE50'
}
}]
},{
name: '1',
itemStyle: {
color: '#B7BE50'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '子预案',
value: 1,
itemStyle: {
color: '#B7BE50'
}
}]
},{
name: '1',
itemStyle: {
color: '#B7BE50'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '商户预案',
value: 1,
itemStyle: {
color: '#B7BE50'
}
}]
},{
name: '1',
itemStyle: {
color: '#B7BE50'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '演练记录',
value: 1,
itemStyle: {
color: '#B7BE50'
}
}]
}]
},
{
name: '2',
itemStyle: {
color: '#065CC2'
},
label: {
fontSize: 20,
fontWeight: 'bold'
},
children: [{
name: '1',
itemStyle: {
color: '#0748A4'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '租户名单',
value: 1,
itemStyle: {
color: '#0748A4'
}
}]
},{
name: '1',
itemStyle: {
color: '#0748A4'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '租户制度',
value: 1,
itemStyle: {
color: '#0748A4'
}
}]
}]
},
{
name: '4',
itemStyle: {
color: '#31D6F0'
},
label: {
fontSize: 20,
fontWeight: 'bold'
},
children: [{
name: '1',
itemStyle: {
color: '#31C3D2'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '资料审查',
value: 1,
itemStyle: {
color: '#31C3D2'
}
}]
},{
name: '1',
itemStyle: {
color: '#31C3D2'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '图纸审查',
value: 1,
itemStyle: {
color: '#31C3D2'
}
}]
},{
name: '1',
itemStyle: {
color: '#31C3D2'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '材料进场',
value: 1,
itemStyle: {
color: '#31C3D2'
}
}]
},{
name: '1',
itemStyle: {
color: '#31C3D2'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '验收',
value: 1,
itemStyle: {
color: '#31C3D2'
}
}]
}]
},
{
name: '2',
itemStyle: {
color: '#B4885B'
},
label: {
fontSize: 20,
fontWeight: 'bold'
},
children: [{
name: '1',
itemStyle: {
color: '#B5743D'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '动火审批',
value: 1,
itemStyle: {
color: '#B5743D'
}
}]
},{
name: '1',
itemStyle: {
color: '#B5743D'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '用电审批',
value: 1,
itemStyle: {
color: '#B5743D'
}
}]
}]
},
{
name: '2',
itemStyle: {
color: '#6129DF'
},
label: {
fontSize: 20,
fontWeight: 'bold'
},
children: [{
name: '1',
itemStyle: {
color: '#6116C1'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '日常培训',
value: 1,
itemStyle: {
color: '#6116C1'
}
}]
},
{
name: '1',
itemStyle: {
color: '#6116C1'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '入职培训',
value: 1,
itemStyle: {
color: '#6116C1'
}
}]
}]
},
{
name: '4',
itemStyle: {
color: '#04CDAC'
},
label: {
fontSize: 20,
fontWeight: 'bold'
},
children: [{
name: '1',
itemStyle: {
color: '#04B98E'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '工作计划',
value: 1,
itemStyle: {
color: '#04B98E'
}
}]
},{
name: '1',
itemStyle: {
color: '#04B98E'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '训练记录',
value: 1,
itemStyle: {
color: '#04B98E'
}
}]
},{
name: '1',
itemStyle: {
color: '#04B98E'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '工作记录',
value: 1,
itemStyle: {
color: '#04B98E'
}
}]
},{
name: '1',
itemStyle: {
color: '#04B98E'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '设施器材',
value: 1,
itemStyle: {
color: '#04B98E'
}
}]
}]
},
{
name: '4',
itemStyle: {
color: '#B29F45'
},
label: {
fontSize: 20,
fontWeight: 'bold'
},
children: [{
name: '1',
itemStyle: {
color: '#B38A27'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '维保计划',
value: 1,
itemStyle: {
color: '#B38A27'
}
}]
},{
name: '1',
itemStyle: {
color: '#B38A27'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '维保记录',
value: 1,
itemStyle: {
color: '#B38A27'
}
}]
},{
name: '1',
itemStyle: {
color: '#B38A27'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '维保单位',
value: 1,
itemStyle: {
color: '#B38A27'
}
}]
},{
name: '1',
itemStyle: {
color: '#B38A27'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '维保合同',
value: 1,
itemStyle: {
color: '#B38A27'
}
}]
}]
},
{
name: '2',
itemStyle: {
color: '#A425CC'
},
label: {
fontSize: 20,
fontWeight: 'bold'
},
children: [{
name: '1',
itemStyle: {
color: '#A511AE'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '奖励',
value: 1,
itemStyle: {
color: '#A511AE'
}
}]
},{
name: '1',
itemStyle: {
color: '#A511AE'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '惩罚',
value: 1,
itemStyle: {
color: '#A511AE'
}
}]
}]
},
{
name: '1',
itemStyle: {
color: '#0C76CC'
},
label: {
fontSize: 20,
fontWeight: 'bold'
},
children: [{
name: '1',
itemStyle: {
color: '#0C76CC'
},
label: {
fontSize: 14,
fontWeight: 'bold'
},
children: [{
name: '行业监管',
value: 1,
itemStyle: {
color: '#0C76CC'
}
}]
}]
}
];
option = {
backgroundColor: '#2E2733',
title: [{
text: '"人"的安全',
x: 'center',
top: '50%',
textStyle: {
color: '#ffffff',
fontSize: 16,
fontWeight: '100',
}
}, {
text: '162',
x: 'center',
top: '47%',
textStyle: {
fontSize: '20',
color: '#ffffff',
fontFamily: 'Lato',
foontWeight: '600',
},
}],
series: {
type: 'sunburst',
highlightPolicy: 'ancestor',
nodeClick: 'none',
data: data,
radius: [ 0, '90%'],
sort: null,
levels: [{}, {
r0: '15%',
r: '30%',
itemStyle: {
borderWidth: 3,
},
label: {
rotate: 'tangential'
}
}, {
r0: '33%',
r: '50%',
label: {
align: 'right',
}
}, {
r0: '53%',
r: '55%',
label: {
position: 'outside',
padding: 3,
silent: false
},
itemStyle: {
borderWidth: 3
}
}]
}
};
截图如下
