echarts树图

 <div 
    id="brinsonTreeChart" 
    ref="brinsoTreeChartRef" 
    style="width: 100%; height: 250px;">
 </div>

 data () {
   return {
     // treeData: null,
     treeData: {
       "name": "基金收益",
       "returnRate": "58.84",
       "type": "root",
       "children": [
          {
            "name": "基准收益率",
            "returnRate": "20.64",
            "type": "sub",
            "children": []
          },
          {
            "name": "超额收益",
            "returnRate": "38.21",
            "type": "sub",
            "children": [
                {
                    "name": "行业配置",
                    "returnRate": "38.34",
                    "type": "final",
                    "children": []
                },
                {
                    "name": "个股选择",
                    "returnRate": "-21.64",
                    "type": "final",
                    "children": []
                },
                {
                    "name": "交互项",
                    "returnRate": "21.50",
                    "type": "final",
                    "children": []
                }
            ]
          }
        ]
     }
   }
 },
 mounted() {
    this.initTreeChart()
  },

methods: {
initTreeChart () {
      var chartDom = document.getElementById('brinsonTreeChart');
      this.chart = echarts.init(chartDom);
      let option 
      if (!this.treeData) {
        option = {
          title: {
            text: '暂无数据',
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: 14,
              fontWeight: 'normal',
            }
          }
        }
      } else {
        option = {
          tooltip: {
            // show: false,
            trigger: 'item',
            triggerOn: 'mousemove',
            color: '#fff',
            backgroundColor: 'rgba( 0, 0, 0,0.7)',
            borderColor: 'rgba( 0, 0, 0,0.7)',
            formatter: function(params) {
              // console.log(params,'params----------');
              let str = ''
              str = `<span style='color: #fff;'>${params.data.name}:  ${params.data.returnRate}%</span>`
              return str;
            }
          },
          series: [{
            type: 'tree',
            data: this.recursionFun([this.treeData]),
            layout: 'orthogonal', // 正交布局(水平 和 垂直)
            orient: 'TB', // 只有 layout = 'orthogonal' 的时候，该配置项才生效。取值分别为 从左到右('LR') , 从右到左('RL'), 从上到下('TB'), 从下到上('BT')。配置项值 'horizontal' 等同于 'LR'， 'vertical' 等同于 'TB'
            // orient: 'vertical', // 树整体的方向，horizontal 横向；vertical 竖向
            nodePadding: 20, // nodePadding的数组值为[10, 20]，表示第一层节点与第二层节点之间的水平间距为10，垂直间距为 20; 发现不起作用！！！
            layerPadding: 40,  // 发现不起作用！！！
            edgeShape: 'polyline', // 设置连接线曲线还是折线，默认情况下是曲线，curve曲线 polyline直线
            symbol: 'none', // 节点标记形状 roundRect、rect
            // symbolSize: [120, 60], // 设置框的大小
            // symbolSize: 80, // 设置框的大小
            // left: '2%',
            // right: '2%',
            // top: '2%',
            // bottom: '20%',
            initialTreeDepth: 10, // 默认树展开的层数
            // 线条的颜色
            lineStyle: {
              color: '#ccc',
              type: 'solid',
              width: 2,
            },
            label: {
              show: true,
              position: 'inside',
              verticalAlign: 'middle',
              align: 'center',
              // width: 80,
              overflow: 'truncate',
              ellipsis: '...',
              formatter: function(params) {
                // console.log(params,'params----------');
                return `{name|${params.data.name}}` + '\n' + `{returnRate|${params.data.returnRate + '%'}}`
              },
              rich: {
                name: {
                  color: '#fff',
                  fontSize: 13,
                  align: 'center',
                  lineHeight: 35,
                  padding: [0, 3]
                },
                returnRate: {
                  color: '#fff',
                  fontSize: 13,
                  align: 'center',
                  lineHeight: 5,
                },
              },
            },
            expandAndCollapse: true, // 子树折叠和展开的交互，默认打开
            animationDuration: 550, // 初始动画的时长
            animationDurationUpdate: 750, // 数据更新动画的时长
          }],  
        }
      }
      
      this.chart.setOption(option,true);
    },

    // 递归处理树图数据
    recursionFun(data) {
      for (let i = 0; i < data.length; i++) {
          // 根据level标识符判断
          if (data[i].type === 'root') {
            data[i].label = {
              width: 80,
              height: 50,
              backgroundColor: '#5391db',
              borderRadius: 5,
              fontSize: 15,
            }
          } else if (data[i].type === 'sub') {
            data[i].label = {
              width: 80,
              height: 50,
              backgroundColor: '#e2835a',
              borderRadius: 5,
            }
          } else if (data[i].type === 'final') {
            data[i].label = {
              width:80,
              height: 50,
              backgroundColor: '#D9A41F',
              borderRadius: 5,
            }
          } else {
          }
          if (data[i].children && data[i].children.length > 0) {
              this.recursionFun(data[i].children);
          }
      }
      return data;
    },
}

效果图：