uniapp 绘图

uniapp 绘图方法

使用 Canvas 组件

uniapp 支持通过 canvas 组件实现绘图功能。在模板中声明 canvas 并设置宽度、高度和 ID，通过 JavaScript 调用绘图 API。

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

在 script 中通过 uni.createCanvasContext 获取绘图上下文，调用绘图方法：

export default {
  onReady() {
    const ctx = uni.createCanvasContext('myCanvas');
    ctx.setFillStyle('#ff0000');
    ctx.fillRect(10, 10, 150, 75);
    ctx.draw();
  }
}

使用第三方图表库

uniapp 可以集成第三方图表库如 ucharts 或 echarts 实现复杂图表绘制。

安装 ucharts：

npm install @qiun/ucharts

在页面中引入并使用：

import uCharts from '@qiun/ucharts';

export default {
  onReady() {
    new uCharts({
      canvasId: 'myChart',
      type: 'pie',
      series: [{data: 25}, {data: 75}],
      width: 300,
      height: 200
    });
  }
}

使用 SVG 绘图

通过 svg 标签直接绘制矢量图形，适用于简单图形和图标。

<template>
  <view>
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" fill="blue" />
    </svg>
  </view>
</template>

性能优化建议

绘图操作可能消耗较多资源，尤其在频繁重绘时。建议使用 canvasToTempFilePath 将绘图结果保存为图片，减少重复绘制。

uni.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success(res) {
    console.log(res.tempFilePath);
  }
});

对于动态图表，合理使用 requestAnimationFrame 控制绘制频率，避免过度消耗性能。