当前位置：首页 > uni-app

uniapp绘制曲线

2026-02-06 01:12:57uni-app

使用 `canvas` 绘制曲线

在 uniapp 中，可以通过 canvas 组件绘制曲线。canvas 提供了 bezierCurveTo 和 quadraticCurveTo 方法，分别用于绘制贝塞尔曲线和二次曲线。

// 在 template 中添加 canvas
<canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>

// 在 script 中绘制曲线
const ctx = uni.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.moveTo(50, 50); // 起点
ctx.bezierCurveTo(100, 100, 150, 20, 200, 50); // 控制点1, 控制点2, 终点
ctx.stroke();
ctx.draw();

使用 `ucharts` 图表库绘制曲线

ucharts 是 uniapp 生态中常用的图表库，支持绘制折线图、曲线图等。可以通过以下步骤实现：

安装 ucharts：
```
npm install @qiun/ucharts
```

在页面中引入并使用：

import uCharts from '@qiun/ucharts';

export default {
  onReady() {
    const chart = new uCharts({
      canvasId: 'chartCanvas',
      type: 'line',
      categories: ['1', '2', '3', '4', '5'],
      series: [{
        name: '曲线',
        data: [10, 30, 20, 40, 50],
        smooth: true // 开启曲线平滑
      }]
    });
  }
};

使用 `svg` 绘制曲线

在 uniapp 中，可以通过 svg 标签绘制曲线。svg 的 <path> 元素支持贝塞尔曲线。

uniapp绘制曲线

<svg width="300" height="300">
  <path d="M50 50 C100 100, 150 20, 200 50" stroke="black" fill="none" />
</svg>

使用第三方组件库

uniapp 支持许多第三方图表库，如 echarts、f2 等。以 echarts 为例：

安装 echarts：
```
npm install echarts
```

在页面中使用：

import * as echarts from 'echarts';

export default {
  mounted() {
    const chart = echarts.init(document.getElementById('chart'));
    chart.setOption({
      series: [{
        type: 'line',
        data: [10, 30, 20, 40, 50],
        smooth: true
      }]
    });
  }
};

以上方法均可实现曲线绘制，具体选择取决于项目需求。