echart tree 实现搜索功能

Posted 2021-09-10 岁月峥嵘走过

<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"));
// 自适应高度
      let temp = this.chart;
      let container = document.getElementById(\'chart\');
      this.chart.on(\'click\',function(params){
        if(params.componentType===\'series\'){
          if(!params.value){
            let elesArr = Array.from(new Set(temp._chartsViews[0]._data._graphicEls));
            var height = 300;
            var currentHeight = 35 *(elesArr.length -1)|| 30;
            var newHeight = Math.max(currentHeight,height);
            console.log(newHeight);
            container.style.height = newHeight + \'px\';
            temp.resize();
          }
        }
      })
      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);
              //  控制节点的展开收起  
      this.chart.setOption(initOption);
      let myChart = this.chart;
      this.chart.on("mousedown", (e) => {
        const name = e.data.name;
        const curNode = myChart._chartsViews[0]._data.tree._nodes.find(
          (item) => {
            return item.name === name;
          }
        );
        const depth = curNode.depth;
        const curIsExpand = curNode.isExpand;
        myChart._chartsViews[0]._data.tree._nodes.forEach((item) => {
          if (item.depth === depth && item.name !== name && !curIsExpand) {
            item.isExpand = false;
          }
        });
      });
    },
  },
};
</script>

<style scoped>
#input {
  width: 300px;
  height: 44px;
  /* border: solid;
  background-color: lawngreen;
  border-color: red; */
}

#chart {
  width: 100%;
  height: 800px;
}
</style>