当ECharts树增加缩放及改变线的颜色、样式、节点的颜色等，记录一下配置项如下：
var data = {
"name": "flare",
"children": [{
"name": "animate",
symbolSize: 16,
label: {
fontSize: 16,
color: "#000" //字体颜色
},
itemStyle: {
color: "#ff0000", //这是节点折叠时候的颜色
borderColor: '#0000ff',
borderWidth: 3,
normal: {
color: "#00ff00"
},
},
lineStyle: {
color: "#888",
width: 4,
type: 'dotted' //'dotted'虚线 'solid'实线
},
"children": [{
"name": "Easing",
"value": 17010
},
{
"name": "FunctionSequence",
"value": 5842
},
{
"name": "interpolate",
"children": [{
"name": "ArrayInterpolator",
"value": 1983
},
{
"name": "ColorInterpolator",
"value": 2047
},
{
"name": "DateInterpolator",
"value": 1375
},
{
"name": "Interpolator",
"value": 8746
},
{
"name": "MatrixInterpolator",
"value": 2202
}
]
},
{
"name": "ISchedulable",
"value": 1041
},
{
"name": "Parallel",
"value": 5176
},
{
"name": "Pause",
"value": 449
}
]
},
{
"name": "data",
"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": "converters",
"children": [{
"name": "Converters",
"value": 721
},
{
"name": "DelimitedTextConverter",
"value": 4294
},
{
"name": "GraphMLConverter",
"value": 9800
},
{
"name": "IDataConverter",
"value": 1314
},
{
"name": "JSONConverter",
"value": 2220
}
]
},
{
"name": "DataField",
"value": 1759
},
{
"name": "DataSchema",
"value": 2165
}
]
}
]
};
myChart.setOption(option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [{
type: 'tree',
initialTreeDepth: -1,
data: [data],
top: '1%',
left: '7%',
bottom: '1%',
right: '20%',
symbolSize: 10,
zoom:1, //当前视角的缩放比例
roam: true, //是否开启平游或缩放
scaleLimit: { //滚轮缩放的极限控制
min: 0.5,
max: 5
},
label: {
normal: {
position: 'left',
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
}
}
},
},
}]
});
可以官网直接运行测试：https://gallery.echartsjs.com/editor.html?c=xyib0o_Lpe