当前位置: 首页 > article >正文

eachers中的树形图在点击其中某个子节点时关闭其他同级子节点

答案在代码末尾!!!!!

tubiaoinit(params: any) {
    // 手动触发变化检测
    this.changeDetectorRef.detectChanges();
    if (this.myChart !== undefined) {
      this.myChart.dispose();
    }
    this.myChart = echarts.init(this.pieChart?.nativeElement);

    let data: any = {};
    data = params;
    let option = {
      // tooltip: {
      //   trigger: 'item',
      //   triggerOn: 'mousemove'
      // },
      backgroundColor: 'transparent',

      series: [
        {
          roam: true,
          scaleLimit: {
            min: 1
          },
          type: 'tree',
          id: 0,
          name: 'tree1',
          data: [data],
          // 垂直排列
          // orient: 'vertical',
          top: '10%',
          left: '10%',
          bottom: '22%',
          right: '20%',
          symbolSize: 7,
          edgeShape: 'polyline',
          edgeForkPosition: '63%',
          initialTreeDepth: 3,

          lineStyle: {
            width: 2
          },
          label: {
            backgroundColor: '#3084f0',
            rotate: 0,
            position: 'top',
            verticalAlign: 'middle',
            align: 'right',
            fontSize: 16,
            padding: 4,
            color: '#191717',
            borderRadius: [4, 4, 4, 4],
            rich: {
              img1: {
                backgroundColor: {
                  image: 'assets/img/dianbiao2.png'
                },
                height: 27
              }
            },
            formatter: function (param: any) {
              var res = '';
              res += `{img1|}${param.data.name}`;
              return res;
            }
          },

          leaves: {
            label: {
              backgroundColor: '#fff',
              rotate: 0,
              color: '#121010',
              position: 'right',
              verticalAlign: 'middle',
              align: 'left',
              fontSize: 12,
              rich: {
                img1: {
                  backgroundColor: {
                    image: 'none'
                  },
                  height: 20
                }
              },
              formatter: function (param: any) {
                var res = '';
                res += `{img1|}${param.data.name}`;
                return res;
              }
            }
          },

          emphasis: {
            disable: true,
            focus: 'none'
          },

          expandAndCollapse: true,
          animationDuration: 550,
          animationDurationUpdate: 750
        }
      ]
    };
    this.myChart.setOption(option);
    this.myChart.on('click', (param: any) => {
      // console.log(param);
      // if (typeof param.seriesIndex == 'undefined') {
      //   return;
      // }
      if (param.data.deviceId !== undefined && param.data.deviceId !== null && param.data.deviceId !== '') {
        this.isVisible = true;
        // 手动触发变化检测
        this.changeDetectorRef.detectChanges();
        this.showDianBiaoValue({ id: param.data.deviceId, name: param.data.name });
      } else {
  
        if (param.data.deviceId === '') {
          this.message.create('warning', '此设备没有电表信息,还未启动!');
        }
      }
    });
    //下面的代码直接复制使用这里是实现功能的代码
    if (option && typeof option === 'object') {
      this.myChart.setOption(option, true);
      this.myChart.on('mousedown', (e: any) => {
        const name = e.data.name;
        const curNode = this.myChart._chartsViews[0]._data.tree._nodes.find((item: any) => {
          return item.name === name;
        });
        const depth = curNode.depth;
        const curIsExpand = curNode.isExpand;
        this.myChart._chartsViews[0]._data.tree._nodes.forEach((item: any, index: any) => {
          if (item.depth === depth && item.name !== name && !curIsExpand) {
            item.isExpand = false;
          }
        });
      });
    }
  }

http://www.kler.cn/news/364586.html

相关文章:

  • vue导出pdf(页面截图的形式)
  • Windows 使用命令行开启热点(无线网卡连接下)
  • Linux使用Dockerfile部署Tomcat以及jdk
  • 程序人生-2024我的个人总结
  • 项目管理的主要内容包括哪些,项目工具有哪些
  • 【react 和 vue】 ---- 实现组件的递归渲染
  • Mac 下安装FastDFS
  • JVM的内存模型是什么,每个区域的作用是什么,以及面试题(含答案)
  • 在Java中,需要每120分钟刷新一次的`assetoken`,并且你想使用Redis作为缓存来存储和管理这个令牌
  • 微服务-CAP和AKF拆分原则
  • 大语言模型数据类型与环境安装(llama3模型)
  • 【vuejs】富文本框输入的字符串按规则解析填充表单
  • [C++进阶数据结构]红黑树(半成品)
  • oneplus3t-android_framework
  • 中间件-概念
  • 高翔【自动驾驶与机器人中的SLAM技术】学习笔记(十二)拓展图优化库g2o(一)框架
  • 3种方法,教你用Pytest更改自动化测试用例执行顺序
  • 192×144像素是几寸照片?如何手机拍照制作
  • 【python实操】python小程序之参数化以及Assert(断言)
  • General Purpose I/O Ports and Peripheral I/O Lines (Ports)
  • JVM成神之路
  • 测试学习-测试分类
  • Spring Boot框架中小企业设备监控系统开发
  • c++中虚函数表属于类还是属于对象?
  • Ubuntu20.04 更新Nvidia驱动 + 安装CUDA12.1 + cudnn8.9.7
  • 【数据结构与算法】力扣 46. 全排列