当前位置：首页 > uni-app

uniapp图形绘制

2026-02-05 21:39:04uni-app

uniapp 图形绘制方法

uniapp 提供了多种图形绘制方式，适用于不同场景需求。以下是几种常见的实现方法：

Canvas 绘制

使用 canvas 组件进行基础图形绘制，支持线条、矩形、圆形等基础图形。需要在 template 中声明 canvas 元素并设置 canvas-id：

<canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>

通过 uni.createCanvasContext 获取绘图上下文并绘制图形：

const ctx = uni.createCanvasContext('myCanvas')
ctx.setFillStyle('#FF0000')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

SVG 矢量图形

通过 web-view 组件或自定义组件方式嵌入 SVG 图形。SVG 适合绘制可缩放的矢量图形：

uniapp图形绘制

<template>
  <div v-html="svgContent"></div>
</template>

<script>
export default {
  data() {
    return {
      svgContent: `<svg width="100" height="100">
        <circle cx="50" cy="50" r="40" fill="red" />
      </svg>`
    }
  }
}
</script>

第三方图表库

引入第三方图表库如 ucharts 或 echarts 实现复杂图表：

安装 uCharts 插件：
```
npm install @qiun/ucharts
```
基础柱状图实现示例：
```
import uCharts from '@qiun/ucharts'
```

const chartData = { categories: ['2016', '2017', '2018'], series: [{ name: '销量', data: [35, 58, 49] }] }

this.$refs.ucharts.init({ type: 'column', data: chartData })


#### CSS 图形绘制

使用纯 CSS 绘制简单图形，适合基础几何形状：

```html
<style>
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(to right, #ff5e62, #ff9966);
}
</style>

<div class="circle"></div>