uniapp绘制曲线

使用 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 生态中常用的图表库，支持绘制折线图、曲线图等。可以通过以下步骤实现：

1. 安装 ucharts：

   

   npm install @qiun/ucharts

2. 在页面中引入并使用：

   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> 元素支持贝塞尔曲线。

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

使用第三方组件库

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

1. 安装 echarts：

   npm install echarts

2. 在页面中使用：

   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
         }]
       });
     }
   };

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