<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;},
}效果图：
