折扇echarts sunburst配置项内容和展示
素是自然色，圆因裁制功。飒如松起籁，飘似鹤翻空。 盛夏不销雪，终年无尽风。引秋生手里，藏月入怀中。 麈尾斑非疋，蒲葵陋不同。何人称相对，清瘦白须翁。
配置项如下
var data = [{
value: 50,
itemStyle: {
color: '#b37119'
},
children: [{
value: 5,
itemStyle: {
color: '#f1c067'
},
children: [{
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
},
children: [{
name: '情',
value: 2.5,
itemStyle: {
borderWidth: 1,
color: '#e5e0dc'
},
children: [{
name: '百',
value: 2.5,
itemStyle: {
borderWidth: 1,
color: '#e5e0dc'
}
}, {
name: '媚',
value: 2.5,
itemStyle: {
borderWidth: 1,
color: '#faf3ed'
}
}]
}, {
name: '之',
value: 2.5,
itemStyle: {
borderWidth: 1,
color: '#faf3ed'
}
}]
}, {
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
}
}, {
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
}
}, {
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
}
}, {
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
}
}]
}, {
value: 5,
itemStyle: {
color: '#f1c067'
},
children: [{
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
},
children: [{
name: '所',
value: 2.5,
itemStyle: {
borderWidth: 1,
color: '#e5e0dc'
},
children: [{
name: '千',
value: 2.5,
itemStyle: {
borderWidth: 1,
color: '#e5e0dc'
}
}, {
name: '红',
value: 2.5,
itemStyle: {
borderWidth: 1,
color: '#faf3ed'
}
}]
}, {
name: '钟',
value: 2.5,
itemStyle: {
borderWidth: 1,
color: '#faf3ed'
}
}]
}, {
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
}
}, {
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
}
}, {
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
}
}, {
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
}
}]
}, {
value: 5,
itemStyle: {
opacity: 0
}
}, {
value: 5,
itemStyle: {
opacity: 0
}
}, {
value: 5,
itemStyle: {
opacity: 0
}
}, {
value: 5,
itemStyle: {
opacity: 0
}
}, {
value: 5,
itemStyle: {
opacity: 0
}
}, {
value: 5,
itemStyle: {
opacity: 0
}
}, {
value: 5,
itemStyle: {
color: '#f1c067'
},
children: [{
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
},
children: [{
name: '唯',
value: 2.5,
itemStyle: {
borderWidth: 1,
color: '#e5e0dc'
},
children: [{
name: '人',
value: 2.5,
itemStyle: {
borderWidth: 1,
color: '#e5e0dc'
}
}, {
name: '世',
value: 2.5,
itemStyle: {
borderWidth: 1,
color: '#faf3ed'
}
}]
}, {
name: '独',
value: 2.5,
itemStyle: {
borderWidth: 1,
color: '#faf3ed'
}
}]
}, {
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
}
}, {
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
}
}, {
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
}
}, {
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
}
}]
}, {
value: 5,
itemStyle: {
color: '#f1c067'
},
children: [{
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
},
children: [{
name: '你',
value: 2.5,
itemStyle: {
borderWidth: 1,
color: '#e5e0dc'
},
children: [{
name: '间',
value: 2.5,
itemStyle: {
borderWidth: 1,
color: '#e5e0dc'
}
}, {
name: '有',
value: 2.5,
itemStyle: {
borderWidth: 1,
color: '#faf3ed'
}
}]
}, {
name: '我',
value: 2.5,
itemStyle: {
borderWidth: 1,
color: '#faf3ed'
}
}]
}, {
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
}
}, {
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
}
}, {
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
}
}, {
value: 1,
itemStyle: {
borderWidth: 3,
color: '#f1c067'
}
}]
}]
}];
option = {
backgroundColor: '#383431',
title: {
show: true,
text: '百媚千红，情之所钟。',
textStyle: {
fontSize:20,
color: '#fff'
},
left: 'center',
top: 20
},
series: {
silent: true,
type: 'sunburst',
data: data,
radius: [0, '10%'],
center: ['50%', '70%'],
sort: null,
emphasis: {
focus: 'ancestor'
},
label: {
rotate: 'tangential',
fontSize: 20,
color: '#000',
fontFamily: 'serif',
fontStyle: 'oblique'
},
levels: [{}, {
r0: 5,
r: '5%'
}, {
r0: '5%',
r: '20%',
}, {
r0: '20%',
r: '40%',
}, {
r0: '40%',
r: '70%'
}, {
r0: '70%',
r: '100%'
}]
}
}
截图如下
