vue3 echarts树图 点击label打开对话框，点击node收缩

1、定义dom

<div
        ref="treeChart"
        id="treeChart"
        :style="{ width: '100%', height: height+'px',border:'solid 1px #aaa' }"
    ></div>

2、初始化treeChart

const dom = document.getElementById('treeChart');
  treeChart.value = echarts.getInstanceByDom(dom); //有的话就获取已有echarts实例的DOM节点。

  if (treeChart.value == null) { // 如果不存在，就进行初始化。
    treeChart.value = echarts.init(dom); // 初始化echarts实例

3、

treeChart.value.setOption(treeOption, true)

4、根据节点动态更新dom的高度

const eleArr = Array.from(new Set(treeChart.value._chartsViews[0]._data._graphicEls))
      const itemHeight = 90
      const currentHeight = itemHeight * (eleArr.length - 1) || itemHeight
      const newHeight = Math.max(currentHeight, itemHeight)
      // 不允许直接修改height.value，div被改变后chart获取不到原始被初始化的DOM
      // height.value = newHeight
      dom.style.height = newHeight + 'px';
      treeChart.value.resize({
        height: newHeight
      })

5、 mousedown点击事件前，把label的展开和收缩事件去掉

      treeChart.value.on('mousedown', function (e) {
        const name = e.data.name;
        const curNode = treeChart.value._chartsViews[0]._data.tree._nodes.filter(function (item) {
          return item.name === name;
        });
        if (curNode[0].depth) {
          const depth = curNode[0].depth;
          const curIsExpand = curNode[0].isExpand;
          treeChart.value._chartsViews[0]._data.tree._nodes.forEach(function (item) {
            if (e.event.target.culling === true) {
              //点击节点展开下一级，同时收缩同级节点，暂时没有该需求
              if (item.depth === depth && item.name !== name && !curIsExpand) {
                //item.isExpand = false;
              }
            } else if (e.event.target.culling === false) {
              //点击标签阻止默认节点展开或收缩事件
              if (item.depth === depth) {
                if (item.name === name) {
                // 若是展开状态不允许收缩，若是收缩状态不允许展开
                  item.isExpand = !item.isExpand; 
                } else {
                  //item.isExpand = false;
                }
              }
            }
          });
        }
      })

6、click点击后，打开详情对话框

      treeChart.value.on('click', function (params) {
        if (params.event.target.culling === true) { // 点击node
        } else if (params.event.target.culling === false) { // 点击label
        // 此处只能直接调用子组件的方法传值，不支持使用props传值
        // 改变当前vue组件中的某一个值，vue框架会同时更新treeChart.value的值，导致不能再次使用'click'和'mousedown'事件
          detailDialogRef.value.openDialog({...params.data.paramsData})
        }
      });