data(数据):
data的数据格式是树状的,例如:
[{
name: 'parent1',
value: 10, // 可以不写父元素的 value,则为子元素之和;
// 如果写了,并且大于子元素之和,可以用来表示还有其他子元素未显示
children: [{
value: 5,
name: 'child1',
children: [{
value: 2,
name: 'grandchild1',
itemStyle: {
// 每个数据可以有自己的样式,覆盖 series.itemStyle 和 level.itemStyle
},
label: {
// 标签样式,同上
}
}]
}, {
value: 3,
name: 'child2'
}],
itemStyle: {
// parent1 的图形样式,不会被后代继承
},
label: {
// parent1 的标签样式,不会被后代继承
}
}, {
name: 'parent2',
value: 4
}]
series[i]-sunburst------->data[i]----->value 数字
数据值,如果包含 children,则可以不写 value 值。这时,将使用子元素的 value 之和作为父元素的 value。如果 value 大于子元素之和,可以用来表示还有其他子元素未显示。
series[i]-sunburst.data[i].name 字符串
显示在扇形块中的描述文字。
series[i]-sunburst.data[i].children数组
子节点,递归定义,格式同series-sunburst.data。
配置完成代码js
var myCharts = echarts.init(document.getElementById('sun'));
var option = {
series: {
type: 'sunburst',
center: ['50%', '50%'],
levels: [{}, {}, {}, {}, {
label: {
position: 'outside',
padding: 3,
silent: false
},
itemStyle: {
borderWidth: 3
}
}],
data: [{
name: '辽宁省',
children: [{
name: '沈阳市',
children: [{
name: '沈河区',
children: [{
name: '抽烟人数',
value: 20
},{
name: '不抽烟人数',
value: 40
}]
},
{
name: '大东区',
value: 40
},
{
name: '沈北新区',
value: 40
},
{
name: '铁西区',
children: [{
name: '抽烟人数',
value: 40
},{
name: '不抽烟人数',
value: 20
}]
}
]
},
{
name: '朝阳市',
value: 10
},
{
name: '大连市',
value: 10
},
{
name: '铁岭市',
value: 10
},
{
name: '抚顺市',
value: 10
},
]
}, {
name: '吉林省',
value: 20
}, {
name: '黑龙江省',
value: 20
}, {
name: '河北省',
children: [{
name: '郑州市',
children: [{
name: '1区',
value: 70
},
{
name: '2区',
value: 40
},
{
name: '3区',
value: 40
},
{
name: '4区',
value: 5
}
]
},
{
name: '信阳市',
value: 20
},
{
name: '安阳市',
value: 10
},
{
name: '邯郸市',
value: 30
},
{
name: '承德市',
value: 5
},
]
}]
}
};
myCharts.setOption(option);
搞定收工
优质内容筛选与推荐>>
1、bzoj4033: [HAOI2015]树上染色(树形dp)2、Hibernate使用MyExclipse10自动生成配置文件报错3、PASCAL语言子集的词法、语法分析器之实现4、Spring MVC前台使用html页面作为视图,配置静态资源后Controller控制器不起作用的解决办法5、两个ajax请求都成功之后打印一个字符串的(要求请求均为异步)