合并3368冲突

src/components/TreeChart/index.vue

@@ -2,353 +2,353 @@
   <div id="main" class="echarts-container" />
 </template>
 <script>
-import { TreeChart } from "echarts/charts";
-import { TooltipComponent } from "echarts/components";
-import * as echarts from "echarts/core";
-import { CanvasRenderer } from "echarts/renderers";
+import { TreeChart } from 'echarts/charts'
+import { TooltipComponent } from 'echarts/components'
+import * as echarts from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
 
-echarts.use([TooltipComponent, TreeChart, CanvasRenderer]);
+echarts.use([TooltipComponent, TreeChart, CanvasRenderer])
 // let this.myChart;
-let option;
+let option
 
-var treeNodePadding = 50; //节点间最小间隔
+var treeNodePadding = 50 // 节点间最小间隔
 
-var treeTopPadding = 120; //tree距顶端的距离
+var treeTopPadding = 120 // tree距顶端的距离
 
-var rightNode; //最右侧节点,用于计算偏移量
+var rightNode // 最右侧节点,用于计算偏移量
 export default {
-  name: "TreeChart",
-  data() {
-    return {
-      myChart: null,
-      centerLoca: [],
-      fontSize: 6,
-      chartWidth: 0,
-      chartHeight: 0,
-      center: [this.chartWidth, "50%"],
-    };
-  },
+  name: 'TreeChart',
   props: {
     treeData: {
       type: Object,
       default: () => {
-        return {};
-      },
+        return {}
+      }
     },
     topDeep: Number,
     type: String,
-    clickNodeList: Array,
+    clickNodeList: Array
+  },
+  data() {
+    return {
+      myChart: null,
+      centerLoca: [],
+      fontSize: 6,
+      chartWidth: 0,
+      chartHeight: 0,
+      center: [this.chartWidth, '50%']
+    }
   },
   watch: {
     clickNodeList: {
       handler(newValue, old) {
         if (newValue) {
-          this.init();
+          this.init()
         }
-      },
+      }
     },
     treeData: {
       handler(newValue, old) {
-        console.log(newValue);
+        console.log(newValue)
         if (newValue) {
-          this.init();
+          this.init()
         }
-      },
+      }
     },
     chartWidth: {
       handler(newValue, old) {
-        console.log(newValue);
+        console.log(newValue)
         if (newValue) {
-          this.init();
+          this.init()
         }
-      },
-    },
+      }
+    }
   },
   mounted() {
-    this.init();
+    this.init()
     // 监听树图节点的点击事件
-    this.myChart.on("click", (e) => {
-      console.log("e:", e);
-      this.$emit("clickNode", e);
-    });
+    this.myChart.on('click', (e) => {
+      console.log('e:', e)
+      this.$emit('clickNode', e)
+    })
   },
   methods: {
     init() {
-      const that = this;
+      const that = this
       // console.log('$el:', this.$el)
-      that.myChart = echarts.init(this.$el);
-      that.myChart.clear();
+      that.myChart = echarts.init(this.$el)
+      that.myChart.clear()
       option = {
         tooltip: {
           // 提示框浮层设置
-          trigger: "item",
-          triggerOn: "mousemove", // 提示框触发条件
+          trigger: 'item',
+          triggerOn: 'mousemove', // 提示框触发条件
           enterable: true, // 鼠标是否可进入提示框浮层中，默认false
           confine: true, // 是否将tooltip框限制在图表的区域内
           padding: [5, 10],
-          formatter: function (params) {
+          formatter: function(params) {
             // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
             const relationStr =
               "<div style='display: flex;flex-direction: column;'>" +
-              "<div>" +
+              '<div>' +
               '<span style="color: #606266;">' +
-              that.$t("atlas.numberLayers") +
-              ": " +
-              "</span>" +
+              that.$t('atlas.numberLayers') +
+              ': ' +
+              '</span>' +
               '<span style="color: #000000;">' +
               (Number(params.data.TOP_NETWORK_DEEP) - Number(that.topDeep)) +
-              "</span>" +
-              "</div>" +
-              "<div>" +
+              '</span>' +
+              '</div>' +
+              '<div>' +
               '<span style="color: #606266;">' +
-              that.$t("atlas.memberCode") +
-              ": " +
-              "</span>" +
+              that.$t('atlas.memberCode') +
+              ': ' +
+              '</span>' +
               '<span style="color: #000000;">' +
               params.data.USER_NAME +
-              "</span>" +
-              "</div>" +
-              "<div>" +
+              '</span>' +
+              '</div>' +
+              '<div>' +
               '<span style="color: #606266;">' +
-              that.$t("atlas.name") +
-              ": " +
-              "</span>" +
+              that.$t('atlas.name') +
+              ': ' +
+              '</span>' +
               '<span style="color: #000000;">' +
               params.data.REAL_NAME +
-              "</span>" +
-              "</div>" +
-              "<div>" +
+              '</span>' +
+              '</div>' +
+              '<div>' +
               '<span style="color: #606266;">' +
-              that.$t("atlas.level") +
-              ": " +
-              "</span>" +
+              that.$t('atlas.level') +
+              ': ' +
+              '</span>' +
               '<span style="color: #000000;">' +
               params.data.DEC_LV_NAME +
-              "</span>" +
-              "</div>" +
-              "<div>" +
+              '</span>' +
+              '</div>' +
+              '<div>' +
               '<span style="color: #606266;">' +
-              that.$t("atlas.highest") +
-              ": " +
-              "</span>" +
+              that.$t('atlas.highest') +
+              ': ' +
+              '</span>' +
               '<span style="color: #000000;">' +
               params.data.EMP_LV_NAME +
-              "，" +
+              '，' +
               params.data.CROWN_LV_NAME +
-              "</span>" +
-              "</div>" +
-              "<div>" +
+              '</span>' +
+              '</div>' +
+              '<div>' +
               '<span style="color: #606266;">' +
-              that.$t("atlas.periodNumber") +
-              ": " +
-              "</span>" +
+              that.$t('atlas.periodNumber') +
+              ': ' +
+              '</span>' +
               '<span style="color: #000000;">' +
               params.data.PERIOD_AT +
-              "</span>" +
-              "</div>" +
-              "</div>";
+              '</span>' +
+              '</div>' +
+              '</div>'
             const networkStr =
               "<div style='display: flex;flex-direction: column;'>" +
-              "<div>" +
+              '<div>' +
               '<span style="color: #606266;">' +
-              that.$t("atlas.memberCode") +
-              ": " +
-              "</span>" +
+              that.$t('atlas.memberCode') +
+              ': ' +
+              '</span>' +
               '<span style="color: #000000;">' +
               params.data.USER_NAME +
-              "</span>" +
-              "</div>" +
-              "<div>" +
+              '</span>' +
+              '</div>' +
+              '<div>' +
               '<span style="color: #606266;">' +
-              that.$t("atlas.name") +
-              ": " +
-              "</span>" +
+              that.$t('atlas.name') +
+              ': ' +
+              '</span>' +
               '<span style="color: #000000;">' +
               params.data.REAL_NAME +
-              "</span>" +
-              "</div>" +
-              "<div>" +
+              '</span>' +
+              '</div>' +
+              '<div>' +
               '<span style="color: #606266;">' +
-              that.$t("atlas.level") +
-              ": " +
-              "</span>" +
+              that.$t('atlas.level') +
+              ': ' +
+              '</span>' +
               '<span style="color: #000000;">' +
               params.data.DEC_LV_NAME +
-              "</span>" +
-              "</div>" +
-              "<div>" +
+              '</span>' +
+              '</div>' +
+              '<div>' +
               '<span style="color: #606266;">' +
-              that.$t("atlas.highest") +
-              ": " +
-              "</span>" +
+              that.$t('atlas.highest') +
+              ': ' +
+              '</span>' +
               '<span style="color: #000000;">' +
               params.data.EMP_LV_NAME +
-              "，" +
+              '，' +
               params.data.CROWN_LV_NAME +
-              "</span>" +
-              "</div>" +
-              "<div>" +
+              '</span>' +
+              '</div>' +
+              '<div>' +
               '<span style="color: #606266;">' +
-              that.$t("atlas.periodNumber") +
-              ": " +
-              "</span>" +
+              that.$t('atlas.periodNumber') +
+              ': ' +
+              '</span>' +
               '<span style="color: #000000;">' +
               params.data.PERIOD_AT +
-              "</span>" +
-              "</div>" +
-              "</div>";
+              '</span>' +
+              '</div>' +
+              '</div>'
 
-            return that.type === "placement" ? relationStr : networkStr;
+            return that.type === 'placement' ? relationStr : networkStr
           },
           // valueFormatter: function (value) { // tooltip 中数值显示部分的格式化回调函数
           //   return '$' + value.toFixed(2)
           // },
-          backgroundColor: "rgba(250,250,250,0.99)", // 提示框浮层的背景颜色
-          borderColor: "#1890FF", // 提示框浮层的边框颜色
+          backgroundColor: 'rgba(250,250,250,0.99)', // 提示框浮层的背景颜色
+          borderColor: '#1890FF', // 提示框浮层的边框颜色
           borderWidth: 0.5, // 提示框浮层的边框宽
           borderRadius: 8, // 提示框浮层圆角
           textStyle: {
             // 提示框浮层的文本样式
-            color: "#333", // 文字颜色
+            color: '#333', // 文字颜色
             // fontWeight: 400, // 字体粗细
             // fontSize: that.fontSize, // 字体大小
             // lineHeight: 20, // 行高
             // width: 60, // 文本显示宽度
             // 文字超出宽度是否截断或者换行；只有配置width时有效
-            overflow: "breakAll", // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
-            ellipsis: "...",
+            overflow: 'breakAll', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
+            ellipsis: '...'
           },
           extraCssText:
-            "min-height:100px;box-shadow: 0 0 9px rgba(0, 0, 0, 0.3);text-align: left;", // 额外添加到浮层的css样式
+            'min-height:100px;box-shadow: 0 0 9px rgba(0, 0, 0, 0.3);text-align: left;', // 额外添加到浮层的css样式
           axisPointer: {
-            type: "shadow",
+            type: 'shadow',
             shadowStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: "rgba(255, 255, 255, 0)" },
-                { offset: 1, color: "rgba(37, 107, 230, 0.18)" },
-              ]),
-            },
-          },
+                { offset: 0, color: 'rgba(255, 255, 255, 0)' },
+                { offset: 1, color: 'rgba(37, 107, 230, 0.18)' }
+              ])
+            }
+          }
         },
         series: [
           {
-            width: that.chartWidth + "px",
-            height: "100%",
-            type: "tree",
+            width: that.chartWidth + 'px',
+            height: '100%',
+            type: 'tree',
             data: [this.treeData],
-            name: "树图",
-            top: "1%", // 组件离容器上侧的距离，像素值20，或相对容器的百分比
-            left: "1%", // 组件离容器左侧的距离
-            bottom: "1%", // 组件离容器下侧的距离
-            right: "1%", // 组件离容器右侧的距离
-            layout: "orthogonal", // 树图的布局，正交orthogonal和径向radial两种
-            orient: "TB", // 树图中正交布局的方向，'LR','RL','TB','BT'，只有布局是正交时才生效
-            edgeShape: "polyline", // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效
+            name: '树图',
+            top: '1%', // 组件离容器上侧的距离，像素值20，或相对容器的百分比
+            left: '1%', // 组件离容器左侧的距离
+            bottom: '1%', // 组件离容器下侧的距离
+            right: '1%', // 组件离容器右侧的距离
+            layout: 'orthogonal', // 树图的布局，正交orthogonal和径向radial两种
+            orient: 'TB', // 树图中正交布局的方向，'LR','RL','TB','BT'，只有布局是正交时才生效
+            edgeShape: 'polyline', // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效
             // edgeForkPosition:"10%",
             roam: true, // 是否开启鼠标缩放或平移，默认false
             zoom: 0.5,
             scaleLimit: {
               min: 0.5,
-              max: 10,
+              max: 10
             },
             center: that.center || null,
             // center: [5, 5],
             initialTreeDepth: -1, // 树图初始的展开层级（深度），根节点是0，不设置时全部展开
             // symbol: 'emptyCircle', // 标记的图形，默认是emptyCircle;circle,rect,roundRect,triangle,diamond,pin,arrow,none
-            symbol: function (value, params) {
+            symbol: function(value, params) {
               // params.data节点的所有数据
               if (params.data.leaf == true) {
-                return "emptyCircle";
+                return 'emptyCircle'
               } else if (params.data.leaf == false) {
-                return "circle";
+                return 'circle'
               }
             },
             // symbolRotate: 270, // 配合arrow图形使用效果较好
             symbolSize: 10, // 大于0时是圆圈，等于0时不展示，标记的大小
             itemStyle: {
               // 树图中每个节点的样式
-              color: "#1890FF", // 节点未展开时的填充色
-              borderColor: "rgba(255, 144, 0, 1)", // 图形的描边颜色
+              color: '#1890FF', // 节点未展开时的填充色
+              borderColor: 'rgba(255, 144, 0, 1)', // 图形的描边颜色
               borderWidth: 0.5, // 描边线宽，为0时无描边
-              borderType: "dotted", // 描边类型
-              borderCap: "square", // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
-              shadowColor: "rgba(0,121,221,0.3)", // 阴影颜色
+              borderType: 'dotted', // 描边类型
+              borderCap: 'square', // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
+              shadowColor: 'rgba(0,121,221,0.3)', // 阴影颜色
               shadowBlur: 12, // 图形阴影的模糊大小
-              opacity: 1, // 图形透明度
+              opacity: 1 // 图形透明度
             },
             label: {
               // 每个节点对应的文本标签样式
               show: true, // 是否显示标签
               // distance: 22, // 文本距离图形元素的距离
-              position: "bottom", // 标签位置
-              verticalAlign: "middle", // 文字垂直对齐方式，默认自动，top，middle，bottom
-              align: "center", // 文字水平对齐方式，默认自动，left，right，center
+              position: 'bottom', // 标签位置
+              verticalAlign: 'middle', // 文字垂直对齐方式，默认自动，top，middle，bottom
+              align: 'center', // 文字水平对齐方式，默认自动，left，right，center
               fontSize: that.fontSize, // 字体大小
-              color: "#333", // 字体颜色
-              backgroundColor: "#F0F5FA", // 文字块的背景颜色
-              borderColor: "#1890FF", // 文字块边框颜色
+              color: '#333', // 字体颜色
+              backgroundColor: '#F0F5FA', // 文字块的背景颜色
+              borderColor: '#1890FF', // 文字块边框颜色
               borderWidth: 0.5, // 文字块边框宽度
-              borderType: "solid", // 文字块边框描边类型 solid dashed dotted
+              borderType: 'solid', // 文字块边框描边类型 solid dashed dotted
               borderRadius: 6, // 文字块的圆角
               padding: [5, 6], // 文字块内边距
-              shadowColor: "rgba(0,121,221,0.6)", // 文字块的背景阴影颜色
+              shadowColor: 'rgba(0,121,221,0.6)', // 文字块的背景阴影颜色
               shadowBlur: 6, // 文字块的背景阴影长度
               width: 80,
               // 文字超出宽度是否截断或者换行；只有配置width时有效
-              overflow: "truncate", // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
-              ellipsis: "...",
-              formatter: function (params) {
+              overflow: 'truncate', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
+              ellipsis: '...',
+              formatter: function(params) {
                 return (
-                  params.data.USER_NAME + "\n" + "\n" + params.data.REAL_NAME
-                );
+                  params.data.USER_NAME + '\n' + '\n' + params.data.REAL_NAME
+                )
                 // return params.data.REAL_NAME
-              },
+              }
             },
 
             lineStyle: {
               // 树图边的样式
-              color: "rgba(0,0,0,.35)", // 树图边的颜色
+              color: 'rgba(0,0,0,.35)', // 树图边的颜色
               width: 1, // 树图边的宽度
               curveness: 0.5, // 树图边的曲度
-              shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
-              shadowBlur: 10, // 图形阴影的模糊大小
+              shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
+              shadowBlur: 10 // 图形阴影的模糊大小
             },
             emphasis: {
               // 树图中图形和标签高亮的样式
               disabled: false, // 是否关闭高亮状态，默认false
               // 在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果
-              focus: "relative", // none不淡出其他图形（默认）；self只聚焦当前高亮的数据图形；series聚焦当前高亮的数据所在系列的所有图形；ancestor聚焦所有祖先节点；descendant聚焦所有子孙节点；relative聚焦所有子孙和祖先节点
-              blurScope: "coordinateSystem", // 开启focus时，配置淡出的范围，coordinateSystem淡出范围为坐标系（默认）；series淡出范围为系列；global淡出范围为全局
+              focus: 'relative', // none不淡出其他图形（默认）；self只聚焦当前高亮的数据图形；series聚焦当前高亮的数据所在系列的所有图形；ancestor聚焦所有祖先节点；descendant聚焦所有子孙节点；relative聚焦所有子孙和祖先节点
+              blurScope: 'coordinateSystem', // 开启focus时，配置淡出的范围，coordinateSystem淡出范围为坐标系（默认）；series淡出范围为系列；global淡出范围为全局
               itemStyle: {
                 // 该节点的样式
-                color: "#1890FF", // 图形的颜色
+                color: '#1890FF', // 图形的颜色
                 // borderColor: 'rgba(255, 144, 0, 1)', // 图形的描边颜色
                 // borderWidth: 1, // 描边线宽，为0时无描边
-                borderType: "solid", // 描边类型 solid dashed dotted
-                borderCap: "square", // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
-                shadowColor: "rgba(0,121,221,0.3)", // 阴影颜色
+                borderType: 'solid', // 描边类型 solid dashed dotted
+                borderCap: 'square', // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
+                shadowColor: 'rgba(0,121,221,0.3)', // 阴影颜色
                 shadowBlur: 12, // 图形阴影的模糊大小
-                opacity: 1, // 图形透明度
+                opacity: 1 // 图形透明度
               },
               lineStyle: {
                 // 树图边的样式
-                color: "rgba(0,0,0,.45)", // 树图边的颜色
+                color: 'rgba(0,0,0,.45)', // 树图边的颜色
                 width: 2, // 树图边的宽度
                 curveness: 0.5, // 树图边的曲度
-                shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
-                shadowBlur: 6, // 图形阴影的模糊大小
+                shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
+                shadowBlur: 6 // 图形阴影的模糊大小
               },
               label: {
                 // 高亮标签的文本样式
-                color: "#333",
-                fontWeight: 600,
-              },
+                color: '#333',
+                fontWeight: 600
+              }
             },
             blur: {
               // 淡出状态的相关配置，开启emphasis.focus后有效
               itemStyle: {}, // 节点的样式
               lineStyle: {}, // 树图边的样式
-              label: {}, // 淡出标签的文本样式
+              label: {} // 淡出标签的文本样式
             },
             leaves: {
               // 叶子节点的特殊配置
@@ -356,129 +356,126 @@ export default {
                 // 叶子节点的文本标签样式
                 // distance: 22,
                 // color: '#1890FF',
-                position: "bottom",
-                verticalAlign: "middle",
-                align: "center",
+                position: 'bottom',
+                verticalAlign: 'middle',
+                align: 'center'
               },
               itemStyle: {}, // 叶子节点的样式
               emphasis: {}, // 叶子节点高亮状态的配置
               blur: {}, // 叶子节点淡出状态的配置
-              select: {}, // 叶子节点选中状态的配置
+              select: {} // 叶子节点选中状态的配置
             },
             animation: true, // 是否开启动画
             expandAndCollapse: true, // 子树折叠和展开的交互，默认打开
             animationDuration: 500, // 初始动画的时长
-            animationEasing: "linear", // 初始动画的缓动效果
+            animationEasing: 'linear', // 初始动画的缓动效果
             animationDelay: 0, // 初始动画的延迟
             animationDurationUpdate: 500, // 数据更新动画的时长
-            animationEasingUpdate: "cubicInOut", // 数据更新动画的缓动效果
-            animationDelayUpdate: 0, // 数据更新动画的延迟
-          },
-        ],
-      };
+            animationEasingUpdate: 'cubicInOut', // 数据更新动画的缓动效果
+            animationDelayUpdate: 0 // 数据更新动画的延迟
+          }
+        ]
+      }
 
-      option && that.myChart.setOption(option, true);
-      that.resize();
+      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();
+      that.myChart.getZr().off('mousewheel')
+      that.myChart.getZr().on('mousewheel', (param) => {
+        const currentOption = that.myChart.getOption()
         // console.log(currentOption);
         if (currentOption.series[0]) {
-          let zoom = currentOption.series[0].zoom;
+          const zoom = currentOption.series[0].zoom
           // that.fontSize = 10 * zoom
-          currentOption.textStyle.fontSize = 10 * zoom;
-          currentOption.series[0].label.fontSize = 8 * zoom;
-          currentOption.series[0].label.width = 110 * zoom;
-          currentOption.series[0].label.distance = 18 * zoom;
-          currentOption.series[0].leaves.distance = 18 * zoom;
-          option && that.myChart.setOption(currentOption);
+          currentOption.textStyle.fontSize = 10 * zoom
+          currentOption.series[0].label.fontSize = 8 * zoom
+          currentOption.series[0].label.width = 110 * zoom
+          currentOption.series[0].label.distance = 18 * zoom
+          currentOption.series[0].leaves.distance = 18 * zoom
+          option && that.myChart.setOption(currentOption)
         }
-      });
+      })
     },
 
     resize() {
-      let elesArr = Array.from(
+      const elesArr = Array.from(
         new Set(this.myChart._chartsViews[0]._data._graphicEls)
-      );
+      )
       console.log(elesArr.length)
-      let dep = this.myChart._chartsViews[0]._data.tree.root.height; //获取树高
-      console.log(dep);
-      let layer_height = 90; //层级之间的高度
-      let currentHeight = layer_height * (dep + 1) || layer_height;
-      let newHeight = Math.max(currentHeight, layer_height);
-      this.chartHeight = newHeight + "px";
-      let layer_width = 90; // 兄弟节点之间的距离
-      let currentWidth = layer_width * (elesArr.length - 1) || layer_width;
-      let newWidth = Math.max(currentWidth, layer_width);
-      console.log(newWidth);
+      const dep = this.myChart._chartsViews[0]._data.tree.root.height // 获取树高
+      console.log(dep)
+      const layer_height = 90 // 层级之间的高度
+      const currentHeight = layer_height * (dep + 1) || layer_height
+      const newHeight = Math.max(currentHeight, layer_height)
+      this.chartHeight = newHeight + 'px'
+      const layer_width = 90 // 兄弟节点之间的距离
+      const currentWidth = layer_width * (elesArr.length - 1) || layer_width
+      const newWidth = Math.max(currentWidth, layer_width)
+      console.log(newWidth)
       if (newWidth < 200) {
-        this.center[0] = '-70%';
-        this.center[1] = (dep * 2) + '0%';
-
-      }else if (newWidth > 200 && newWidth < 500) {
-        this.center[0] = '-56%';
-        this.center[1] = (dep * 1.5) + '0%';
-
-      }else if (newWidth > 500 && newWidth < 1000) {
-        this.center[0] = '-10%';
-        this.center[1] = (dep) + '0%';
-
-      } else if (newWidth > 1000){
-        this.center[0] = elesArr.length > 60 ? newWidth * 1.2 : newWidth * 0.6;
-        this.center[1] = (dep ) + '0%';
+        this.center[0] = '-70%'
+        this.center[1] = (dep * 2) + '0%'
+      } else if (newWidth > 200 && newWidth < 500) {
+        this.center[0] = '-56%'
+        this.center[1] = (dep * 1.5) + '0%'
+      } else if (newWidth > 500 && newWidth < 1000) {
+        this.center[0] = '-30%'
+        this.center[1] = (dep) + '0%'
+      } else if (newWidth > 1000) {
+        this.center[0] = elesArr.length > 60 ? newWidth * 1.5 : newWidth * 1.2
+        this.center[1] = (dep) + '0%'
       }
-      this.chartWidth = newWidth;
+      this.chartWidth = newWidth
 
-      window.addEventListener("resize", () => {
-        this.myChart.resize();
-      });
+      window.addEventListener('resize', () => {
+        this.myChart.resize()
+      })
     },
 
     doGlobalTreeChart(ec, data) {
       // this.myChart.setOption(getGlobalTreeOption());
-      //生成图表后做调整
-      this.adjustTreeView();
+      // 生成图表后做调整
+      this.adjustTreeView()
     },
 
-    //调整tree显示
+    // 调整tree显示
     adjustTreeView() {
-      var zr = this.myChart.getZr();
-      var domWidth = zr.painter.getWidth();
-      var treeWidth = this.getTreeWidth(zr);
-      if (treeWidth <= domWidth) return;
+      var zr = this.myChart.getZr()
+      var domWidth = zr.painter.getWidth()
+      var treeWidth = this.getTreeWidth(zr)
+      if (treeWidth <= domWidth) return
     },
 
-    //计算最左边节点和最右边节点(symbol为image或icon)的间隔即为树图宽度
+    // 计算最左边节点和最右边节点(symbol为image或icon)的间隔即为树图宽度
 
     getTreeWidth(zr) {
-      var nodes = zr.storage._roots;
-      console.log(nodes);
-      let max = 0;
-      let min = 0;
+      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 (nodes[i].type == 'image' || nodes[i].type == 'icon') {
+          var nodeX = nodes[i].style.x
 
           if (nodeX > max) {
-            max = nodeX;
+            max = nodeX
 
-            rightNode = nodes[i];
+            rightNode = nodes[i]
 
-            continue;
+            continue
           }
 
           if (nodeX < min) {
-            min = nodeX;
+            min = nodeX
           }
         }
       }
 
-      return max - min;
-    },
-  },
-};
+      return max - min
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .echarts-container {

src/views/shop/standard-products.vue

@@ -39,7 +39,7 @@
     </el-table>
 
     <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
-      <!-- 底部 去结算 -->
+    <!-- 底部 去结算 -->
     <div v-show="total>0" class="white-box-footer" style="margin-top: 15px;">
       <div class="flex data" style="float: left; display: inline-block; margin-top: 20px;">
         <el-button type="primary" size="small" style="float: left;" @click="settlement()">{{ $t('shop.checkOut') }}</el-button>
@@ -104,10 +104,10 @@
             <el-divider />
             <el-form>
               <el-form-item :label="$t('shop.declarationCenterNumber')">
-                <el-input v-model="recUserName" :disabled="isDec == '1'"/>
+                <el-input v-model="recUserName" :disabled="isDec == '1'" />
               </el-form-item>
             </el-form>
-            
+
             <!-- 支付方式/账户余额 {{ cashCurrency }}:  -->
             <div class="" style="margin: 15px 0;">
               <el-row :gutter="20" type="flex" style="flex-wrap: wrap;">
@@ -327,8 +327,8 @@ export default {
               value: 'userOrder'
             }
           ]
-        },
-        
+        }
+
       },
       payStackScreenWidth: getScreenWidth() > 500 ? '450px' : getScreenWidth() + 'px',
 
@@ -352,9 +352,9 @@ export default {
         taxAmount: 0
       },
       imageStyle: 'margin-top: -50px;',
-      recRealName:null,
-      recUserName:null,
-      isDec:null
+      // recUserName:usersInfo.userName(),
+      recUserName: null,
+      isDec: null
     }
   },
   computed: {
@@ -372,9 +372,9 @@ export default {
     isDec: {
       handler(newValue, old) {
         if (newValue == '1') {
-           this.recUserName = usersInfo.userName();
+          this.recUserName = usersInfo.userName()
         }
-      },
+      }
     }
   },
   created() {
@@ -541,7 +541,7 @@ export default {
         this.freeShipping = response.data.freeShipping
         // 运费
         this.freight = response.data.freight
-        //是否是报单中心
+        // 是否是报单中心
         this.isDec = response.data.isDec
       })
     },
@@ -595,7 +595,7 @@ export default {
           addressId: this.addressId,
           address: this.address,
           payType: this.payType,
-          userName:this.recUserName
+          userName: this.recUserName
         }
         if (this.payType === 'pay_stack') {
           // PayStack支付