当前位置：首页 > VUE

vue实现蜂窝图

2026-02-18 11:24:24VUE

Vue 实现蜂窝图的方法

蜂窝图（Hexagonal Grid）常用于数据可视化或游戏开发中，以下是在 Vue 中实现蜂窝图的几种方法。

使用 CSS 和 SVG 绘制蜂窝

通过 SVG 或 CSS 的 clip-path 属性可以绘制六边形蜂窝结构。以下是一个基于 CSS 的实现示例：

vue实现蜂窝图

<template>
  <div class="hex-grid">
    <div v-for="(hex, index) in hexagons" :key="index" class="hexagon"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hexagons: Array(10).fill(0), // 示例数据
    };
  },
};
</script>

<style>
.hex-grid {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  margin: 0 auto;
}

.hexagon {
  width: 100px;
  height: 115px;
  background-color: #3498db;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  margin: 5px;
}
</style>

使用 Canvas 动态绘制

如果需要动态生成蜂窝图或处理交互，可以使用 Canvas：

vue实现蜂窝图

<template>
  <canvas ref="hexCanvas" width="500" height="500"></canvas>
</template>

<script>
export default {
  mounted() {
    this.drawHexGrid();
  },
  methods: {
    drawHexGrid() {
      const canvas = this.$refs.hexCanvas;
      const ctx = canvas.getContext("2d");
      const size = 30; // 六边形边长
      const rows = 5;
      const cols = 5;

      for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
          const x = col * size * 1.5;
          const y = row * size * Math.sqrt(3) + (col % 2) * size * (Math.sqrt(3) / 2);
          this.drawHexagon(ctx, x, y, size);
        }
      }
    },
    drawHexagon(ctx, x, y, size) {
      ctx.beginPath();
      for (let i = 0; i < 6; i++) {
        const angle = (i * Math.PI) / 3;
        const px = x + size * Math.cos(angle);
        const py = y + size * Math.sin(angle);
        ctx.lineTo(px, py);
      }
      ctx.closePath();
      ctx.stroke();
    },
  },
};
</script>

使用第三方库（如 D3.js）

对于复杂的数据可视化需求，可以结合 D3.js 实现蜂窝图：

<template>
  <div ref="hexContainer"></div>
</template>

<script>
import * as d3 from "d3";

export default {
  mounted() {
    this.initHexGrid();
  },
  methods: {
    initHexGrid() {
      const container = this.$refs.hexContainer;
      const width = 500;
      const height = 500;
      const hexRadius = 30;

      const svg = d3
        .select(container)
        .append("svg")
        .attr("width", width)
        .attr("height", height);

      const hexbin = d3.hexbin().radius(hexRadius);

      // 示例数据点
      const data = Array.from({ length: 20 }, () => [
        Math.random() * width,
        Math.random() * height,
      ]);

      svg
        .append("g")
        .selectAll("path")
        .data(hexbin(data))
        .enter()
        .append("path")
        .attr("d", (d) => hexbin.hexagon(hexRadius))
        .attr("transform", (d) => `translate(${d.x}, ${d.y})`)
        .attr("fill", "#3498db")
        .attr("stroke", "#2980b9");
    },
  },
};
</script>

实现交互功能

如果需要点击或悬停效果，可以结合 Vue 的事件绑定：

<template>
  <div class="hex-grid">
    <div
      v-for="(hex, index) in hexagons"
      :key="index"
      class="hexagon"
      @click="handleHexClick(index)"
      @mouseover="handleHexHover(index)"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hexagons: Array(10).fill(0),
    };
  },
  methods: {
    handleHexClick(index) {
      console.log(`Hexagon ${index} clicked`);
    },
    handleHexHover(index) {
      console.log(`Hexagon ${index} hovered`);
    },
  },
};
</script>