uniapp 曲线图

uniapp 实现曲线图的常用方法

使用 uCharts 插件

uCharts 是 uniapp 生态中高性能图表库，支持多端运行。安装后可通过简单配置生成曲线图。

1. 安装 uCharts
   通过 npm 安装或导入 HBuilderX 插件：

   npm install @qiun/ucharts

2. 基础配置示例
   在 vue 文件中初始化图表：

   import uCharts from '@qiun/ucharts';
   export default {
   mounted() {
    this.initChart();
   },
   methods: {
    initChart() {
      const chart = new uCharts({
        canvasId: 'chartCanvas',
        type: 'line',
        categories: ['1月','2月','3月'],
        series: [{
          name: '销量',
          data: [35, 78, 49]
        }],
        width: 300,
        height: 200
      });
    }
   }
   }

3. 模板部分
   需在 template 中添加 canvas 元素：

   <canvas canvas-id="chartCanvas" style="width:100%;height:300px"/>

使用 ECharts 适配方案

通过 uni-ec-canvas 组件可集成 ECharts。

1. 安装依赖

   npm install echarts mpvue-echarts

2. 组件封装
   创建 ec-canvas 组件并初始化：

   import * as echarts from 'echarts';
   export default {
   onReady() {
    const chart = echarts.init(this.$refs.chart);
    chart.setOption({
      xAxis: { type: 'category', data: ['A','B','C'] },
      yAxis: { type: 'value' },
      series: [{ 
        type: 'line', 
        data: [10, 22, 18],
        smooth: true 
      }]
    });
   }
   }

3. 模板调用

   <uni-ec-canvas ref="chart" canvas-id="echarts"/>

注意事项

• 跨平台差异需测试，尤其在微信小程序和H5端表现可能不同
• 大数据量时建议开启图表动画优化性能
• 使用 rpx 单位确保多端尺寸适配

动态数据更新示例

通过 setOption 方法可实时刷新数据：

updateChart(newData) {
  this.chart.setOption({
    series: [{ data: newData }]
  });
}