3368 网络图

src/components/TreeChart/index.vue

@@ -8,16 +8,21 @@ import * as echarts from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 
 echarts.use([TooltipComponent, TreeChart, CanvasRenderer]);
-let myChart;
+// let this.myChart;
 let option;
-var treeNodePadding = 90; //节点间最小间隔
+
+var treeNodePadding = 50; //节点间最小间隔
+
 var treeTopPadding = 120; //tree距顶端的距离
+
+var rightNode; //最右侧节点,用于计算偏移量
 export default {
   name: "TreeChart",
   data() {
     return {
+      myChart:null,
       centerLoca: [],
-      fontSize:6,
+      fontSize: 6,
     };
   },
   props: {
@@ -51,7 +56,7 @@ export default {
   mounted() {
     this.init();
     // 监听树图节点的点击事件
-    myChart.on("click", (e) => {
+    this.myChart.on("click", (e) => {
       console.log("e:", e);
       this.$emit("clickNode", e);
     });
@@ -60,8 +65,8 @@ export default {
     init() {
       const that = this;
       // console.log('$el:', this.$el)
-      myChart = echarts.init(this.$el);
-      myChart.clear();
+      that.myChart = echarts.init(that.$el);
+      that.myChart.clear();
       option = {
         tooltip: {
           // 提示框浮层设置
@@ -288,7 +293,7 @@ export default {
                 // return params.data.REAL_NAME
               },
             },
-             
+
             lineStyle: {
               // 树图边的样式
               color: "rgba(0,0,0,.35)", // 树图边的颜色
@@ -361,13 +366,15 @@ export default {
         ],
       };
       
-      // myChart.resize();
-      option && myChart.setOption(option, true); 
      
-      myChart.getZr().off("mousewheel");
-      myChart.getZr().on("mousewheel", (param) => {
-        let currentOption = myChart.getOption();
-        console.log(currentOption);
+      option && that.myChart.setOption(option, true);
+      that.resize();
+
+      // that.adjustTreeView();
+      that.myChart.getZr().off("mousewheel");
+      that.myChart.getZr().on("mousewheel", (param) => {
+        let currentOption = that.myChart.getOption();
+        // console.log(currentOption);
         if (currentOption.series[0]) {
           let zoom = currentOption.series[0].zoom;
           // that.fontSize = 10 * zoom
@@ -376,16 +383,20 @@ export default {
           currentOption.series[0].label.width = 105 * zoom;
           currentOption.series[0].label.distance = 18 * zoom;
           currentOption.series[0].leaves.distance = 18 * zoom;
-          option && myChart.setOption(currentOption);
+          option && that.myChart.setOption(currentOption);
         }
       });
     },
-  
+
     resize() {
+      console.log(this.myChart)
+
       let elesArr = Array.from(
-        new Set(myChart._chartsViews[0]._data._graphicEls)
+        new Set(this.myChart._chartsViews[0]._data._graphicEls)
       );
-      let dep = myChart._chartsViews[0]._data.tree.root.height; //获取树高
+      console.log(elesArr)
+
+      let dep = this.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);
@@ -396,6 +407,55 @@ export default {
       this.chartWidth = newWidth + "px";
       this.myChart.resize();
     },
+
+    doGlobalTreeChart(ec, data) {
+      // this.myChart.setOption(getGlobalTreeOption());
+      //生成图表后做调整
+      this.adjustTreeView();
+    },
+
+    //调整tree显示
+    adjustTreeView() {
+      var zr = this.myChart.getZr();
+      var domWidth = zr.painter.getWidth();
+      var treeWidth = this.getTreeWidth(zr);
+      if (treeWidth <= domWidth) return;
+      var adjustSize = (domWidth / treeWidth) * 0.95; //多缩小0.05不至于完全充盈dom
+      var lastNodeX = rightNode.style.x * adjustSize;
+      var rightOffset =
+        domWidth - lastNodeX - (domWidth - treeWidth * adjustSize) / 2; //尽可能的让其居中
+      zr.painter._layers[1].scale = [adjustSize, adjustSize, 0, 0]; //前两个为缩放大小，后两个为缩放原点
+      zr.painter._layers[1].position = [rightOffset, treeTopPadding]; //偏移量
+      this.myChart.refresh();
+    },
+
+    //计算最左边节点和最右边节点(symbol为image或icon)的间隔即为树图宽度
+
+    getTreeWidth(zr) {
+      var nodes = zr.storage._roots;
+      console.log(nodes)
+      let max = 0;
+      let min = 0;
+      for (var i = 0; i < nodes.length; i++) {
+        if (nodes[i].type == "image" || nodes[i].type == "icon") {
+          var nodeX = nodes[i].style.x;
+
+          if (nodeX > max) {
+            max = nodeX;
+
+            rightNode = nodes[i];
+
+            continue;
+          }
+
+          if (nodeX < min) {
+            min = nodeX;
+          }
+        }
+      }
+
+      return max - min;
+    },
   },
 };
 </script>