title: Echarts : How to set different weight of line according to the data?
body: <h1>The problem</h1>
  
  <p>I'm creating a tree diagram using Echarts.</p>
  
  <p>I want to change the weight of the line according to the value of data.</p>
  
  <p>Expected image:</p>
  
  <p><img src="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/595f8d65174c691e03321aec4e69c640.png" alt="expected image"></p>
  
  <p>Image is for illustration purposes. </p>
  
  <p>It would be helpful if you could give me advice.</p>
  
  <h1>The code</h1>
  
  <p>This is my Javascript configuration using <a href="https://gallery.echartsjs.com/editor.html" rel="nofollow noreferrer">ECharts editor page</a> :</p>
  
  <pre><code>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
              }
          ]
      };
  </code></pre>
  
  <p>However, all the lines become thick as shown below.</p>
  
  <p>Actual image:
  <img src="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/581be11c576785e8a0f5b5bed006f8cb.png" alt="Actual image"></p>