web组织架构实现

其他方法更好方法，还待研究，希望各位可以共享，或者有更好的echarts树图的新需求，欢迎留言

使用echarts中的树图进行实现需求

https://echarts.apache.org/zh/option.html#series-tree.leaves.labelhttps://echarts.apache.org/zh/option.html#series-tree.leaves.label1.实现组织架构的生成

2.自定义提示框

   在data中自定义提示框，书写html标签等，也可以直接在echarts中的option中书写函数

    知识点：照片的显示，需要照片路径前后加空格

//修改鼠标悬停显示的内容 
formatter:   function(params){
            //  console.log(this.perImgUrl,'this.perImgUrl');
            // 基本路径console.log(this.$axios.defaults.baseURL,'this.$axios.defaults.baseURL')
        var imgeUrl=perImgUrl+params.data.avatar;
        return (
              //  console.log(imgeUrl,'imgsimgsimgs'),
       '<img style="width:100%;height:120px;padding:5px" src="'+imgeUrl+'"/>'
               + "<br>" +
       '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">性别：' +
          (params.data.sex==null ? '数据暂未录入' : params.data.sex==1 ? '男' : '女') +
        "</span>" +
        "<br>" +
        '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">级别：' +params.data.roleName +
        "</span>" +
         "<br>" +
        '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">手机号：' +params.data.phone +
        "</span>" +
        "<br>" +
        '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">所属地区：' + params.data.departName +
        "</span>" +
        "<br>"
       );
   } 

3.同节点层只能展开一个下节点，下节的其他节点自动关闭

在option外面进行写入,默认进来只显示二级

  if (option && typeof option === "object") {
        myChart.setOption(option, true);
        myChart.on('mousedown', (e) => {
           var container = document.getElementById('main');
          const name = e.data.name;
          const curNode = myChart._chartsViews[0]._data.tree._nodes.find(item => {
            return item.name === name;
          });
          console.log(curNode,'curNodecurNodecurNode');
          const depth = curNode.depth;
          const curIsExpand = curNode.isExpand;
          myChart._chartsViews[0]._data.tree._nodes.forEach((item, index) => {
            if (item.depth === depth && item.name !== name && !curIsExpand) {
              item.isExpand = false;
            } 
          });
        }) 
    }

4.树图高度动态变化（还待研究）

完整代码

  getOption() {
      var myChart = echarts.init(this.$refs.lineChart);
      console.log(this.perImgUrl,'父级传过来的ueridthis.$axios.defaults.baseURL'); 
      var perImgUrl=this.perImgUrl
      // console.log(this.namedata,"图表里的数据")
      var option = {
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
          backgroundColor: "#1e1e1e",
          enterable: true, //鼠标是否可进入提示框浮层中
          formatter:   function(params){
            //  console.log(this.perImgUrl,'this.perImgUrl');
            // console.log(this.$axios.defaults.baseURL,'this.$axios.defaults.baseURL')
             var imgeUrl=perImgUrl+params.data.avatar;
             return (
              //  console.log(imgeUrl,'imgsimgsimgs'),
               '<img style="width:100%;height:120px;padding:5px" src="'+imgeUrl+'"/>'
               + "<br>" +
               '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">性别：' +
               (params.data.sex==null ? '数据暂未录入' : params.data.sex==1 ? '男' : '女') +
               "</span>" +
               "<br>" +
               '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">级别：' +
               params.data.roleName +
               "</span>" +
               "<br>" +
               '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">手机号：' +
               params.data.phone +
               "</span>" +
               "<br>" +
               '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">所属地区：' +
               params.data.departName +
               "</span>" +
               "<br>"
             );
      } //修改鼠标悬停显示的内容
        },
        series: [
          {
            type: "tree",
            id: 0,
            name: "tree1",
            data: this.namedata,
            top: "0%",
            left: "10%",
            bottom: "0%",
            right: "15%",
            symbol: "image",
            avoidLabelOverlap: true,//防止标签重叠
            //  节点的大小
            symbolSize: 25,
            //  连接线默认是曲线，polyline显示直线
            edgeShape: "polyline",
            edgeForkPosition: "63%",
            initialTreeDepth: 1,
            //  连接线的样式
            lineStyle: {
              width: 2
            },
            //节点的颜色
             itemStyle: {
                 //节点合住的颜色
                  // color: '#03a489',
                 //  节点展开的颜色
                  borderColor: '#e3e3e3',
              },
            label: {
              // backgroundColor: "#048e7a",
              color: "#fff",
              fontSize: "15",
              width: 10,
              overflow: "truncate",
              padding: [4, 4, 2, 4],
              position: "left",
              verticalAlign: "middle",
              align: "right"
            },
            //  最后的叶子节点
            leaves: {
              label: {
                position: "right",
                verticalAlign: "middle",
                align: "left"
              }
            },
            emphasis: {
              focus: "descendant"
            },
            //  expandAndCollapse属性表示是否可以展开和折叠节点
            expandAndCollapse: true,
            //  animationDuration和animationDurationUpdate属性表示动画时长。
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
        
      };
      // console.log(option.series[0].data,"图表渲染完的数据====")
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
        myChart.on('mousedown', (e) => {
           var container = document.getElementById('main');
          const name = e.data.name;

          const curNode = myChart._chartsViews[0]._data.tree._nodes.find(item => {
            return item.name === name;
          });
          console.log(curNode,'curNodecurNodecurNode');
          const depth = curNode.depth;
          const curIsExpand = curNode.isExpand;
          myChart._chartsViews[0]._data.tree._nodes.forEach((item, index) => {
            if (item.depth === depth && item.name !== name && !curIsExpand) {
              item.isExpand = false;
            } 
           
          });
        })
        
      }
  // let elesArr = Array.from(new Set(myChart._chartsViews[0]._data._graphicEls));
  //       let dep=myChart._chartsViews[0]._data.tree.root.height;//获取树高
  //       let layer_height=100;     //层级之间的高度
  //       let currentHeight = layer_height * (dep+1) || layer_height;
  //       let newHeight = Math.max(currentHeight, layer_height);
  //       this.chartHeight=newHeight+'px';
  //       let layer_width = 100; // 兄弟节点之间的距离
  //       let currentWidth = layer_width * (elesArr.length - 1) || layer_width;
  //       let newWidth = Math.max(currentWidth, layer_width);
  //       this.chartWidth=newWidth+'px';
  //       myChart.resize();

        
          
      // var allNode = 0;
      // var nodes = myChart._chartsViews[0]._data._graphicEls;
      // console.log(myChart._chartsViews[0]._data._graphicEls,'myChart._chartsViews[0]');
      // //大于35个在计算高度
      // if(nodes.length>5){ 
      //   for (var i = 0, count = nodes.length; i < count; i++) {
      //     var node = nodes[i];
      //     if (node === undefined)
      //       continue;
      //     allNode++;
      //   }
      //   console.log(allNode,'allNode');
      //   var height = 500;
      //   console.log(window.innerHeight);
      //   var currentHeight = 55*allNode;
      //   var newWidth = Math.max(currentHeight, height);
      //   this.height = newWidth
      //   console.log('currentHeight',currentHeight,',height',newWidth)
      //   // this.$refs.lineChart.style.width = window.innerWidth + 'px';
      //   this.$refs.lineChart.style.height = newWidth + 'px';
      //   myChart.resize();
      // }
      option && myChart.setOption(option);
    },

其他方法更好方法，还待研究，希望各位可以共享，或者有更好的echarts树图的新需求，欢迎留言