echarts实现拓扑图，点击按钮放大缩小

效果展示

1 topo实现

1.1 固定宽高比，适应不同屏幕

• 容器的父级使用padding撑开高度，相对定位
• echarts容器采用绝对定位，撑满父级容器

1.2 绘制topo图

• tooltip 当鼠标滑到节点或连接线上时都会显示tooltip，如果不想显示，返回空字符串即可
• topo图主要内容，由data, line, category组成

  let data = [
        {
          id:'0',
          name: '',//name可以相同，需指定不同id
          x: 50,
          y: middleY,//由于采用了力引导布局，这里y的位置根据父级容器高度计算得来
          fixed: true,//不随力引导布局改变位置
          category: 0,//使用第一个分组
        },
        {
          id:'1',
          name: '',
           x: 200,
          y: middleY,
          fixed:true,
          category: 1,
          status:1//其它数据，可用于tooltip展示
        },
        {
          id:'2',
          name: '',
          category: 2,
          status: 0,
        },
        {
          id:'3',
          name: '',
          category: 2,
          status: 1,
        },
        {
          id:'4',
          category: 3,
          status: 1,
        },
        {
          id:'5',
          category: 4,
          status: 1,
        },
        {
          id:'6',
          category: 4,
          status: 1,
        },
        {
          id:'7',
          category: 5,
          status: 1,
        },
        {
          id:'8',
          category: 5,
          status:1,
        },
        {
          id:'9',
          category: 5,
          status:1
        },
        {
          id:'10',
          category: 5,
          status:1
        },
      ],
        links=[
        //这里的source和target使用的是id值，也可以使用name
          {
            source: '0', target: '1', lineStyle: {//可单独设置连接线样式
              type:'line'
          } },
          {
            source: '1', target: '2', lineStyle: {
              color: '#c4c4c4',
          },value:1},//value值越小，连接线越长，与edgeLength:[100,150]配合使用
          { source: '1', target:'3',value:1 },
        {source:'2',target:'4',lineStyle: {
            color:'#c4c4c4'
          },value:10},
        {source:'2',target:'5', lineStyle: {
            color:'#c4c4c4'
          },value:10},
        {source:'2',target:'6', lineStyle: {
            color:'#c4c4c4'
          },value:10},
        {source:'3',target:'7',value:10},
        {source:'3',target:'8',value:10},
        {source:'3',target:'9', lineStyle: {
            color:'#c4c4c4'
          },value:10},
        {source:'3',target:'10',value:10},
        ],
        category = [
          {
            symbol: `image://${image}`,//节点使用图片，这里的直接引入的图片，也可以使用base64
            label: {
              show: true,
              position: 'bottom',
              color: '#696c6f',
              align: 'left',
              offset:[-20,0]
            }
        },
          {
            symbol: `image://${image}`,
            label: {
              show:true,
              position: 'bottom',
              color: '#696c6f',
            }
        },
          {
            symbol: `image://${image}`,
          label: {
              show:true,
              position: 'bottom',
              color: '#696c6f',
            }
        },
          {
          symbol:`image://${image}`
        },
          {
          symbol:`image://${image}`
        },
          {
          symbol:`image://${image}`
        },
      ]
options = {
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            // console.log(params);
            if (params.dataType=='edge') {
              return ''
            }
            return `<div>${ball} ${signal} ${upTime}</div>
                    <div>${noise}</div>
                    <div>${ip}</div>
                    <div>${speedsMbps}</div>`
          }
        },
        color:['#c4c4c4'],//设置主题色
        animationDurationUpdate: 1500,//动画时间
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',//关系图
            layout: 'force',//力引导布局
            force: {
              repulsion: 200,//斥力
              edgeLength: [90,170],//连接线长度，连接线值越大，长度越短
              layoutAnimation:true//力引导布局会在多次迭代后稳定
            },
            zoom:1,//当前视角缩放比例
            roam: true,//开启鼠标缩放和平移漫游
            nodeScaleRatio: 0.6,//鼠标漫游缩放时节点相应缩放比例
            draggable: true,//可拖拽
            // focusNodeAdjacency: false,//鼠标移动到节点上时突出显示节点和邻接节点
            edgeSymbol: ['none', 'arrow'],//边两端标记类型
            symbolSize: 40,//图形大小
            edgeSymbolSize: 10,//边端标记大小
            lineStyle: {
              color: '#4fc47e',
              width: '1',
              type:[15, 10],
              curveness: 0,
              opacity: 1,
            },
            data: data,//节点
            links: links,//连接线
            categories:category//节点分类
          }
        ]
      }

2 点击按钮放大缩小topo图

2.1 保存 zoom 值

• 这里需要通过更改 zoom 属性实现，由于我还开启了鼠标缩放，所以需要另外一个变量 toPoZoom 保存当前的 zoom
• 使用 echarts 提供的事件api 可以获取鼠标缩放平移漫游事件，可以通过事件参数提供的 zoom对象判断当前是在放大还是在缩小; 如果是在放大，toPoZoom + 0.2, 如果是在缩小 toPoZoom – 0.2
• 当鼠标平移时，不会返回 zoom 属性，需要过滤掉

//this.toPoInstance echarts对象
//this.toPoOption option配置对象
 this.toPoInstance.setOption(this.toPoOption)
 let _this = this
 this.toPoInstance.on('graphroam', function (params) {
   // console.log(params);
     if ('zoom' in params) {//仅当缩放时
       if (params.zoom > 1) {
          _this.toPoZoom +=  0.2
        } else {
          _this.toPoZoom -= 0.2
        }
      }
 })

2.2 按钮事件

• 当点击放大或缩小按钮时，更改toPoZoom, 并重新赋值给 series 中的zoom属性，重新渲染topo图

toPoEnlarge() {
  this.toPoZoom += 0.2
  this.toPoOption.series[0].zoom = this.toPoZoom
  this.toPoInstance.setOption(this.toPoOption)
},
toPoNarrow() {
  this.toPoZoom -= 0.2
  this.toPoOption.series[0].zoom = this.toPoZoom
  this.toPoInstance.setOption(this.toPoOption)
},

代码007普通

打赏 收藏 海报 链接