关于javascript:echart-tree-实现搜索功能

<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>