
let option = {
series : [
{
top: "0%",
left: "5%",
bottom: "0%",
right: "10%",
name:'树图',
type:'tree',
expandAndCollapse: false,//不缩放
rootLocation: {x: 'center',y: 'center'},
nodePadding: 50,
initialTreeDepth: 10,
symbol: 'rect',
itemStyle: {
normal: {
color:'#23366E',
borderWidth:0,
lineStyle: {
color: '#1E2F62',
curveness: 0.7,
width: 1,
type: 'solid'
}
},
},
label:{ //内容位置等属性
normal: {
verticalAlign: 'middle',
align: 'center',
fontSize: 12,
color:'white'
},
},
//鼠标移上去样式
emphasis: {
label: {
show: true,
color:'red',
},
},
data: [
{
name: '霸\n气\n侧\n漏\n的\n树\n形\n图',
value: 10,
symbolSize: [60, 500],
label:{
fontSize: 20,
},
initialTreeDepth: 4,
// 二级
children: [
{
name: '社会经济1',
value: 4,
symbolSize: [280, 40],
label:{
fontSize: 18,
},
children: [
{name: '人口聚集度11', value: 4, symbolSize: [250, 30],
label:{
fontSize: 16,
},
children: [
{name: '人口密度111',value: 4,symbolSize: [150, 20]},
{name: '人口流动强度112',value: 4,symbolSize: [150, 20]}
]
},
{name: '经济发展水12',value: 4,symbolSize: [250, 30],
label:{
fontSize: 16,
},
children:[
{name: '人口密度121',value: 4,symbolSize: [150, 20]},
{name: '人口流动强度122',value: 4,symbolSize: [150, 20]}
]
},
{name: '交通优势度13',value: 4,symbolSize: [250, 30],
label:{
fontSize: 16,
},
children:[
{name: '人口密度131',value: 4,symbolSize: [150, 20]},
{name: '人口流动强度132',value: 4,symbolSize: [150, 20]}
]
}
]
},
{
name: '资源承载力2',
value: 4,
symbolSize: [280, 50],
label:{
fontSize: 16,
},
children: [
{name: '交通优势度21',value: 4,symbolSize: [250, 30],
label:{
fontSize: 16,
},
children:[
{name: '人口密度211',value: 4,symbolSize: [150, 20]},
{name: '人口流动强度212',value: 4,symbolSize: [150, 20]}
]
},
{name: '交通优势度22',value: 4,symbolSize: [250, 30],
label:{
fontSize: 16,
},
children:[
{name: '人口密度221',value: 4,symbolSize: [150, 20]},
{name: '人口流动强度223',value: 4,symbolSize: [150, 20]}
]
}
]
},
{
name: '环境破3',
value: 4,
symbolSize: [280, 50],
label:{
fontSize: 16,
},
children: [
{name: '交通优势度31',value: 4,symbolSize: [250, 30],
label:{
fontSize: 16,
},
children:[
{name: '人口密度311',value: 4,symbolSize: [150, 20]},
{name: '人口流动强度322',value: 4,symbolSize: [150, 20]}
]
},
{name: '交通优势度32',value: 4,symbolSize: [250, 30],
label:{
fontSize: 16,
},
children:[
{name: '人口密度PD321',value: 4,symbolSize: [150, 20]},
{name: '人口流动强度322',value: 4,symbolSize: [150, 20]}
]
}
]
}
]
}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
网友评论