<template> <div> <div id="input"> <el-input placeholder="请输出内容" v-model="input" clearable @clear="_fetchTree()" > <el-button slot="append" icon="el-icon-search" @click="searchTree()" ></el-button> </el-input> </div> <div id="chart"></div> </div></template><script>//import echarts from "echarts";import { debounce } from "@/utils";import { fetchTreeById } from "network/chart";export default { data() { return { input: "", chart: null, }; }, created() { // this._fetchTree(); console.log("fetch Tree"); this._fetchTree(); }, mounted() { this.initChart(); this.__resizeHandler = debounce(() => { if (this.chart) { this.chart.resize(); } }, 100); window.addEventListener("resize", this.__resizeHandler); }, beforeDestroy() { if (!this.chart) { return; } window.removeEventListener("resize", this.__resizeHandler); this.chart.dispose(); this.chart = null; }, methods: { _fetchTree() { fetchTreeById().then((res) => { this.data = res; this.chart.setOption({ series: [ { data: [res], }, ], }); }); }, searchTree() { console.log(this.input); this.getListByFuzzy(this.data, this.input); this.chart.setOption({ series: [ { data: [this.data], }, ], }); }, // dws_mod_sale_branch_1 // dwm_mod_loan_base_success_check //https://blog.csdn.net/WZY_snail/article/details/107343887 //https://blog.csdn.net/lpsqd2018/article/details/105074927 // collapsed = true 就是敞开节点，等于false就是关上节点 // https://segmentfault.com/a/1190000023265582 getListByFuzzy(nodes) { nodes.children.forEach((item) => { if (item.children && item.children.length) { this.getListByFuzzy(item); item.children = item.children.filter((item) => { if ( item.name.indexOf(this.input) != -1 || item.collapsed === false ) { return item; } }); item.children.length && (item.collapsed = false); } }); }, initChart() { this.chart = echarts.init(document.getElementById("chart")); const initOption = { tooltip: { trigger: "item", triggerOn: "mousemove", formatter: function(param) { return ( "工作名称 : " + param.name + " </br> " + "父节点名称 :" + param.data.pName ); }, }, series: [ { type: "tree", initialTreeDepth: 5, nodePadding: 8, layerPadding: 200, top: "1%", left: "7%", bottom: "1%", right: "20%", symbolSize: 10, zoom: 1, //以后视角的缩放比例 roam: true, //是否开启平游或缩放 scaleLimit: { //滚轮缩放的极限管制 min: 0.5, max: 5, }, label: { normal: { verticalAlign: "middle", align: "right", color: "black", fontSize: 16, position: "right", rotate: 20, }, }, leaves: { label: { normal: { verticalAlign: "middle", align: "left", color: "black", fontSize: 16, position: "left", rotate: 0, offset: [20, 0], }, }, }, lineStyle: { color: { type: "linear", //linear 线性突变 radial 径向突变 colorStops: [ { offset: 0, color: "yellow", // 0% 处的色彩 }, { offset: 1, color: "red", // 100% 处的色彩 }, ], global: false, }, width: 4, type: "solid", //'dotted'虚线 'solid'实线 }, }, ], }; this.chart.setOption(initOption); }, },};</script><style scoped>#input { width: 300px; height: 44px; /* border: solid; background-color: lawngreen; border-color: red; */}#chart { width: 100%; height: 800px;}</style>