The problem
I'm creating a tree diagram using Echarts.
I want to change the weight of the line according to the value of data.
Expected image:
Image is for illustration purposes.
It would be helpful if you could give me advice.
The code
This is my Javascript configuration using ECharts editor page :
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
toolbox: {
show: true,
feature: {
dataView: {
show: true,
title: 'Data View',
readOnly: false,
lang: ['Data View', 'Close', 'Update']
},
restore: { show: true, title: 'Update' },
saveAsImage: { show: true, title: 'Save Image as PNG' }
}
},
series: [
{
type: 'tree',
data: [{
"name": "1",
"children": [
{
"name": "2-1",
"children": [
{"name": "Easing", "value": 70},
{"name": "FunctionSequence", "value": 30},
{
"name": "interpolate",
"children": [
{"name": "ArrayInterpolator", "value": 100},
{"name": "ColorInterpolator", "value": 50},
{"name": "DateInterpolator", "value": 40},
{"name": "Interpolator", "value": 20},
{"name": "MatrixInterpolator", "value": 10},
{"name": "NumberInterpolator", "value": 70},
{"name": "ObjectInterpolator", "value": 60},
{"name": "PointInterpolator", "value": 20},
{"name": "RectangleInterpolator", "value": 30}
]
},
{"name": "ISchedulable", "value": 20},
{"name": "Parallel", "value": 50},
{"name": "Pause", "value": 40},
{"name": "Scheduler", "value": 40},
{"name": "Sequence", "value": 55},
{"name": "Transition", "value": 30},
{"name": "Transitioner", "value": 10},
{"name": "TransitionEvent", "value": 20},
{"name": "Tween", "value": 60}
]
},
{
"name": "2-2",
"children": [
{"name": "DirtySprite", "value": 80},
{"name": "LineSprite", "value": 50},
{"name": "RectSprite", "value": 20},
{"name": "TextSprite", "value": 99}
]
},
{
"name": "2-3",
"children": [
{"name": "FlareVis", "value": 30}
]
},
{
"name": "2-4",
"children": [
{"name": "DragForce", "value": 99},
{"name": "GravityForce", "value": 20},
{"name": "IForce", "value": 35},
{"name": "NBodyForce", "value": 20},
{"name": "Particle", "value": 50},
{"name": "Simulation", "value": 80},
{"name": "Spring", "value": 40},
{"name": "SpringForce", "value": 10}
]
}
]
}],
top: '1%',
left: '7%',
bottom: '1%',
right: '20%',
symbolSize: 10,
itemStyle: {
normal: {
lineStyle: {
width: 5
}
}
},
label: {
normal: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 9
}
},
leaves: {
label: {
normal: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
};
However, all the lines become thick as shown below.
Actual image:
