option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [{
type: 'tree',
data: [{
"name": "大堂经理",
"children": [{
"name": "张三",
"children": [{
"name": "\u8fdd\u7ea6\u91d1",
"value": 93,
"label": {
"color": "orange"
},
"itemStyle": {
"color": "orange",
"borderColor": "orange"
}
}, {
"name": "李四",
"children": [{
"name": "\u5916\u6446\u4f7f\u7528\u8d39",
"value": 92,
"label": {
"color": "red"
},
"itemStyle": {
"color": "red",
"borderColor": "red"
}
}, {
"name": "\u7279\u5356\u6536\u5165",
"value": 91,
"label": {
"color": "orange"
},
"itemStyle": {
"color": "orange",
"borderColor": "orange"
}
}],
"label": {
"color": "green"
},
"itemStyle": {
"color": "green",
"borderColor": "green"
}
}, {
"name": "\u79df\u91d1\u6536\u5165",
"value": 88,
"label": {
"color": "green"
},
"itemStyle": {
"color": "green",
"borderColor": "green"
}
}, {
"name": "\u8054\u8425\u6536\u5165",
"value": 369,
"label": {
"color": "red"
},
"itemStyle": {
"color": "red",
"borderColor": "red"
}
}]
}, {
"name": "李四",
"children": [{
"name": "\u8425\u8fd0\u5176\u4ed6",
"value": 108,
"label": {
"color": "orange"
},
"itemStyle": {
"color": "orange",
"borderColor": "orange"
}
}, {
"name": "\u5e7f\u544a\u4f4d\u79df\u91d1",
"value": 107,
"label": {
"color": "red"
},
"itemStyle": {
"color": "red",
"borderColor": "red"
}
}, {
"name": "\u7f5a\u6b3e",
"value": 106,
"label": {
"color": "blue"
},
"itemStyle": {
"color": "blue",
"borderColor": "blue"
}
}, {
"name": "\u7edf\u4ed3\u6536\u5165",
"value": 368,
"label": {
"color": "blue"
},
"itemStyle": {
"color": "blue",
"borderColor": "blue"
}
}]
}, {
"name": "王五",
"children": []
}]
}],
triggerEvent: true,
top: '1%',
left: '12%',
bottom: '1%',
right: '35%',
symbolSize: 60, // 圆圈大小
label: {
normal: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 12
},
},
leaves: {
label: {
normal: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}]
}
console.log(myChart)