配置项如下
var data = {
"name": "辽宁省",
"children": [{
"name": "大连市",
"category": "tree2",
label: {
normal: {
show: true
}
},
itemStyle: {
normal: {
show: false,
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: 'green' // 0% 处的颜色
}, {
offset: 1,
color: 'white' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
borderColor: 'blue',
borderWidth: 2,
shadowColor: 'rgba(0, 0, 0, 1)',
shadowBlur: 10
},
emphasis: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: 'green' // 0% 处的颜色
}, {
offset: 1,
color: 'white' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
"children": [{
"name": "甘井子区",
"children": [{
"name": "生态科技创新城",
"value": 4294
},
{
"name": "大连甘井子工业园区",
"value": 9800
},
{
"name": "大连普利文化产业基地",
"value": 1314
},
{
"name": "大连湾临海装备制造集散区",
"value": 2220
}
]
},
{
"name": "沙河口区",
"children": [{
"name": "软件园",
"value": 4294
}, {
"name": "星海湾商业区",
"value": 5960
}],
},
{
"name": "中山区",
"value": 2165
}, {
"name": "旅顺口区",
"value": 2165
}, {
"name": "西岗区",
"value": 2165
}, {
"name": "金州",
"value": 2165
}
]
},
{
"name": "沈阳市",
"category": "tree1",
label: {
normal: {
show: true
}
},
itemStyle: {
normal: {
show: false,
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: 'green' // 0% 处的颜色
}, {
offset: 1,
color: 'white' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
borderColor: 'blue',
borderWidth: 2,
shadowColor: 'rgba(0, 0, 0, 1)',
shadowBlur: 10
},
emphasis: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: 'green' // 0% 处的颜色
}, {
offset: 1,
color: 'white' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
},
{
"name": "营口",
"category": "tree1",
label: {
normal: {
show: true
}
},
itemStyle: {
normal: {
show: false,
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: 'green' // 0% 处的颜色
}, {
offset: 1,
color: 'white' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
borderColor: 'blue',
borderWidth: 2,
shadowColor: 'rgba(0, 0, 0, 1)',
shadowBlur: 10
},
emphasis: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: 'green' // 0% 处的颜色
}, {
offset: 1,
color: 'white' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
},
{
"name": "葫芦岛",
"category": "tree1",
label: {
normal: {
show: true
}
},
itemStyle: {
normal: {
show: false,
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: 'green' // 0% 处的颜色
}, {
offset: 1,
color: 'white' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
borderColor: 'blue',
borderWidth: 2,
shadowColor: 'rgba(0, 0, 0, 1)',
shadowBlur: 10
},
emphasis: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: 'green' // 0% 处的颜色
}, {
offset: 1,
color: 'white' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
},
{
"name": "铁岭",
"category": "tree1",
label: {
normal: {
show: true
}
},
itemStyle: {
normal: {
show: false,
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: 'green' // 0% 处的颜色
}, {
offset: 1,
color: 'white' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
borderColor: 'blue',
borderWidth: 2,
shadowColor: 'rgba(0, 0, 0, 1)',
shadowBlur: 10
},
emphasis: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: 'green' // 0% 处的颜色
}, {
offset: 1,
color: 'white' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
},
]
};
myChart.setOption(option = {
title: {
text: "辽宁省",
subtext:'虚拟数据'},
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [{
type: 'tree',
initialTreeDepth: -1,
data: [data],
top: '1%',
left: '7%',
bottom: '1%',
right: '20%',
symbolSize: 10,
label: {
normal: {
position: 'top',
verticalAlign: 'middle',
align: 'right',
color: 'black'
}
},
leaves: {
label: {
normal: {
position: 'right',
verticalAlign: 'middle',
align: 'left',
}
},
itemStyle: {
normal: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: 'red' // 0% 处的颜色
}, {
offset: 1,
color: 'blue' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
},
}]
});