当前位置：首页 > VUE

vue实现绘图

2026-03-07 14:30:02VUE

Vue 实现绘图的方法

Vue 可以通过多种方式实现绘图功能，包括使用原生 Canvas、SVG 或第三方库。以下是几种常见的实现方法。

使用原生 Canvas

在 Vue 中可以通过 ref 获取 Canvas 元素，并在 mounted 钩子中绘制图形。

<template>
  <canvas ref="canvas" width="400" height="400"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(50, 50, 100, 100);
  }
};
</script>

使用 SVG

SVG 可以直接在 Vue 模板中声明式地绘制图形。

<template>
  <svg width="400" height="400">
    <rect x="50" y="50" width="100" height="100" fill="blue" />
    <circle cx="200" cy="200" r="50" fill="green" />
  </svg>
</template>

使用第三方库（如 Konva）

Konva 是一个功能强大的 Canvas 库，适合复杂绘图场景。

安装 Konva：
```
npm install konva
```

在 Vue 中使用：


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

import Konva from 'konva';

export default { mounted() { const stage = new Konva.Stage({ container: this.$refs.container, width: 400, height: 400, });

const layer = new Konva.Layer();
const rect = new Konva.Rect({
  x: 50,
  y: 50,
  width: 100,
  height: 100,
  fill: 'red',
});

layer.add(rect);
stage.add(layer);

} };

```

使用 Vue-Konva

Vue-Konva 是 Konva 的 Vue 封装，提供更声明式的 API。

安装 Vue-Konva：
```
npm install vue-konva konva
```

在 Vue 中使用：


<template>
<v-stage :config="stageConfig">
 <v-layer>
   <v-rect :config="rectConfig" />
 </v-layer>
</v-stage>
</template>

export default { data() { return { stageConfig: { width: 400, height: 400, }, rectConfig: { x: 50, y: 50, width: 100, height: 100, fill: 'red', }, }; }, }; ```

使用 D3.js

D3.js 适合数据可视化场景，可以与 Vue 结合使用。

安装 D3：
```
npm install d3
```

在 Vue 中使用：


<template>
<svg ref="svg" width="400" height="400"></svg>
</template>

import * as d3 from 'd3';

export default { mounted() { const svg = d3.select(this.$refs.svg); svg.append('circle') .attr('cx', 200) .attr('cy', 200) .attr('r', 50) .attr('fill', 'green'); } };

vue实现绘图