echarts树图关系图

 项目场景：

要求实现以上图片展示的样式，用的是echarts

 数据格式：

var data = [{name: "主节点主节点主节点",children: [{name: "分节点分节点分节点分节点1",}, {name: "分节点分节点分节点分节点2",}, {name: "分节点分节点分节点分节点3",}, {name: "分节点分节点分节点分节点4",}]
}];

实现代码

myChart.showLoading();var data = [{name: "主节点主节点主节点",children: [{name: "分节点分节点分节点分节点1",}, {name: "分节点分节点分节点分节点2",}, {name: "分节点分节点分节点分节点3",}, {name: "分节点分节点分节点分节点4",}]
}];myChart.hideLoading();
myChart.setOption(option = {backgroundColor: '#fff',series: [{type: 'tree',// name: '',data: data,itemStyle: {normal: {lineStyle: {color: '#000',width: 1,type: 'solid' // 'curve'|'broken'|'solid'|'dotted'|'dashed'},},},top: '0%',bottom:'10%',right: '50%',left:'0',symbolSize: 1,initialTreeDepth: 2,edgeShape:'curve', //曲线curve和折线polyline两种,emphasis:{disabled:true},label: {normal: {position: 'center',verticalAlign: 'middle',align: 'left',backgroundColor: '#003594',color: '#fff',padding: 3,borderRadius:[8],formatter: ['{box|{b}}'].join('\n'),rich: {box: {height: 28,color: '#fff',padding: [10, 13],align: 'center',fontSize:20,}}}},leaves: {label: {normal: {position: 'center',verticalAlign: 'middle',align: 'left',backgroundColor: '#E5EAF4',borderRadius:[5],formatter: ['{box|{b}}'].join('\n'),rich: {box: {height: 20,color: '#003594',padding: [8, 10],align: 'center',fontSize:16,}}}}},expandAndCollapse: false,animation:false,},]
});

以上。

后续测试问题一：

数据返回的多少 不一致，高度不可固定，不然纵向数据会堆叠在一起。如图：

解决办法：

找到了不设置固定高度，可以动态渲染高度的方法，可以根据返回数据的length，乘上我们单个数据的高度，设置一个基准值，超过基准值就使用长度×单个高速的值作为动态高度；实现代码如下：

 var myChart = echarts.init(document.getElementById(id));let option = {}    //此处为图表配置myChart.setOption(option, true);//基准值为350，也相当于css设置的最小高度;var autoHeight = chart_jsonData[0].children.length * 60 > 350 ?         chart_jsonData[0].children.length * 60 : 350;myChart.getDom().style.height = autoHeight + "px";myChart.getDom().childNodes[0].style.height = autoHeight + "px";myChart.getDom().childNodes[0].childNodes[0].setAttribute("height",autoHeight);myChart.getDom().childNodes[0].childNodes[0].style.height = autoHeight + "px";//图表可以根据宽度变化自适应myChart.resize();window.onresize = myChart.resize;

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！