currently only implements the following:
var data = {
"name": "",
"children": [
{
"name": "1",
"children": [
{"name": "1-1", "value": 4116}
]
},
{
"name": "2",
"children": [
{"name": "2-1", "value": 2105},
{"name": "2-2", "value": 1316},
{"name": "2-3", "value": 3151},
{"name": "2-4", "value": 3770},
{"name": "2-5", "value": 2435},
{"name": "2-6", "value": 4839},
{"name": "2-7", "value": 2105},
{"name": "2-8", "value": 1316},
{"name": "2-9", "value": 3151},
{"name": "2-10", "value": 3770},
{"name": "2-11", "value": 2105},
{"name": "2-12", "value": 1316},
{"name": "2-13", "value": 3151},
{"name": "2-14", "value": 3770},
{"name": "2-15", "value": 2435},
{"name": "2-16", "value": 4839}
]
},
{
"name": "2-3",
"children": [
{"name": "3-1", "value": 8833}
]
}
]
};
myChart.setOption(option = {
tooltip: {
trigger: "item",
triggerOn: "mousemove"
},
series: [
{
type: "tree",
data: [data],
top: "18%",
bottom: "14%",
layout: "radial",
symbol: "circle",
symbolSize: 20,
initialTreeDepth: 2,
animationDurationUpdate: 750,
itemStyle:{
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: "-sharp108ee9" // 0%
}, {
offset: 1, color: "-sharp62b7f4" // 100%
}],
globalCoord: false // false
},
borderWidth:0
},
lineStyle:{
color: "-sharpff6600"
}
}
]
});
the effect is as follows:
: