Echarts绘制多层树图

Echarts绘制多层树图，如图所示

步骤如下：
1.将echarts的series中type改成“tree”
2.修改series中symbol

echarts官网有相似例子，移步看树形图
https://echarts.apache.org/examples/zh/index.html?theme=light#chart-type-tree

由于是多个子节点，并且要求全部显示出来，因此需要在series里加上expandAndCollapse属性( fasle:将折叠收起的子树展开，true:将子树折叠收起)

我的data数据：

 var data = {
        "name": "S001",
        "children": [
          {
            "name": "H031",
            "children": [
              {
                "name": "H045 0.0t",
                "value": "1",
              },
              {
                "name": "H045 28.5t",
                "children": [{
                  "name": "H045 28.2t",
                  "children": [{
                    "name": "C101 28.1t",
                    "children": [{
                      "name": "C102 28.0t",
                      "children": [{
                        "name": "C103 28.0t",
                        "children": [{
                          "name": "C104 27.8t",
                          "children": [{
                            "name": "C161 2.5t",
                          },{
                            "name": "C161 12.2t",
                          },{
                            "name": "C161 12.0t",
                          },{
                            "name": "C161 0.6t",
  							//图片也可以放到数据里
  							//"symbol": 'image://https://www.akailibrary.com/wp-content/uploads/2020/05/1589443043-3784896.jpg',
                          }],
                        }],
                      }],
                    }],
                  }],
                }],
              },
            ]
          }    
        ]
      };

option代码

		var option = {
            series: [
                {
                    type: 'tree',			//树形图
                    data: [data],		    //将data数据传入进去
                    label: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right',
                        fontSize: 10
                    },						//文字样式
                    orient: 'vertical',		//图形竖向显示
      				layout:'default',
                    symbol:'image://https://www.akailibrary.com/wp-content/uploads/2020/05/1589443043-3784896.jpg',	//自定义图片
                    symbolSize:  [40, 40],	 //图片大小	
                    roam:false,   			 //鼠标可以缩放，拖拽图形
                    expandAndCollapse: false,//无关的子树折叠收起
                    width: "50%"  			 //组件宽度
                }
            ]
      }

这篇好文章是转载于：学新通技术网