【feat】【v3】

1.增加测试图表代码

src/pages/task/taskDetail.vue

@@ -55,6 +55,10 @@
       </view>
     </view>
 
+    <view class="charts-box">
+      <qiun-data-charts type="line" :opts="chartOpts" :chartData="chartData" />
+    </view>
+
     <uni-section title="打卡日志" padding="16px" type="line">
       <uni-list>
         <uni-list-item v-for="taskHistory in statMonth.piTaskHistoryStatVOS" :key="taskHistory.punchInDate">
@@ -141,7 +145,7 @@
 
 <script setup>
 import { ref } from 'vue';
-import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
+import { onLoad, onPullDownRefresh, onShow, onReady } from '@dcloudio/uni-app';
 import { punchInApi } from '@/apis/apis';
 import { PUNCH_IN_RESULT, PUNCH_IN_METHOD, STAT_PERIOD } from '@/common/enums'
 
@@ -202,6 +206,35 @@ const statYear = ref({
   piTaskHistoryStatVOS: []
 });
 
+/**
+ * 图表数据
+ */
+const chartData = ref({});
+
+/**
+ * 图表配置
+ */
+const chartOpts = ref({
+  color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
+  padding: [15, 10, 0, 15],
+  enableScroll: false,
+  legend: {},
+  xAxis: {
+    disableGrid: true
+  },
+  yAxis: {
+    gridType: "dash",
+    dashLength: 2
+  },
+  extra: {
+    line: {
+      type: "straight",
+      width: 2,
+      activeType: "hollow"
+    }
+  }
+});
+
 // 方法
 /**
  * 切换选项卡
@@ -299,6 +332,32 @@ onLoad(async (e) => {
   }
 });
 
+function getServerData() {
+  //模拟从服务器获取数据时的延时
+  setTimeout(() => {
+    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+    let res = {
+      categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
+      series: [
+        {
+          name: "目标值",
+          data: [35, 36, 31, 33, 13, 34]
+        },
+        {
+          name: "完成量",
+          data: [18, 27, 21, 24, 6, 28]
+        }
+      ]
+    };
+    chartData.value = JSON.parse(JSON.stringify(res));
+  }, 500);
+}
+
+onReady(() => {
+
+  getServerData();
+});
+
 onPullDownRefresh(() => {
   loadData();
   uni.stopPullDownRefresh();
@@ -348,6 +407,16 @@ onPullDownRefresh(() => {
   }
 }
 
+
+.charts-box {
+  width: 50%;
+  min-width: 375px !important;
+  height: 400rpx;
+  margin-left: auto;
+  margin-right: auto;
+  border: 1px solid blue;
+}
+
 .stat-board {
   margin-top: 16rpx;