3368 网络图end

.env.staging

@@ -8,7 +8,7 @@ VUE_APP_ACCESS_TOKEN_PREFIX='Bearer '
 
 # mips
 api请求地址
-VUE_APP_BASE_API='http://16.163.228.151:8043'
+VUE_APP_BASE_API=''
 文件下载地址
 VUE_APP_BASE_DO_API='http://16.163.228.151:8043'
 CDN文件地址

src/components/TreeChart/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="main" class="echarts-container"  />
+  <div id="main" class="echarts-container" />
 </template>
 <script>
 import { TreeChart } from "echarts/charts";
@@ -20,12 +20,12 @@ export default {
   name: "TreeChart",
   data() {
     return {
-      myChart:null,
+      myChart: null,
       centerLoca: [],
       fontSize: 6,
-      chartWidth:0,
-      chartHeight:0, 
-      center:[this.chartWidth,'50%'],
+      chartWidth: 0,
+      chartHeight: 0,
+      center: [this.chartWidth, "50%"],
     };
   },
   props: {
@@ -232,8 +232,8 @@ export default {
         },
         series: [
           {
-            width: that.chartWidth + 'px',
-            height:'100%',
+            width: that.chartWidth + "px",
+            height: "100%",
             type: "tree",
             data: [this.treeData],
             name: "树图",
@@ -246,7 +246,7 @@ export default {
             edgeShape: "polyline", // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效
             // edgeForkPosition:"10%",
             roam: true, // 是否开启鼠标缩放或平移，默认false
-            zoom: 0.8,
+            zoom: 0.5,
             scaleLimit: {
               min: 0.5,
               max: 10,
@@ -376,11 +376,10 @@ export default {
           },
         ],
       };
-      
-     
+
       option && that.myChart.setOption(option, true);
       that.resize();
-    
+
       // that.adjustTreeView();
       that.myChart.getZr().off("mousewheel");
       that.myChart.getZr().on("mousewheel", (param) => {
@@ -391,7 +390,7 @@ export default {
           // that.fontSize = 10 * zoom
           currentOption.textStyle.fontSize = 10 * zoom;
           currentOption.series[0].label.fontSize = 8 * zoom;
-          currentOption.series[0].label.width = 105 * zoom;
+          currentOption.series[0].label.width = 100 * zoom;
           currentOption.series[0].label.distance = 18 * zoom;
           currentOption.series[0].leaves.distance = 18 * zoom;
           option && that.myChart.setOption(currentOption);
@@ -399,12 +398,12 @@ export default {
       });
     },
 
-    resize() { 
+    resize() {
       let elesArr = Array.from(
         new Set(this.myChart._chartsViews[0]._data._graphicEls)
-      ); 
+      );
       let dep = this.myChart._chartsViews[0]._data.tree.root.height; //获取树高
-      console.log(dep)
+      console.log(dep);
       let layer_height = 90; //层级之间的高度
       let currentHeight = layer_height * (dep + 1) || layer_height;
       let newHeight = Math.max(currentHeight, layer_height);
@@ -412,12 +411,27 @@ export default {
       let layer_width = 90; // 兄弟节点之间的距离
       let currentWidth = layer_width * (elesArr.length - 1) || layer_width;
       let newWidth = Math.max(currentWidth, layer_width);
-      console.log(newWidth)
-      this.center[0] = newWidth
+      console.log(newWidth);
+      if (newWidth < 200) {
+        this.center[0] = '-70%';
+        this.center[1] = (dep * 2) + '0%';
+
+      }else if (newWidth < 500) {
+        this.center[0] = '-50%';
+        this.center[1] = (dep) + '0%';
+
+      }else if (newWidth < 1000) {
+        this.center[0] = '-10%';
+        this.center[1] = (dep ) + '0%';
+
+      } else {
+        this.center[0] = newWidth * 1.2;
+        this.center[1] = (dep ) + '0%';
+      }
       this.chartWidth = newWidth;
 
       window.addEventListener("resize", () => {
-          this.myChart.resize(); 
+        this.myChart.resize();
       });
     },
 
@@ -439,7 +453,7 @@ export default {
 
     getTreeWidth(zr) {
       var nodes = zr.storage._roots;
-      console.log(nodes)
+      console.log(nodes);
       let max = 0;
       let min = 0;
       for (var i = 0; i < nodes.length; i++) {