树trees
数据实例：
data: [{
name: ‘test1’,
children: []
}]
- 获取深度
let deepNum = this.getDepth(this.option.series[0].data);console.log("深度");console.log(deepNum);getDepth(arr) {var depth = 0;while (arr.length > 0) {var temp = [];for (var i = 0; i < arr.length; i++) {temp.push(arr[i]);}arr = [];for (var i = 0; i < temp.length; i++) {for (var j = 0; j < temp[i].children.length; j++) {arr.push(temp[i].children[j]);}}if (arr.length >= 0) {depth++;}}return depth;},- 获取广度
const maxNode = []
this.countChildren(this.option.series[0].data, 0, maxNode)
console.log("广度");
console.log(maxNode);// 获取其中最大的层数
// this.heightPro = 120 * Math.max(...maxNode) + 'px'// 返回每层的节点个数（数组形式）
countChildren(tree, level, result) {if (!result[level]) {result[level] = 0;}result[level] += tree.length;for (let i = 0; i < tree.length; i++) {if (tree[i].children && tree[i].children.length > 0) {this.countChildren(tree[i].children, level + 1, result);}}
}- 全部代码
<template><div style="width: 100%; height: 100%; overflow: auto;"><div ref="echart" :style="{ width: width, height: height }"></div></div>
</template><script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts themeexport default {props: {chartData: {type: Object,required: true,},},data() {return {id: "chart",myChart: null,widthPro: "1200px",heightPro: "600px",option: {toolbox: {left: 10,show: true,iconStyle: {// color: '#1890ff',},feature: {dataZoom: {show: false,},dataView: { show: false },magicType: { show: false },restore: {show: false,},saveAsImage: {name: "体系结构图",},},},tooltip: {trigger: "item",triggerOn: "mousemove",formatter: function (params, ticket, callback) {return params.name;},},series: [{name: "体系结构图",type: "tree",orient: "horizontal", // vertical horizontal// rootLocation: { x: "0%", y: "0%" }, // 根节点位置 {x: 'center',y: 10}nodePadding: 20,initialTreeDepth: 10,// symbolSize: [220, 30], //设置框的大小layerPadding: 40,edgeShape: "polyline", //设置连接线曲线还是折线，默认情况下是曲线，curve曲线 polyline直线symbol: "rect",borderColor: "black",itemStyle: {color: "#fff",borderColor: "#333",borderWidth: 1,overflow: "truncate",},label: {show: true,position: "inside",textStyle: {fontSize: 15,color: "#333",},ellipsis: '...',// overflow: 'breakAll',// formatter: function (params, ticket, callback) {// if(params.data.level > 2) {// if(params.name.length > 10) {// return params.name.substring(0, 10).split("").join("\n")+ '\n...';// } else {// return params.name.split("").join("\n")// }// }// }},lineStyle: {color: "#7b7b7b", //连接线的颜色width: 1,},// zoom: 0.5, //当前视角的缩放比例roam: true, //是否开启平游或缩放 // 是否开启鼠标缩放或平移，默认falsescaleLimit: {//滚轮缩放的极限控制min: 0.2,max: 1,},data: []}],},};},watch: {chartData: {deep: true,handler(val) {this.treeData = this.initData();console.log("数据处理结果---");console.log(this.treeData);this.option.series[0].data[0] = this.treeData;if (this.myChart) {console.log("-----重新渲染");// this.widthPro = "1200px";// this.heightPro = "900px";// 计算树的深度，来动态改变图形高度let deepNum = this.getDepth(this.option.series[0].data);const maxNode = []this.countChildren(this.option.series[0].data, 0, maxNode)console.log("广度");console.log(maxNode);console.log("深度");console.log(deepNum);this.widthPro = 350 * deepNum + "px";this.heightPro = 120 * Math.max(...maxNode) + 'px'this.option.series[0].initialTreeDepth = deepNumthis.$nextTick(() => this.resize());this.myChart.setOption(this.option, true);}},},},computed: {width() {return this.widthPro ? this.widthPro : "100%";},height() {return this.heightPro ? this.heightPro : "100%";},},mounted() {this.$nextTick(() => {this.myChart = echarts.init(this.$refs.echart, "shine");this.myChart.setOption(this.option);this.myChart.on("click", (params) => {this.$emit("click", params);});});window.addEventListener("resize", () => {this.resize();});},beforeDestroy() {console.log("销毁-----");if (!this.myChart) {return;}this.myChart.dispose();this.myChart = null;},methods: {resize() {this.myChart.resize();},initData() {let chatDataObj = {name: this.chartData.systemName,level: 1,symbolSize: [this.chartData.systemName.length * 25, 30],children: [],};if (this.chartData.chidrenVoList) {// 处理数据let childrenDef = this.chartData.chidrenVoList.map((org) =>this.mapTree({level: 2,...org,}));chatDataObj.children = childrenDef;}return chatDataObj;},mapTree(org) {const haveChildren =Array.isArray(org.childrenList) && org.childrenList.length > 0;return {name: org.systemName,level: org.level,symbolSize: [org.systemName.length * 23, 30],data: { ...org },//判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作children: haveChildren? org.childrenList.map((i) =>this.mapTree({level: org.level + 1,...i,})): [],};},getDepth(arr) {var depth = 0;while (arr.length > 0) {var temp = [];for (var i = 0; i < arr.length; i++) {temp.push(arr[i]);}arr = [];for (var i = 0; i < temp.length; i++) {for (var j = 0; j < temp[i].children.length; j++) {arr.push(temp[i].children[j]);}}if (arr.length >= 0) {depth++;}}return depth;},countChildren(tree, level, result) {if (!result[level]) {result[level] = 0;}result[level] += tree.length;for (let i = 0; i < tree.length; i++) {if (tree[i].children && tree[i].children.length > 0) {this.countChildren(tree[i].children, level + 1, result);}}
}},
};
</script>
<style scoped lang="scss"></style>
)