Echarts：如何根据数据设置不同的线宽？

Question

问题

我正在使用 Echarts 创建树状图。

我想根据数据的值改变线的权重

预期图像：

图片仅供参考。

如果你能给我建议会很有帮助

代码

这是我使用 ECharts 编辑器页面的 Javascript 配置 :

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
            }
        ]
    };

然而，所有的线条都变粗了，如下图所示。

实物图：

Answer 1

通过将lineStyle添加到数据项查看完整代码

data: [ ...
  { name: 'Tween', value: 60, lineStyle: { color: 'red', width: 15 } }
]