devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue实现echarts树图修改节点图片，修改连线颜色，鼠标悬停显示详情，鼠标右键弹出菜单，搜索，导出PNG，高亮，查看节点是否还有子节点，修改树图的展示方式_echarts tree 节点右击菜单

作者：AllinToyou | 2024-04-15 11:25:48

赞

踩

echarts tree 节点右击菜单

其实这些效果之前都有用js写过，但是最近在写vue项目，里面的些许语法还是有些不一样的，所以还是写一遍文章总结一下，下次遇到就可以直接用了。

如果想看js写法，可以看我别的文章

首先，实现效果入下图：

下面简单介绍一下每种实现方式

1.将树图的节点修改成图片以及修改连线的颜色

代码布局如下： 

 主要代码：

symbolSize: [30, 30],
  1. /**
  2. * 遍历树节点信息
  3. * @param nodes 拓扑图节点数据
  4. * 通过某种状态区分显示拓扑图的节点图片或连线颜色
  5.  * */
  6.     readNodes(nodes) {
  7.       for (const item of nodes) { // js遍历树形数组结构
  8.         if (item.children && item.children.length) {
  9.           this.readNodes(item.children)
  10.         }
  11.         if (item.name == '服务器') {
  12.           item.symbol = 'image://' + require('@/assets/topo/server_online_unreg.png');
  13.           // 修改连线颜色
  14.           item.lineStyle = {
  15.             color: '#ff0000'
  16.           }
  17.         } else {
  18.           item.symbol = 'image://' + require('@/assets/topo/internet.png');
  19.           item.lineStyle = {
  20.             color: '#2E8B57'
  21.           }
  22.         }
  23.       }
  24.     },

2.添加鼠标悬停事件

代码布局如下：

 主要代码：

formatter: this.formatterHover// 修改鼠标悬停显示的内容
  1. /**
  2.      * 鼠标悬停显示详情
  3.      * @param params
  4.      * @returns {string}
  5.      */
  6.     formatterHover(params) {
  7.       // console.log(params);
  8.       var deviceType = params.data.type;
  9.       var imgPath = params.data.symbol;
  10.       // 图片地址截取，因为echarts修改图片的时候有一个------image://---前缀，前缀后面的才是图片真正的地址
  11.       var imgPathSrc = imgPath.split('image://')[1];
  12.       // console.log('str',imgPathSrc);
  13.       if (deviceType === 'Internet' || deviceType === 'hub') {
  14.         return "<img src='" + imgPathSrc + " ' width='30px' height='30px'>" + '<span style="padding:0 5px;font-size: 14px;">' + params.data.name + '</span>';
  15.       } if (deviceType === 'switch') {
  16.         return "<img src='" + imgPathSrc + " ' width='30px' height='30px'>" + '<span style="padding: 0 5px;font-size: 14px;">设备类型：' + params.data.name + '</span>' + '<br>' +
  17.             '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">IP：' + params.data.IP + '</span>' + '<br>' +
  18.             '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">MAC：' + params.data.MAC + '</span>' + '<br>';
  19.         // +'<button style="padding:2px 5px;border:none;outline:none;color:#ffffff;border-radius: 5px;background:rgba(0,0,0,0.5);"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> IP列表</button>'
  20.         // +'<button style="padding:2px 5px;border:none;outline:none;color:#ffffff;border-radius: 5px;background:rgba(0,0,0,0.5);margin-left: 10px;"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> MAC列表</button>';
  21.       } else {
  22.         return "<img src='" + imgPathSrc + " ' width='30px' height='30px'>" + '<span style="padding: 0 5px;font-size: 14px;">设备类型：' + params.data.name + '</span>' + '<br>' +
  23.             '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">IP：' + params.data.IP + '</span>' + '<br>' +
  24.             '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">MAC：' + params.data.MAC + '</span>' + '<br>';
  25.       }
  26.     },

3.鼠标右键弹出菜单

代码布局如下：

 

主要代码：

  1. <style scoped>
  2.   .menu{
  3.     /*这个样式不写，右键弹框会一直显示在画布的左下角*/
  4.     position: absolute;
  5.     background: rgba(255, 255, 255, 1);
  6.     border-radius: 5px;
  7.     left: -99999px;
  8.     top: -999999px;
  9.   }
  10.   .menu ul{
  11.     list-style: none;
  12.     padding: 0;
  13.     margin: 0;
  14.   }
  15.   .menu ul li{
  16.     cursor: pointer;
  17.     padding: 5px 10px;
  18.     color: #000000;
  19.     border-bottom: 1px dashed #a9a9a9;
  20.     font-size: 14px;
  21.   }
  22.   .menu ul li:last-child{
  23.     border-bottom: none;
  24.   }
  25. </style>
  1. <!--右键弹出菜单-->
  2.     <div ref="rightMenu" class="menu" style="display: none;">
  3.       <ul>
  4.         <li>下线</li>
  5.         <li>上线</li>
  6.         <li>掉线</li>
  7.       </ul>
  8.     </div>
  1. <div class="app-container" @contextmenu.prevent="" @click="mainClick">
  2.  
  3. </div>
  1. /**
  2. * 鼠标右键，显示右键菜单
  3. */
  4. echarts.init(chart).on('contextmenu', function(params) {
  5.    // console.log('params', params)
  6.     that.contextmenu = true
  7.     // 去掉悬停
  8.     that.$refs.main.children[1].style.display = 'none'
  9.     that.$refs.rightMenu.style.display = 'block';
  10.     // // //让自定义菜单随鼠标的箭头位置移动
  11.     that.$refs.rightMenu.style.left = params.event.offsetX + 45 + 'px'
  12.     that.$refs.rightMenu.style.top = params.event.offsetY + 45 + 'px'
  13. });
  1. /**
  2. * 点击页面其它地方时，隐藏右键菜单
  3. * */
  4. mainClick() {
  5.    this.contextmenu = false
  6.    this.$refs.rightMenu.style.display = 'none';
  7. },

 注：以上代码实现右键菜单是没有问题的，但是后期在开发的过程中，发现当在浏览器左下角，右下角，最右边点击时，菜单会被覆盖显示不全，所以对菜单显示的位置做了一些调整，调整完后效果如下：

 主要代码：<至于里面的数字，具体要根据自己的项目进行修改>

  1. /**
  2. * smallWidth:即能容下弹框的最小宽度=document.body.clientWidth<浏览器窗口宽度> - 210<左侧导航菜单宽度> - params.event.offsetX<当前点击距离左上角宽度>
  3. * smallHeight:即能容下弹框的最小高度=document.body.clientHeight<浏览器窗口高度> - 120<上方导航菜单宽度> - params.event.offsetY<当前点击距离左上角高度>
  4. * 140，在浏览器中console.log打印，差不多smallWidth小于140的时候，右键菜单宽度就放不下了
  5. * 256，在浏览器中console.log打印，差不多smallHeight小于256的时候，右键菜单高度就放不下了
  6. * 接下来右键菜单的显示，差不多就是当前点击的位置加或减去右键菜单宽或高的长度
  7. * */
  8. const smallWidth = document.body.clientWidth - 210 - params.event.offsetX
  9. const smallHeight = document.body.clientHeight - 120 - params.event.offsetY
  10. // console.log('smallWidth', smallWidth)
  11. // console.log('smallHeight', smallHeight)
  12. if (smallHeight <= 256 && smallWidth > 140) { // 高度不够，宽度够
  13.     // 让自定义菜单随鼠标的箭头位置移动
  14.     that.$refs.rightMenu.style.left = params.event.offsetX + 45 + 'px'
  15.     that.$refs.rightMenu.style.top = params.event.offsetY - 200 + 'px'
  16. } else if (smallHeight > 256 && smallWidth <= 140) { // 高度够，宽度不够
  17.     that.$refs.rightMenu.style.left = params.event.offsetX - 52 + 'px'
  18.     that.$refs.rightMenu.style.top = params.event.offsetY + 45 + 'px'
  19. } else if (smallHeight <= 256 && smallWidth <= 140) { // 高度不够，宽度不够
  20.     that.$refs.rightMenu.style.left = params.event.offsetX - 52 + 'px'
  21.     that.$refs.rightMenu.style.top = params.event.offsetY - 200 + 'px'
  22. } else { // 高度和宽度都够
  23.     that.$refs.rightMenu.style.left = params.event.offsetX + 45 + 'px'
  24.     that.$refs.rightMenu.style.top = params.event.offsetY + 45 + 'px'
  25. }

4.搜索

代码布局如下：

 主要代码：

  1. <el-input v-model="inputSearch" type="text" placeholder="请输入名称" style="width: 200px;" @keyup.enter.native="handleFilter"/>
  2.     <el-button type="primary" icon="el-icon-search" size="mini" @click="handleFilter">搜索</el-button>
inputSearch: '', // 搜索框
  1.  /**
  2.      * 搜索,输入名称时，实现搜索功能
  3.      * */
  4.     handleFilter() {
  5.       const that = this
  6.       var num = 0; // 记录查询到节点的数量
  7.       function readNodes(nodes) {
  8.         for (const item of nodes) { // js遍历树形数组结构
  9.           if (item.children && item.children.length) {
  10.             readNodes(item.children)
  11.           }
  12.           // 查询，名称中包含输入值就修改label颜色和字体大小
  13.           if (item.name.indexOf(that.inputSearch) >= 0 && that.inputSearch != '') {
  14.             item.label = {
  15.               color: 'red',
  16.               fontSize: '15'
  17.             };
  18.             num++;
  19.           } else { // 否则为默认颜色和大小
  20.             item.label = {
  21.               color: '#666',
  22.               fontSize: '9'
  23.             };
  24.           }
  25.         }
  26.       }
  27.       readNodes(this.dataTree); // 调用时，要给data加[],因为原本的data不是一个正常的数组结构
  28.       if (num > 0) { // 查询节点数量大于0的时候展开所有层级
  29.         this.defaultOpt.series[0].initialTreeDepth = -1;
  30.       } else { // 否则恢复初始的层级
  31.         this.defaultOpt.series[0].initialTreeDepth = 2;
  32.       }
  33.       const chart = this.$refs.main
  34.       if (chart) {
  35.         echarts.init(chart).setOption(this.defaultOpt); // 重新设置一遍树图，不然不起效果
  36.       }
  37.     },

5.导出PNG

代码布局：

主要代码：

  1. toolbox: {
  2.      show: true,
  3.      top: 20,
  4.      left: 20,
  5.      feature: {
  6.           restore: {
  7.               title: '刷新'// 刷新echarts图标
  8.           },
  9.           saveAsImage: {
  10.            title: '下载图片', // 鼠标悬停在下载图标上时，显示的文字
  11.            name: 'network-topology'// 下载图片的文件名为network-topology.png
  12.           }
  13.         }
  14.  },

6.高亮：这个高亮的效果我感觉不是很好，但是如果有朋友需要的话，就是下面用法

代码布局：

主要代码：

  1. emphasis: { // 高亮，个人感觉这个高亮的效果不是很好
  2.    focus: 'descendant'
  3. },

7.查看节点是否还有子节点

代码布局：

主要代码：

  1. symbol: function(params, params1) {
  2.  /**
  3. * 自定义图片后，不知道是否还有子节点未展开
  4. * 通过打印，发现没有展开的节点，和最后一层子节点的collapsed属性都为true
  5. * 所以判断collapsed为true，并且没有孩子节点的时候，就是还有没展开的子节点
  6. * 修改label的样式，来判断是否还存在子节点没展开
  7.  */
  8. // console.log('params11111111111111111', params1)
  9. if (params1.collapsed == true && params1.data.children.length > 0) {
  10.     params1.data.label = {
  11.           color: '#0099cc',
  12.           fontSize: '13',
  13.           fontWeight: 'bold'
  14.        }
  15.     }
  16. },
  1. /**
  2. * 鼠标单机节点
  3. * (1)隐藏右键菜单
  4. * (2)判断子节点是否展开，修改label的样式
  5. */
  6. echarts.init(chart).on('click', function(params) {
  7.    that.contextmenu = false
  8.    that.$refs.rightMenu.style.display = 'none';
  9.    // 解决树图点击展开图片不显示问题
  10.    // echarts.init(chart).resize()
  11.    console.log('params', params)
  12.    if (params.collapsed == true && params.data.children.length > 0) {
  13.         params.data.label = {
  14.         color: '#0099cc',
  15.         fontSize: '13',
  16.         fontWeight: 'bold'
  17.       }
  18.    } else {
  19.         params.data.label = {
  20.         color: '#ffffff',
  21.         fontSize: '9',
  22.         fontWeight: 'normal'
  23.        }
  24.     }
  25.     echarts.init(chart).resize()
  26. });

8.修改树图的展示方式

注：起初只是简单的实现了切换的效果，并没有注重细节主要如下：

代码布局：

主要代码：

  1.  <el-button size="mini" @click="lrClick('LR')">左到右</el-button>
  2.     <el-button size="mini" @click="rlClick('RL')">右到左</el-button>
  3.     <el-button size="mini" @click="tbClick('TB')">上到下</el-button>
  4.     <el-button size="mini" @click="btClick('BT')">下到上</el-button>
  1. /**
  2.      * 左到右按钮点击
  3.      * @param option 树图属性LR
  4.      * */
  5.     lrClick(option) {
  6.       this.treeDisplay(option)
  7.     },
  8.     /**
  9.      * 右到左按钮点击
  10.      * @param option 树图属性RL
  11.      * */
  12.     rlClick(option) {
  13.       this.treeDisplay(option)
  14.     },
  15.     /**
  16.      * 上到下按钮点击
  17.      * @param option 树图属性TB
  18.      * */
  19.     tbClick(option) {
  20.       this.treeDisplay(option)
  21.     },
  22.     /**
  23.      * 下到上按钮点击
  24.      * @param option 树图属性BT
  25.      * */
  26.     btClick(option) {
  27.       this.treeDisplay(option)
  28.     },
  29.     /**
  30.      * 左到右，右到左，上到下，下到上按钮点击时，对拓扑属性的设置
  31.      * */
  32.     treeDisplay(option) {
  33.       this.defaultOpt.series[0].orient = option;
  34.       const chart = this.$refs.main
  35.       if (chart) {
  36.         echarts.init(chart).setOption(this.defaultOpt);
  37.       }
  38.     }

后期在实际开发中，发现，切换后，结点的label会挤在一起，非常丑，所以要对每种展示方式的label也要做调整，具体如下：

代码布局：

主要代码：

  1. type: 'tree',
  2.                 data: this.dataTree,
  3.                 left: '10%',
  4.                 right: '2%',
  5.                 top: '16%',
  6.                 bottom: '8%',
  7.                 label: {
  8.                   position: 'top',
  9.                   rotate: -90,
  10.                   verticalAlign: 'middle',
  11.                   align: 'right',
  12.                   color: '#fff',
  13.                   fontSize: 9
  14.                 },
  15.                 orient: 'TB',
  16.                 leaves: {
  17.                   label: {
  18.                     position: 'bottom',
  19.                     rotate: -90,
  20.                     verticalAlign: 'middle',
  21.                     align: 'left'
  22.                   }
  23.                 },
  24.                 symbolSize: [30, 30],
  1. /**
  2.      * 左到右按钮点击
  3.      * @param option 树图属性LR
  4.      * */
  5.     lrClick(option) {
  6.       this.treeDisplay(option)
  7.     },
  8.     /**
  9.      * 右到左按钮点击
  10.      * @param option 树图属性RL
  11.      * */
  12.     rlClick(option) {
  13.       this.treeDisplay(option)
  14.     },
  15.     /**
  16.      * 上到下按钮点击
  17.      * @param option 树图属性TB
  18.      * */
  19.     tbClick(option) {
  20.       this.treeDisplay(option)
  21.     },
  22.     /**
  23.      * 下到上按钮点击
  24.      * @param option 树图属性BT
  25.      * */
  26.     btClick(option) {
  27.       this.treeDisplay(option)
  28.     },
  29.     /**
  30.      * 左到右，右到左，上到下，下到上按钮点击时，对拓扑属性的设置
  31.      * orient:修改拓扑图展示的方向
  32.      * label、leaves修改结点旁边的文字展示
  33.      * */
  34.     treeDisplay(option) {
  35.       this.defaultOpt.series[0].orient = option;
  36.       // console.log('option', option)
  37.       if (option == 'LR') {
  38.         this.defaultOpt.series[0].label = {
  39.           position: 'left',
  40.           rotate: 0,
  41.           verticalAlign: 'middle',
  42.           align: 'right',
  43.           color: '#fff',
  44.           fontSize: 9
  45.         }
  46.         this.defaultOpt.series[0].leaves = {
  47.           label: {
  48.             position: 'right',
  49.             rotate: 0,
  50.             verticalAlign: 'middle',
  51.             align: 'left'
  52.           }
  53.         }
  54.       }
  55.       if (option == 'RL') {
  56.         this.defaultOpt.series[0].label = {
  57.           position: 'right',
  58.           rotate: 0,
  59.           verticalAlign: 'middle',
  60.           align: 'left',
  61.           color: '#fff',
  62.           fontSize: 9
  63.         }
  64.         this.defaultOpt.series[0].leaves = {
  65.           label: {
  66.             position: 'left',
  67.             rotate: 0,
  68.             verticalAlign: 'middle',
  69.             align: 'right'
  70.           }
  71.         }
  72.       }
  73.       if (option == 'TB') {
  74.         this.defaultOpt.series[0].label = {
  75.           position: 'top',
  76.           rotate: -90,
  77.           verticalAlign: 'middle',
  78.           align: 'right',
  79.           color: '#fff',
  80.           fontSize: 9
  81.         }
  82.         this.defaultOpt.series[0].leaves = {
  83.           label: {
  84.             position: 'bottom',
  85.             rotate: -90,
  86.             verticalAlign: 'middle',
  87.             align: 'left'
  88.           }
  89.         }
  90.       }
  91.       if (option == 'BT') {
  92.         this.defaultOpt.series[0].label = {
  93.           position: 'bottom',
  94.           rotate: 90,
  95.           verticalAlign: 'middle',
  96.           align: 'right',
  97.           color: '#fff',
  98.           fontSize: 9
  99.         }
  100.         this.defaultOpt.series[0].leaves = {
  101.           label: {
  102.             position: 'top',
  103.             rotate: 90,
  104.             verticalAlign: 'middle',
  105.             align: 'left'
  106.           }
  107.         }
  108.       }
  109.       const chart = this.$refs.main
  110.       if (chart) {
  111.         echarts.init(chart).setOption(this.defaultOpt);
  112.       }
  113.     },

 完整代码：

 topoTree.js

  1. import Mock from 'mockjs'
  2.  
  3. const tree = [
  4.   {
  5.     'id': '0',
  6.     'name': '外部网络',
  7.     'type': 'Internet',
  8.     'children': [
  9.       {
  10.         'id': '1',
  11.         'name': '交换机',
  12.         'type': 'switch',
  13.         'IP': '192.168.30.126',
  14.         'MAC': 'b0:98:6e:bf:6r:4c',
  15.         'deviceType': '交换机',
  16.         'deviceNum': 'HUAWEI',
  17.         'children': [
  18.           {
  19.             'id': '2',
  20.             'name': '笔记本',
  21.             'type': 'switch',
  22.             'IP': '192.168.30.126',
  23.             'MAC': 'b0:98:6e:bf:6r:4c'
  24.           },
  25.           {
  26.             'id': '3',
  27.             'name': '计算机',
  28.             'type': 'computer',
  29.             'IP': '192.168.30.126',
  30.             'MAC': 'b0:98:6e:bf:6r:4c',
  31.             'children': [
  32.               {
  33.                 'id': '4',
  34.                 'name': '计算机1',
  35.                 'type': 'computer',
  36.                 'IP': '192.168.30.126',
  37.                 'MAC': 'b0:98:6e:bf:6r:4c'
  38.               },
  39.               {
  40.                 'id': '5',
  41.                 'name': '计算机2',
  42.                 'type': 'computer',
  43.                 'IP': '192.168.30.126',
  44.                 'MAC': 'b0:98:6e:bf:6r:4c'
  45.               },
  46.               {
  47.                 'id': '6',
  48.                 'name': '计算机3',
  49.                 'type': 'computer',
  50.                 'IP': '192.168.30.126',
  51.                 'MAC': 'b0:98:6e:bf:6r:4c'
  52.               },
  53.               {
  54.                 'id': '7',
  55.                 'name': '计算机4',
  56.                 'type': 'computer',
  57.                 'IP': '192.168.30.126',
  58.                 'MAC': 'b0:98:6e:bf:6r:4c',
  59.                 'lastLoginTime': '2020-8-26'
  60.               }
  61.             ]
  62.           },
  63.           {
  64.             'id': '8',
  65.             'name': '路由器',
  66.             'type': 'rooter',
  67.             'IP': '192.168.30.126',
  68.             'MAC': 'b0:98:6e:bf:6r:4c',
  69.             'deviceType': '路由器'
  70.           },
  71.           {
  72.             'id': '9',
  73.             'name': '服务器',
  74.             'type': 'service',
  75.             'IP': '192.168.30.126',
  76.             'MAC': 'b0:98:6e:bf:6r:4c',
  77.             'deviceType': '服务器'
  78.           },
  79.           {
  80.             'id': '10',
  81.             'name': '打印机',
  82.             'type': 'print',
  83.             'IP': '192.168.30.126',
  84.             'MAC': 'b0:98:6e:bf:6r:4c',
  85.             'deviceType': '打印机'
  86.           },
  87.           {
  88.             'id': '11',
  89.             'name': '计算机',
  90.             'type': 'computer',
  91.             'IP': '192.168.30.126',
  92.             'MAC': 'b0:98:6e:bf:6r:4c',
  93.             'lastLoginTime': '2020-8-26'
  94.           }
  95.         ]
  96.       },
  97.       {
  98.         'id': '12',
  99.         'name': '无线交换机',
  100.         'type': 'switch',
  101.         'IP': '192.168.30.126',
  102.         'MAC': 'b0:98:6e:bf:6r:4c',
  103.         'deviceType': '交换机',
  104.         'deviceNum': 'HUAWEI',
  105.         'children': [
  106.           {
  107.             'id': '13',
  108.             'name': '手机',
  109.             'type': 'phone',
  110.             'IP': '192.168.30.126',
  111.             'MAC': 'b0:98:6e:bf:6r:4c',
  112.             'deviceType': '手机'
  113.           },
  114.           {
  115.             'id': '14',
  116.             'name': '平板',
  117.             'type': 'phone',
  118.             'IP': '192.168.30.126',
  119.             'MAC': 'b0:98:6e:bf:6r:4c',
  120.             'deviceType': '平板'
  121.           }
  122.         ]
  123.       },
  124.       {
  125.         'id': '15',
  126.         'name': 'hub',
  127.         'type': 'hub',
  128.         'children': [
  129.           {
  130.             'id': '16',
  131.             'name': '计算机',
  132.             'type': 'computer',
  133.             'IP': '192.168.30.126',
  134.             'MAC': 'b0:98:6e:bf:6r:4c',
  135.             'deviceType': '计算机'
  136.           },
  137.           {
  138.             'id': '17',
  139.             'name': '笔记本',
  140.             'type': 'phone',
  141.             'IP': '192.168.30.126',
  142.             'MAC': 'b0:98:6e:bf:6r:4c',
  143.             'deviceType': '手机'
  144.           },
  145.           {
  146.             'id': '18',
  147.             'name': '打印机',
  148.             'type': 'print',
  149.             'IP': '192.168.30.126',
  150.             'MAC': 'b0:98:6e:bf:6r:4c',
  151.             'deviceType': '打印机'
  152.           },
  153.           {
  154.             'id': '19',
  155.             'name': '路由器',
  156.             'type': 'rooter',
  157.             'IP': '192.168.30.126',
  158.             'MAC': 'b0:98:6e:bf:6r:4c',
  159.             'deviceType': '路由器'
  160.           }
  161.         ]
  162.       }
  163.     ]
  164.   }
  165. ]
  166.  
  167. Mock.mock('/topo/tree', 'get', tree)
  168. export default [
  169.  
  170. ]

index.vue

  1. <template>
  2.   <div class="app-container" @contextmenu.prevent="" @click="mainClick">
  3.     <el-input v-model="inputSearch" type="text" placeholder="请输入名称" style="width: 200px;" @keyup.enter.native="handleFilter"/>
  4.     <el-button type="primary" icon="el-icon-search" size="mini" @click="handleFilter">搜索</el-button>
  5.     <el-button size="mini" @click="lrClick('LR')">左到右</el-button>
  6.     <el-button size="mini" @click="rlClick('RL')">右到左</el-button>
  7.     <el-button size="mini" @click="tbClick('TB')">上到下</el-button>
  8.     <el-button size="mini" @click="btClick('BT')">下到上</el-button>
  9.     <div ref="main" class="app-container"></div>
  10.     <!--右键弹出菜单-->
  11.     <div ref="rightMenu" class="menu" style="display: none;">
  12.       <ul>
  13.         <li>下线</li>
  14.         <li>上线</li>
  15.         <li>掉线</li>
  16.       </ul>
  17.     </div>
  18.   </div>
  19. </template>
  20.  
  21. <script>
  22. import * as echarts from 'echarts'
  23. require('echarts/theme/macarons')
  24. import axios from 'axios'
  25.  
  26. export default {
  27.   name: 'TopologyDisplay',
  28.   props: {
  29.   },
  30.   data() {
  31.     return {
  32.       inputSearch: '', // 搜索框
  33.       dataTree: [], // data数据
  34.       defaultOpt: {}, // 拓扑图属性设置
  35.       contextmenu: false // 鼠标右键事件
  36.     }
  37.   },
  38.   watch: {
  39.   },
  40.   mounted: function() {
  41.     this.setOptions()
  42.     this.day_init()
  43.   },
  44.   created() {
  45.   },
  46.   methods: {
  47.     /**
  48.      * 实现自适应
  49.      * */
  50.     day_init() {
  51.       const self = this; // 因为箭头函数会改变this指向，指向windows。所以先把this保存
  52.       const todaypieId = this.$refs.main
  53.       if (!todaypieId) {
  54.         return false;
  55.       } else {
  56.         setTimeout(() => {
  57.           window.onresize = function() {
  58.             //   self.chart = echarts.init(self.$refs.myEchart);
  59.             self.chart_today = echarts.init(
  60.               todaypieId
  61.             );
  62.             self.chart_today.resize();
  63.           };
  64.         }, 20);
  65.       }
  66.     },
  67.     /**
  68.      * 遍历树节点信息
  69.      * @param nodes 拓扑图节点数据
  70.      * 通过某种状态区分显示拓扑图的节点图片或连线颜色
  71.      * */
  72.     readNodes(nodes) {
  73.       for (const item of nodes) { // js遍历树形数组结构
  74.         if (item.children && item.children.length) {
  75.           this.readNodes(item.children)
  76.         }
  77.         if (item.name == '服务器') {
  78.           item.symbol = 'image://' + require('@/assets/topo/server_online_unreg.png');
  79.           // 修改连线颜色
  80.           item.lineStyle = {
  81.             color: '#ff0000'
  82.           }
  83.         } else {
  84.           item.symbol = 'image://' + require('@/assets/topo/internet.png');
  85.           item.lineStyle = {
  86.             color: '#2E8B57'
  87.           }
  88.         }
  89.       }
  90.     },
  91.     /**
  92.      * 对拓扑图属性的设置
  93.      * */
  94.     setOptions() {
  95.       axios.get('/topo/tree').then(res => {
  96.         console.log('树节点数据', JSON.parse(JSON.stringify(res.data)));
  97.         this.dataTree = res.data
  98.         if (this.dataTree) {
  99.           this.readNodes(this.dataTree) // 在设置属性之前遍历显示图片，否则节点图片不生效
  100.           this.defaultOpt = {
  101.             tooltip: {
  102.               trigger: 'item',
  103.               triggerOn: 'mousemove',
  104.               enterable: true, // 鼠标是否可进入提示框浮层中
  105.               formatter: this.formatterHover// 修改鼠标悬停显示的内容
  106.             },
  107.             toolbox: {
  108.               show: true,
  109.               top: 20,
  110.               left: 20,
  111.               feature: {
  112.                 restore: {
  113.                   title: '刷新'// 刷新echarts图标
  114.                 },
  115.                 saveAsImage: {
  116.                   title: '下载图片', // 鼠标悬停在下载图标上时，显示的文字
  117.                   name: 'network-topology'// 下载图片的文件名为network-topology.png
  118.                 }
  119.               }
  120.             },
  121.             series: [
  122.               {
  123.                 type: 'tree',
  124.                 data: this.dataTree,
  125.                 left: '10%',
  126.                 right: '2%',
  127.                 top: '16%',
  128.                 bottom: '8%',
  129.                 label: {
  130.                   position: 'top',
  131.                   rotate: -90,
  132.                   verticalAlign: 'middle',
  133.                   align: 'right',
  134.                   color: '#fff',
  135.                   fontSize: 9
  136.                 },
  137.                 orient: 'TB',
  138.                 leaves: {
  139.                   label: {
  140.                     position: 'bottom',
  141.                     rotate: -90,
  142.                     verticalAlign: 'middle',
  143.                     align: 'left'
  144.                   }
  145.                 },
  146.                 symbolSize: [30, 30],
  147.                 symbol: function(params, params1) {
  148.                   /**
  149.                    * 自定义图片后，不知道是否还有子节点未展开
  150.                    * 通过打印，发现没有展开的节点，和最后一层子节点的collapsed属性都为true
  151.                    * 所以判断collapsed为true，并且没有孩子节点的时候，就是还有没展开的子节点
  152.                    * 修改label的样式，来判断是否还存在子节点没展开
  153.                    */
  154.                   // console.log('params11111111111111111', params1)
  155.                   if (params1.collapsed == true && params1.data.children.length > 0) {
  156.                     params1.data.label = {
  157.                       color: '#0099cc',
  158.                       fontSize: '13',
  159.                       fontWeight: 'bold'
  160.                     }
  161.                   }
  162.                 },
  163.                 edgeForkPosition: '72%',
  164.                 emphasis: { // 高亮，个人感觉这个高亮的效果不是很好
  165.                   focus: 'descendant'
  166.                 },
  167.                 initialTreeDepth: 2, // 树图初始展开层级
  168.                 roam: true, // 鼠标缩放，拖拽整颗树
  169.                 expandAndCollapse: true, // 无关的子树折叠收起
  170.                 animationDuration: 550,
  171.                 animationDurationUpdate: 750,
  172.                 width: '85%'// 组件宽度
  173.               }
  174.             ]
  175.           }
  176.           const chart = this.$refs.main
  177.           if (chart) {
  178.             const that = this
  179.             // console.log('echarts', echarts)
  180.             echarts.init(chart).setOption(this.defaultOpt) // 将画布添加到页面中
  181.             /**
  182.              * 鼠标右键，显示右键菜单
  183.              */
  184.             echarts.init(chart).on('contextmenu', function(params) {
  185.               // console.log('params', params)
  186.               that.contextmenu = true
  187.               // 去掉悬停
  188.               that.$refs.main.children[1].style.display = 'none'
  189.               that.$refs.rightMenu.style.display = 'block';
  190.               // // //让自定义菜单随鼠标的箭头位置移动
  191.               that.$refs.rightMenu.style.left = params.event.offsetX + 45 + 'px'
  192.               that.$refs.rightMenu.style.top = params.event.offsetY + 45 + 'px'
  193.             });
  194.             /**
  195.              * 鼠标单机节点
  196.              * (1)隐藏右键菜单
  197.              * (2)判断子节点是否展开，修改label的样式
  198.              */
  199.             echarts.init(chart).on('click', function(params) {
  200.               that.contextmenu = false
  201.               that.$refs.rightMenu.style.display = 'none';
  202.               // 解决树图点击展开图片不显示问题
  203.               // echarts.init(chart).resize()
  204.               // console.log('params.collapsed', params.collapsed)
  205.               if (params.collapsed == true) {
  206.                 params.data.label = {
  207.                   color: '#0099cc',
  208.                   fontSize: '13',
  209.                   fontWeight: 'bold'
  210.                 }
  211.               } else {
  212.                 params.data.label = {
  213.                   color: '#ffffff',
  214.                   fontSize: '9',
  215.                   fontWeight: 'normal'
  216.                 }
  217.               }
  218.               echarts.init(chart).resize() // 不写修改的样式不生效
  219.             });
  220.             // 解决树图首次加载图片不显示问题
  221.             echarts.init(chart).resize()
  222.           }
  223.         }
  224.       })
  225.     },
  226.     /**
  227.      * 点击页面其它地方时，隐藏右键菜单
  228.      * */
  229.     mainClick() {
  230.       this.contextmenu = false
  231.       this.$refs.rightMenu.style.display = 'none';
  232.     },
  233.     /**
  234.      * 鼠标悬停显示详情
  235.      * @param params
  236.      * @returns {string}
  237.      */
  238.     formatterHover(params) {
  239.       // console.log(params);
  240.       var deviceType = params.data.type;
  241.       var imgPath = params.data.symbol;
  242.       // 图片地址截取，因为echarts修改图片的时候有一个------image://---前缀，前缀后面的才是图片真正的地址
  243.       var imgPathSrc = imgPath.split('image://')[1];
  244.       // console.log('str',imgPathSrc);
  245.       if (deviceType === 'Internet' || deviceType === 'hub') {
  246.         return "<img src='" + imgPathSrc + " ' width='30px' height='30px'>" + '<span style="padding:0 5px;font-size: 14px;">' + params.data.name + '</span>';
  247.       } if (deviceType === 'switch') {
  248.         return "<img src='" + imgPathSrc + " ' width='30px' height='30px'>" + '<span style="padding: 0 5px;font-size: 14px;">设备类型：' + params.data.name + '</span>' + '<br>' +
  249.             '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">IP：' + params.data.IP + '</span>' + '<br>' +
  250.             '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">MAC：' + params.data.MAC + '</span>' + '<br>';
  251.         // +'<button style="padding:2px 5px;border:none;outline:none;color:#ffffff;border-radius: 5px;background:rgba(0,0,0,0.5);"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> IP列表</button>'
  252.         // +'<button style="padding:2px 5px;border:none;outline:none;color:#ffffff;border-radius: 5px;background:rgba(0,0,0,0.5);margin-left: 10px;"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> MAC列表</button>';
  253.       } else {
  254.         return "<img src='" + imgPathSrc + " ' width='30px' height='30px'>" + '<span style="padding: 0 5px;font-size: 14px;">设备类型：' + params.data.name + '</span>' + '<br>' +
  255.             '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">IP：' + params.data.IP + '</span>' + '<br>' +
  256.             '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">MAC：' + params.data.MAC + '</span>' + '<br>';
  257.       }
  258.     },
  259.     /**
  260.      * 搜索,输入名称时，实现搜索功能
  261.      * */
  262.     handleFilter() {
  263.       const that = this
  264.       var num = 0; // 记录查询到节点的数量
  265.       function readNodes(nodes) {
  266.         for (const item of nodes) { // js遍历树形数组结构
  267.           if (item.children && item.children.length) {
  268.             readNodes(item.children)
  269.           }
  270.           // 查询，名称中包含输入值就修改label颜色和字体大小
  271.           if (item.name.indexOf(that.inputSearch) >= 0 && that.inputSearch != '') {
  272.             item.label = {
  273.               color: 'red',
  274.               fontSize: '15'
  275.             };
  276.             num++;
  277.           } else { // 否则为默认颜色和大小
  278.             item.label = {
  279.               color: '#666',
  280.               fontSize: '9'
  281.             };
  282.           }
  283.         }
  284.       }
  285.       readNodes(this.dataTree); // 调用时，要给data加[],因为原本的data不是一个正常的数组结构
  286.       if (num > 0) { // 查询节点数量大于0的时候展开所有层级
  287.         this.defaultOpt.series[0].initialTreeDepth = -1;
  288.       } else { // 否则恢复初始的层级
  289.         this.defaultOpt.series[0].initialTreeDepth = 2;
  290.       }
  291.       const chart = this.$refs.main
  292.       if (chart) {
  293.         echarts.init(chart).setOption(this.defaultOpt); // 重新设置一遍树图，不然不起效果
  294.       }
  295.     },
  296.     /**
  297.      * 左到右按钮点击
  298.      * @param option 树图属性LR
  299.      * */
  300.     lrClick(option) {
  301.       this.treeDisplay(option)
  302.     },
  303.     /**
  304.      * 右到左按钮点击
  305.      * @param option 树图属性RL
  306.      * */
  307.     rlClick(option) {
  308.       this.treeDisplay(option)
  309.     },
  310.     /**
  311.      * 上到下按钮点击
  312.      * @param option 树图属性TB
  313.      * */
  314.     tbClick(option) {
  315.       this.treeDisplay(option)
  316.     },
  317.     /**
  318.      * 下到上按钮点击
  319.      * @param option 树图属性BT
  320.      * */
  321.     btClick(option) {
  322.       this.treeDisplay(option)
  323.     },
  324.     /**
  325.      * 左到右，右到左，上到下，下到上按钮点击时，对拓扑属性的设置
  326.      * orient:修改拓扑图展示的方向
  327.      * label、leaves修改结点旁边的文字展示
  328.      * */
  329.     treeDisplay(option) {
  330.       this.defaultOpt.series[0].orient = option;
  331.       // console.log('option', option)
  332.       if (option == 'LR') {
  333.         this.defaultOpt.series[0].label = {
  334.           position: 'left',
  335.           rotate: 0,
  336.           verticalAlign: 'middle',
  337.           align: 'right',
  338.           color: '#fff',
  339.           fontSize: 9
  340.         }
  341.         this.defaultOpt.series[0].leaves = {
  342.           label: {
  343.             position: 'right',
  344.             rotate: 0,
  345.             verticalAlign: 'middle',
  346.             align: 'left'
  347.           }
  348.         }
  349.       }
  350.       if (option == 'RL') {
  351.         this.defaultOpt.series[0].label = {
  352.           position: 'right',
  353.           rotate: 0,
  354.           verticalAlign: 'middle',
  355.           align: 'left',
  356.           color: '#fff',
  357.           fontSize: 9
  358.         }
  359.         this.defaultOpt.series[0].leaves = {
  360.           label: {
  361.             position: 'left',
  362.             rotate: 0,
  363.             verticalAlign: 'middle',
  364.             align: 'right'
  365.           }
  366.         }
  367.       }
  368.       if (option == 'TB') {
  369.         this.defaultOpt.series[0].label = {
  370.           position: 'top',
  371.           rotate: -90,
  372.           verticalAlign: 'middle',
  373.           align: 'right',
  374.           color: '#fff',
  375.           fontSize: 9
  376.         }
  377.         this.defaultOpt.series[0].leaves = {
  378.           label: {
  379.             position: 'bottom',
  380.             rotate: -90,
  381.             verticalAlign: 'middle',
  382.             align: 'left'
  383.           }
  384.         }
  385.       }
  386.       if (option == 'BT') {
  387.         this.defaultOpt.series[0].label = {
  388.           position: 'bottom',
  389.           rotate: 90,
  390.           verticalAlign: 'middle',
  391.           align: 'right',
  392.           color: '#fff',
  393.           fontSize: 9
  394.         }
  395.         this.defaultOpt.series[0].leaves = {
  396.           label: {
  397.             position: 'top',
  398.             rotate: 90,
  399.             verticalAlign: 'middle',
  400.             align: 'left'
  401.           }
  402.         }
  403.       }
  404.       const chart = this.$refs.main
  405.       if (chart) {
  406.         echarts.init(chart).setOption(this.defaultOpt);
  407.       }
  408.     }
  409.   }
  410. }
  411. </script>
  412.  
  413. <style scoped>
  414.   .menu{
  415.     /*这个样式不写，右键弹框会一直显示在画布的左下角*/
  416.     position: absolute;
  417.     background: rgba(255, 255, 255, 1);
  418.     border-radius: 5px;
  419.     left: -99999px;
  420.     top: -999999px;
  421.   }
  422.   .menu ul{
  423.     list-style: none;
  424.     padding: 0;
  425.     margin: 0;
  426.   }
  427.   .menu ul li{
  428.     cursor: pointer;
  429.     padding: 5px 10px;
  430.     color: #000000;
  431.     border-bottom: 1px dashed #a9a9a9;
  432.     font-size: 14px;
  433.   }
  434.   .menu ul li:last-child{
  435.     border-bottom: none;
  436.   }
  437. </style>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/427595
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号