uniapp 使用 qiun-data-charts做折线图

UniApp是一个基于Vue.js的跨平台应用开发框架，它允许开发者构建一次，多端运行的应用，包括Web、H5、iOS和Android。Qiuni-Data-Charts是一个用于数据可视化的UI组件库，其中包含了折线图等图表类型。

在UniApp中使用Qiuni-Data-Charts创建折线图的步骤大致如下：

1. 首先，在项目中安装Qiuni-Data-Charts组件：

   npm install uni-chart qcharts --save

或者使用vant-weapp提供的版本：

   npm install vant-vant-weapp vant-vant-charts --save

2. 引入所需的CSS和JavaScript文件到你的组件中：

<template>
  <view class="chart-container">
    <van-line :options="lineChartOptions" @ready="onReady"></van-line>
  </view>
</template>

<script>
import { vanLine } from "vant-vant-charts";
...
</script>

3. 创建一个data对象，配置折线图的数据和选项：

export default {
  data() {
    return {
      lineChartOptions: {
        xField: 'time', // 横坐标数据字段
        yField: 'value', // 纵坐标数据字段
        series: [
          { name: 'Series 1', type: 'line' }, // 定义第一系列
          { name: 'Series 2', type: 'line' } // 可添加更多系列
        ],
        title: { text: '折线图示例' }, // 标题配置
      },
      ...
    };
  },
  ...
}

4. 函数`onReady`会在图表绘制完成后触发，可以在这里处理其他操作：

methods: {
  onReady(chart) {
    console.log('折线图已准备就绪:', chart);
  }
},
...