echart自适应tree树图，结构组织图模板

本文主要是介绍echart自适应tree树图，结构组织图模板，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 处理数据(代码中有处理数据逻辑，可忽略，因为后端返回的格式不匹配，需要自己处理)
   [{
   name: ‘test1’,
   children: [{
   name: ‘test2’
   }]
   }]

<template><div class="boxEchart"><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: "100%",heightPro: "100%",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: "体系结构图",data: [],type: "tree",top: "1%",left: "10%",bottom: "1%",right: "10%",symbolSize: 9,label: {position: "left",verticalAlign: "middle",align: "right",fontSize: 11,},leaves: {label: {position: "right",verticalAlign: "middle",align: "left",},},emphasis: {focus: "descendant",},expandAndCollapse: true,animationDuration: 550,animationDurationUpdate: 750,},],},};},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 = 120 * deepNum + "px";this.heightPro = 50 * Math.max(...maxNode) + "px";this.option.series[0].initialTreeDepth = deepNum;this.$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,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,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">
.boxEchart {// border: 1px solid red;width: 100%;height: 100%;overflow: auto;margin: 0;
}
</style>

这篇关于echart自适应tree树图，结构组织图模板的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---