3368 ng网络图label和tooltip的参数、样式调整

src/components/TreeChart/index.vue

@@ -1,191 +1,236 @@
 <template>
-  <div class="echarts-container" />
+  <div class="echarts-container"></div>
 </template>
 <script>
-import * as echarts from 'echarts/core'
-import { TooltipComponent } from 'echarts/components'
-import { TreeChart } from 'echarts/charts'
-import { CanvasRenderer } from 'echarts/renderers'
-echarts.use([TooltipComponent, TreeChart, CanvasRenderer])
-let myChart
-let option
+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]);
+let myChart;
+let option;
 export default {
-  name: 'TreeChart',
+  name: "TreeChart",
   props: {
     treeData: {
       type: Object,
       default: () => {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   mounted() {
-    this.init()
+    this.init();
     // 监听树图节点的点击事件
-    myChart.on('click', (e) => {
+    myChart.on("click", (e) => {
       // console.log('e:', e)
-      this.$emit('clickNode', e)
-    })
+      this.$emit("clickNode", e);
+    });
   },
   methods: {
     init() {
+      let that = this;
       // console.log('$el:', this.$el)
-      myChart = echarts.init(this.$el)
+      myChart = echarts.init(this.$el);
       option = {
-        tooltip: { // 提示框浮层设置
-          trigger: 'item',
-          triggerOn: 'mousemove', // 提示框触发条件
+        tooltip: {
+          // 提示框浮层设置
+          trigger: "item",
+          triggerOn: "mousemove", // 提示框触发条件
           enterable: true, // 鼠标是否可进入提示框浮层中，默认false
           confine: true, // 是否将tooltip框限制在图表的区域内
-          formatter: function(params) { // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
-            // console.log('params:', params)
-            return params.marker + params.name + '<br/>' + '$ ' + (params.value || '--')
+          formatter: function (params) {
+            // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
+            console.log("params:", params);
+            let str = params.data.REAL_NAME + "<br/>";
+            str +=
+              "<span>" +
+              that.$t("atlas.location") +
+              ": " +
+              params.data.TOP_NETWORK_DEEP +
+              "</span>" +
+              "<br/>" +
+              "<span>" +
+              params.data.DEC_LV_NAME +
+              "</span>" + 
+              "<br/>" +
+              "<span>" +
+                that.$t("atlas.highest") +
+              ": " +
+              params.data.EMP_LV_NAME + ',' + params.data.CROWN_LV_NAME
+              "</span>" + 
+              "<br/>" +
+              "<span>" +
+              String(params.data.PERIOD_AT) +
+              "</span>"
+              
+              
+            return str;
           },
           // valueFormatter: function (value) { // tooltip 中数值显示部分的格式化回调函数
           //   return '$' + value.toFixed(2)
           // },
-          backgroundColor: '#FFF', // 提示框浮层的背景颜色
-          borderColor: '#1890FF', // 提示框浮层的边框颜色
+          backgroundColor: "#FFF", // 提示框浮层的背景颜色
+          borderColor: "#1890FF", // 提示框浮层的边框颜色
           borderWidth: 1, // 提示框浮层的边框宽
           borderRadius: 8, // 提示框浮层圆角
           padding: [6, 8], // 提示框浮层的内边距
-          textStyle: { // 提示框浮层的文本样式
-            color: '#333', // 文字颜色
+          textStyle: {
+            // 提示框浮层的文本样式
+            color: "#333", // 文字颜色
             fontWeight: 400, // 字体粗细
-            fontSize: 16, // 字体大小
+            fontSize: 14, // 字体大小
             lineHeight: 20, // 行高
             width: 60, // 文本显示宽度
             // 文字超出宽度是否截断或者换行；只有配置width时有效
-            overflow: 'breakAll', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
-            ellipsis: '...'
+            overflow: "breakAll", // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
+            ellipsis: "...",
           },
-          extraCssText: 'box-shadow: 0 0 9px rgba(0, 0, 0, 0.3);text-align: right;' // 额外添加到浮层的css样式
+          extraCssText:
+            "height:200px;box-shadow: 0 0 9px rgba(0, 0, 0, 0.3);text-align: left;", // 额外添加到浮层的css样式
         },
         series: [
           {
-            width: '100%',
-            height: '100%',
-            type: 'tree',
+            width: "100%",
+            height: "100%",
+            type: "tree",
             data: [this.treeData],
-            name: '树图',
-            top: '10%', // 组件离容器上侧的距离，像素值20，或相对容器的百分比20%
-            left: '5%', // 组件离容器左侧的距离
-            bottom: '1%', // 组件离容器下侧的距离
-            right: '2%', // 组件离容器右侧的距离
-            layout: 'orthogonal', // 树图的布局，正交orthogonal和径向radial两种
-            orient: 'TB', // 树图中正交布局的方向，'LR','RL','TB','BT'，只有布局是正交时才生效
-            edgeShape: 'polyline', // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效
+            name: "树图",
+            top: "10%", // 组件离容器上侧的距离，像素值20，或相对容器的百分比20%
+            left: "5%", // 组件离容器左侧的距离
+            bottom: "1%", // 组件离容器下侧的距离
+            right: "2%", // 组件离容器右侧的距离
+            layout: "orthogonal", // 树图的布局，正交orthogonal和径向radial两种
+            orient: "TB", // 树图中正交布局的方向，'LR','RL','TB','BT'，只有布局是正交时才生效
+            edgeShape: "polyline", // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效
             roam: true, // 是否开启鼠标缩放或平移，默认false
+            zoom: 1,
             scaleLimit: {
               min: 0.5,
-              max: 10
+              max: 10,
             },
-            initialTreeDepth: 5, // 树图初始的展开层级（深度），根节点是0，不设置时全部展开
+            initialTreeDepth: -1, // 树图初始的展开层级（深度），根节点是0，不设置时全部展开
             // symbol: 'arrow', // 标记的图形，默认是emptyCircle;circle,rect,roundRect,triangle,diamond,pin,arrow,none
             symbolRotate: 270, // 配合arrow图形使用效果较好
             symbolSize: 16, // 大于0时是圆圈，等于0时不展示，标记的大小
-            itemStyle: { // 树图中每个节点的样式
-              color: '#1890FF', // 节点未展开时的填充色
-              borderColor: 'rgba(255, 144, 0, 1)', // 图形的描边颜色
-              borderWidth: 1, // 描边线宽，为0时无描边
-              borderType: 'dotted', // 描边类型
-              borderCap: 'square', // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
-              shadowColor: 'rgba(0,121,221,0.3)', // 阴影颜色
+            itemStyle: {
+              // 树图中每个节点的样式
+              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)", // 阴影颜色
               shadowBlur: 16, // 图形阴影的模糊大小
-              opacity: 1 // 图形透明度
+              opacity: 1, // 图形透明度
             },
-            label: { // 每个节点对应的文本标签样式
+            label: {
+              // 每个节点对应的文本标签样式
               show: true, // 是否显示标签
               distance: 8, // 文本距离图形元素的距离
-              position: 'left', // 标签位置
-              verticalAlign: 'middle', // 文字垂直对齐方式，默认自动，top，middle，bottom
-              align: 'center', // 文字水平对齐方式，默认自动，left，right，center
-              fontSize: 16, // 字体大小
-              color: '#333', // 字体颜色
-              backgroundColor: '#F0F5FA', // 文字块的背景颜色
-              borderColor: '#1890FF', // 文字块边框颜色
-              borderWidth: 1, // 文字块边框宽度
-              borderType: 'solid', // 文字块边框描边类型 solid dashed dotted
+              position: "bottom", // 标签位置
+              verticalAlign: "middle", // 文字垂直对齐方式，默认自动，top，middle，bottom
+              align: "center", // 文字水平对齐方式，默认自动，left，right，center
+              fontSize: 14, // 字体大小
+              color: "#333", // 字体颜色
+              backgroundColor: "#F0F5FA", // 文字块的背景颜色
+              borderColor: "#1890FF", // 文字块边框颜色
+              borderWidth: 0.5, // 文字块边框宽度
+              borderType: "solid", // 文字块边框描边类型 solid dashed dotted
               borderRadius: 4, // 文字块的圆角
-              padding: [6, 12], // 文字块内边距
-              shadowColor: 'rgba(0,121,221,0.3)', // 文字块的背景阴影颜色
+              padding: [6, 6], // 文字块内边距
+              shadowColor: "rgba(0,121,221,0.3)", // 文字块的背景阴影颜色
               shadowBlur: 6, // 文字块的背景阴影长度
-              width: 60,
+              // width: 60,
               // 文字超出宽度是否截断或者换行；只有配置width时有效
-              overflow: 'truncate', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
-              ellipsis: '...'
+              overflow: "truncate", // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
+              ellipsis: "...",
+              formatter: function (params) {
+            // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
+            console.log("params:", params);
+            let str = params.data.REAL_NAME + "<br/>" + params.data.DEC_LV_NAME;
+            return str;
+          },
             },
-            lineStyle: { // 树图边的样式
-              color: 'rgba(0,0,0,.35)', // 树图边的颜色
+            lineStyle: {
+              // 树图边的样式
+              color: "rgba(0,0,0,.35)", // 树图边的颜色
               width: 2, // 树图边的宽度
               curveness: 0.5, // 树图边的曲度
-              shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
-              shadowBlur: 10 // 图形阴影的模糊大小
+              shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
+              shadowBlur: 10, // 图形阴影的模糊大小
             },
-            emphasis: { // 树图中图形和标签高亮的样式
+            emphasis: {
+              // 树图中图形和标签高亮的样式
               disabled: false, // 是否关闭高亮状态，默认false
               // 在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果
-              focus: 'self', // none不淡出其他图形（默认）；self只聚焦当前高亮的数据图形；series聚焦当前高亮的数据所在系列的所有图形；ancestor聚焦所有祖先节点；descendant聚焦所有子孙节点；relative聚焦所有子孙和祖先节点
-              blurScope: 'coordinateSystem', // 开启focus时，配置淡出的范围，coordinateSystem淡出范围为坐标系（默认）；series淡出范围为系列；global淡出范围为全局
-              itemStyle: { // 该节点的样式
-                color: '#1890FF', // 图形的颜色
+              focus: "relative", // none不淡出其他图形（默认）；self只聚焦当前高亮的数据图形；series聚焦当前高亮的数据所在系列的所有图形；ancestor聚焦所有祖先节点；descendant聚焦所有子孙节点；relative聚焦所有子孙和祖先节点
+              blurScope: "coordinateSystem", // 开启focus时，配置淡出的范围，coordinateSystem淡出范围为坐标系（默认）；series淡出范围为系列；global淡出范围为全局
+              itemStyle: {
+                // 该节点的样式
+                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)', // 树图边的颜色
+              lineStyle: {
+                // 树图边的样式
+                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,
               },
-              label: { // 高亮标签的文本样式
-                color: '#333',
-                fontWeight: 600
-              }
             },
-            blur: { // 淡出状态的相关配置，开启emphasis.focus后有效
+            blur: {
+              // 淡出状态的相关配置，开启emphasis.focus后有效
               itemStyle: {}, // 节点的样式
               lineStyle: {}, // 树图边的样式
-              label: {} // 淡出标签的文本样式
+              label: {}, // 淡出标签的文本样式
             },
-            leaves: { // 叶子节点的特殊配置
-              label: { // 叶子节点的文本标签样式
+            leaves: {
+              // 叶子节点的特殊配置
+              label: {
+                // 叶子节点的文本标签样式
                 distance: 8,
                 // color: '#1890FF',
-                position: 'right',
-                verticalAlign: 'middle',
-                align: 'left'
+                position: "right",
+                verticalAlign: "middle",
+                align: "left",
               },
               itemStyle: {}, // 叶子节点的样式
               emphasis: {}, // 叶子节点高亮状态的配置
               blur: {}, // 叶子节点淡出状态的配置
-              select: {} // 叶子节点选中状态的配置
+              select: {}, // 叶子节点选中状态的配置
             },
             animation: true, // 是否开启动画
             expandAndCollapse: true, // 子树折叠和展开的交互，默认打开
-            animationDuration: 550, // 初始动画的时长
-            animationEasing: 'linear', // 初始动画的缓动效果
+            animationDuration: 500, // 初始动画的时长
+            animationEasing: "linear", // 初始动画的缓动效果
             animationDelay: 0, // 初始动画的延迟
-            animationDurationUpdate: 750, // 数据更新动画的时长
-            animationEasingUpdate: 'cubicInOut', // 数据更新动画的缓动效果
-            animationDelayUpdate: 0 // 数据更新动画的延迟
-          }
-        ]
-      }
-      myChart.setOption(option)
-    }
-  }
-}
+            animationDurationUpdate: 500, // 数据更新动画的时长
+            animationEasingUpdate: "cubicInOut", // 数据更新动画的缓动效果
+            animationDelayUpdate: 0, // 数据更新动画的延迟
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 .echarts-container {
   width: 100%;
-  height: calc( 100vh - 100px )
+  height: calc(100vh - 100px);
 }
 </style>

src/views/atlas/placement-network-ex.vue

@@ -1,14 +1,14 @@
 
 <template>
-  <div>
+  <div class="treeCharBody" v-loading="loading">
     <div v-if="treeChartShow" class="tree-chart">
       <tree-chart :tree-data="treeData" @clickNode="getNodeData" />
     </div>
   </div>
 </template>
 <script>
-import treeChart from '@/components/TreeChart/index.vue'
 import { fetchMainUserInfo, fetchPlacementNetwork, fetchPlacementNetworkList } from '@/api/atlas'
+import treeChart from '@/components/TreeChart/index.vue'
 import tool from '@/utils/tool'
 
 export default {
@@ -38,57 +38,14 @@ export default {
       },
       listTopDeep: 0,
       loading: false,
-      children: [
-        {
-          name: '比较',
-          value: 29,
-          children: [
-            {
-              name: '折线图',
-              value: 1
-            },
-            {
-              name: '面积图',
-              value: 2
-            },
-            {
-              name: '柱状图',
-              value: 3
-            }
-          ]
-        },
-        {
-          name: '趋势趋势趋势趋势趋势趋势趋势趋势趋势趋势',
-          value: 9,
-          children: [
-            {
-              name: '折线图',
-              value: 1
-            },
-            {
-              name: '阶梯图',
-              value: 2
-            },
-            {
-              name: '面积图',
-              value: 3
-            },
-            {
-              name: '堆叠面积图',
-              value: 4
-            }
-          ]
-        },
-        {
-          name: '组成'
-        }
-      ]
+      
     }
   },
-  mounted() {
-    // this.getList()
+  created() {
     this.getMainData(null, true)
   },
+  mounted() {
+  },
   methods: {
     getNodeData(e) {
       console.log(e)
@@ -98,8 +55,8 @@ export default {
     },
     getList() {
       this.treeData = {
-        name: 'test',
-        children: this.children
+        name: null,
+        children: []
       }
     },
     getMainData(userName = null, getList = false) {
@@ -120,14 +77,12 @@ export default {
         that.treeData = {
           name: treeData.USER_NAME
         }
-
         that.topDeep = Number(treeData.TOP_NETWORK_DEEP)
         that.listPeriodNum = treeData.listPeriodNum
         if (getList) {
           // that.getListData()
-          that.getChildData(treeData)
         }
-
+        this.getChildData(treeData)
         setTimeout(() => {
           that.loading = false
           // that.treeChartShow = true
@@ -137,38 +92,23 @@ export default {
     getChildData(data, node) {
       const that = this
       const userId = data.USER_ID
-      // const that = data
-      // if (that.leaf) {
-      //   return ''
-      // }
-      // if (that.isExpanded) {
-      //   return ''
-      // }
+      if (that.leaf) {
+        return ''
+      }
+      if (that.isExpanded) {
+        return ''
+      }
       if (data.children !== null && data.children.length > 0) {
         return ''
       }
-      // that.displayNone = ''
-
       this.loading = true
       fetchPlacementNetwork({ id: userId, deep: this.expandDeep, periodNum: this.periodNum }).then(response => {
-        // this.$refs.tree.updateKeyChildren(userId, response.data.allData)
         this.listPeriodNum = response.data.periodNum
-        // that.displayNone = 'display-none'
         data.isExpanded = true
-        const allData = response.data.allData
-        // const allData = that.traversalTree(data,that)
-        allData.forEach((item) => {
-          console.log(item)
-          item.name = item.USER_NAME
-          if (item.children && item.children.length > 0) {
-            console.log(item.children)
-            item.children.forEach((child) => {
-              child.name = child.USER_NAME
-            })
-          }
-        })
-        // that.treeData.children = that.traversalTree( allData )
-        console.log(that.traversalTree(allData))
+        const resAllData = response.data.allData
+        console.log( response.data)
+
+        const allData = that.traversalTree(resAllData,that)
         that.treeData.children = allData
 
         that.treeChartShow = true
@@ -179,17 +119,14 @@ export default {
     },
     traversalTree(tree) {
       const that = this
-      console.log(tree)
       tree.forEach((item) => {
-        console.log(item)
         item.name = item.USER_NAME
         if (item.children && item.children.length > 0) {
-          console.log(item.children)
-          item.children.forEach((child) => {
-            that.traversalTree(child)
-          })
+          that.traversalTree(item.children)
+           
         }
       })
+      return tree
     },
     getListData(page, pageSize) {
       this.filterForm.page = page
@@ -197,7 +134,7 @@ export default {
       fetchPlacementNetworkList(this.filterForm).then(response => {
         this.allData = response.data
         this.listTopDeep = response.data.listTopDeep
-        // this.treeData.children = response.data.list
+        this.treeData.children = response.data.list
         setTimeout(() => {
           this.loading = false
         }, 1.5 * 1000)
@@ -208,6 +145,9 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.treeCharBody{
+  min-height: calc(100vh - 100px);
+}
 .tree-chart{
   width: 100%;
   height: 100%;