vue结合G6AntV可视化图表绘制图谱自定义工具栏菜单栏g6

使用G6（4.8x版本）结合vue2做图谱，需要做自定义菜单栏，添加放大、缩小、重置缩放、全屏功能

先来看效果图

html代码

	<div class="c-box">
    <!-- 工具栏 -->
    <div class="toolbar">
      <button @click="zoomIn">放大</button>
      <button @click="zoomOut">缩小</button>
      <button @click="resetZoom">重置缩放</button>
      <button @click="toggleFullScreen">全屏</button>
    </div>
    <!-- 图谱 -->
    <div id="G6-box" ref="G6Box"></div>
  </div>

工具栏css样式

	.toolbar {
	  margin-top: 10px;
	  position: absolute;
	  padding: 10px 0 0 20px;
	}
	
	.toolbar button {
	  margin-right: 10px;
	  padding: 5px 10px;
	  background-color: #5B8FF9;
	  color: white;
	  border: none;
	  cursor: pointer;
	}
	
	.toolbar button:hover {
	  background-color: #3A6FDA;
	}

使用 G6 的 zoomTo(scale) 方法实现放大、缩小、重置。通过 graph.getZoom() 获取当前缩放比例，然后使用 zoomTo() 方法来调整缩放比例***

放大图谱

	// 放大图谱
	zoomIn() {
	  const currentZoom = graph.getZoom();
	  graph.zoomTo(currentZoom + 0.1); // 每次放大10%
	}

放大状态

缩小图谱

    // 缩小图谱
    zoomOut() {
      const currentZoom = graph.getZoom();
      graph.zoomTo(currentZoom - 0.1); // 每次缩小10%
    }

缩小状态

重置缩放图谱

    // 重置缩放
    resetZoom() {
      graph.zoomTo(1); // 重置缩放比例到1
    }

---

作者在上述的方法中并没有把graph定义在vue中，而是当做一个全局变量，是因为，我们有时候需要外部函数获取graph实例进行操作，可根据实际情况进行定义，如写在vue中，使用this.graph即可。

图谱全屏功能

定义isFullScreen 变量

data () {
	return {
		isFullScreen : null
	}
}

    // 切换全屏
    toggleFullScreen() {
      const elem = this.$refs.G6Box;
      if (!this.isFullScreen) {
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }
      this.isFullScreen = !this.isFullScreen; // 切换全屏状态
    },

使用浏览器的全屏 API（如 requestFullscreen() 和 exitFullscreen()）来控制图谱是否全屏显示。
isFullScreen 用于跟踪当前是否处于全屏状态。

全屏状态

两个问题

以上操作完成后，作者遇到了两个问题：
1.放大和缩小时图谱进行了偏移，并没有随着中心点进行放大缩小，像这样：

2.全屏后图谱被宽高限制，像这样：

解决方法

1.G6 的缩放操作默认是以鼠标位置为中心进行缩放，自定义缩放逻辑，使其以图的中心为参考点。

  // 获取图的中心点
  getGraphCenter() {
    const width = this.graph.get('width');
    const height = this.graph.get('height');
    return { x: width / 2, y: height / 2 };
  },

放大缩小时设置中心点

  // 放大图谱
  zoomIn() {
    const currentZoom = graph.getZoom()
    const center = this.getGraphCenter()
    graph.zoomTo(currentZoom + 0.1, center) // 每次放大10%
  },
  // 缩小图谱
  zoomOut() {
    const currentZoom = graph.getZoom()
    const center = this.getGraphCenter()
    graph.zoomTo(currentZoom - 0.1, center) // 每次缩小10%
  },

2.调用 changeSize 方法来更新图表的宽高

  // 延时更新图表大小，确保全屏切换完成后执行
  setTimeout(() => {
    const width = elem.offsetWidth;
    const height = elem.offsetHeight;
    this.graph.changeSize(width, height); // 更新图表的大小
  }, 500);

总结

放大缩小：通过获取图的中心点作为缩放的参考点，解决偏移问题。
全屏和未全屏状态下的自适应：使用 graph.changeSize() 在全屏切换时动态调整图的大小，确保图表正确填充全屏或窗口大小。