当前位置：首页 > uni-app

uniapp 曲线图

2026-02-06 13:12:18uni-app

在 uniapp 中实现曲线图可以通过多种方式完成，以下是一些常见的方法和工具：

使用 uCharts 插件

uCharts 是一个高性能的跨平台图表库，支持 uniapp 和小程序。它提供了丰富的图表类型，包括曲线图、折线图、柱状图等。

安装 uCharts：通过 npm 安装或直接下载 uCharts 的 uni-app 版本，将其放入项目的 components 目录。

配置图表：在页面的 script 部分引入 uCharts，并初始化图表配置。例如：

import uCharts from '@/components/u-charts/u-charts.js';
export default {
  data() {
    return {
      cWidth: 750, // 图表宽度
      cHeight: 500, // 图表高度
      opts: {
        categories: ['1月', '2月', '3月', '4月', '5月', '6月'],
        series: [{
          name: '销量',
          data: [35, 20, 25, 37, 4, 20]
        }]
      }
    };
  },
  onLoad() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = new uCharts({
        $this: this,
        canvasId: 'canvasLine',
        type: 'line',
        width: this.cWidth,
        height: this.cHeight,
        categories: this.opts.categories,
        series: this.opts.series,
        animation: true
      });
    }
  }
};

使用 F2 图表库

F2 是蚂蚁金服推出的移动端可视化解决方案，支持 uniapp 和小程序。它提供了灵活的配置选项和良好的性能。

安装 F2：通过 npm 安装 F2，并在项目中引入。

配置曲线图：在页面的 template 部分添加 canvas 元素，并在 script 部分初始化图表：

import F2 from '@antv/f2';
export default {
  mounted() {
    const chart = new F2.Chart({
      id: 'chartCanvas',
      pixelRatio: window.devicePixelRatio
    });
    chart.source(data);
    chart.line().position('month*value');
    chart.render();
  }
};

使用 ECharts

ECharts 是一个强大的可视化库，支持 uniapp 和小程序。通过 uni-ec-canvas 组件可以在 uniapp 中使用 ECharts。

安装 ECharts：通过 npm 安装 ECharts 和 uni-ec-canvas 组件。

配置曲线图：在页面的 template 部分添加 uni-ec-canvas 组件，并在 script 部分初始化图表：

import * as echarts from 'echarts';
export default {
  data() {
    return {
      ec: {
        lazyLoad: true
      }
    };
  },
  onReady() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = this.$refs.chart.init(echarts);
      chart.setOption({
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330],
          type: 'line',
          smooth: true
        }]
      });
    }
  }
};

自定义实现

如果需要更简单的曲线图，可以通过 canvas 直接绘制。在 uniapp 中，可以使用 canvas 组件和相关的绘图 API。

绘制曲线：在页面的 template 部分添加 canvas 元素，并在 script 部分使用绘图 API：

export default {
  onReady() {
    const ctx = uni.createCanvasContext('myCanvas');
    ctx.moveTo(10, 10);
    ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
    ctx.stroke();
    ctx.draw();
  }
};

以上方法可以根据项目需求选择适合的方案。uCharts 和 ECharts 提供了丰富的功能和配置选项，适合复杂的数据可视化需求；而自定义实现则适合简单的图表需求。

uniapp 曲线图