邹能昇 2 сар өмнө
parent
commit
882d6facbe

+ 107 - 59
nova-werun/pages/home/statistics/index.js

@@ -3,62 +3,7 @@ import * as echarts from "../../../components/ec-canvas/echarts.min"
 const Parse = getApp().Parse;
 const company = getApp().globalData.company;
 
-function initChart(canvas, width, height, dpr) {
-    const chart = echarts.init(canvas, null, {
-        width: width,
-        height: height,
-        devicePixelRatio: dpr
-    });
-    canvas.setChart(chart);
-    var option = {
-        xAxis: {
-            type: 'category',
-            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-            axisLabel: {
-                formatter: function (value, index) {
-                    const dates = ['1号', '2号', '3号', '4号', '5号', '6号', '7号'];
-                    return index === 1 ? '今天' : value + '\n' + '\n' + dates[index];
-                }
-            }
-        },
-        yAxis: {
-            type: 'value',
-            max: 20000, // 设置Y轴最大值为20000
-            axisLabel: {
-                formatter: function (value) {
-                    if (value >= 10000) {
-                        return (value / 10000) + 'k'; // 格式化为20k
-                    }
-                    return value;
-                }
-            }
-        },
-        series: [{
-            data: [
-                12000,
-                {
-                    value: 12000,
-                    itemStyle: {
-                        color: '#a90000',
-                    }
-                },
-                12000,
-                12000,
-                12000,
-                12000,
-                12000
-            ],
-            type: 'bar',
-            barWidth: '10',
-            itemStyle: {
-                borderRadius: 15,
-            }
-        }],
-    };
-    chart.setOption(option);
 
-    return chart;
-}
 Page({
 
     /**
@@ -88,10 +33,11 @@ Page({
         totalsportDate: 0,
 
         ec: {
-            onInit: initChart
+            onInit: null
         },
         resultList: [],
-        stepsData: [],
+        stepsData: [], //统计图柱状
+        xAxis: [], //x轴
 
         percentage: '',
         percent: '',
@@ -123,9 +69,95 @@ Page({
         await this.gettarget()
         await this.order()
         this.allorder()
-        this.getweekday()
+        await this.getweekday()
+        this.echartsComponnet = this.selectComponent('#mychart')
+        await this.initChart()
+    },
+
+    // 将 initChart 定义在 Page 上下文中
+    initChart() {
+        if (this.chart) {
+            this.chart.clear();
+        }
+        this.echartsComponnet.init((canvas, width, height, dpr) => {
+            // 初始化图表
+            this.chart = echarts.init(canvas, null, {
+                width: width,
+                height: height,
+                devicePixelRatio: dpr // 清晰度 使canvas的图表更加清晰
+            });
+            this.chart.setOption(this.getOption())
+            return this.chart;
+        });
     },
 
+    getOption() {
+        var option = {
+            xAxis: {
+                type: 'category',
+                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+                axisLabel: {
+                    formatter: (value, index) => this.formatter(value, index)
+                }
+            },
+            yAxis: {
+                type: 'value',
+                max: 20000, // 设置Y轴最大值为20000
+                axisLabel: {
+                    formatter: function (value) {
+                        if (value >= 10000) {
+                            return (value / 1000) + 'k'; // 格式化为20k
+                        }
+                        return value;
+                    }
+                }
+            },
+            series: [{
+                // data: [
+                //     12000,
+                //     {
+                //         value: 12000,
+                //         itemStyle: {
+                //             color: '#a90000',
+                //         }
+                //     },
+                //     12000,
+                //     12000,
+                //     12000,
+                //     12000,
+                //     12000
+                // ],
+                data: this.data.stepsData,
+                type: 'bar',
+                barWidth: '10',
+                itemStyle: {
+                    borderRadius: 15,
+                }
+            }],
+        };
+        return option; // 返回 option 对象
+    },
+    // 返回x轴底下的字
+    formatter(value, index) {
+        let daylist = this.data.resultList.map(item => {
+            const day = new Date(item.createdAt); // 获取当前日期
+            const dayOfMonth = day.getDate(); // 获取今天是几号
+            return dayOfMonth
+        })
+        daylist.reverse()
+        const dayindex = daylist.length-1
+        if (daylist.length < 7) {
+            for (let i = daylist.length; i < 7; i++) {
+                const lastDay = daylist[daylist.length - 1];
+                daylist.push(lastDay + (i - daylist.length + 1)); // 补充后续日期
+            }
+        }
+        const dates =  daylist.map(item=>{
+            return `${item}号`
+        })
+        console.log('dates',dates);
+        return index === dayindex ? '今天' : value + '\n' + '\n' + dates[index];
+    },
     /**
      * 生命周期函数--监听页面初次渲染完成
      */
@@ -179,6 +211,8 @@ Page({
         this.setData({
             active: event.detail
         });
+        this.echartsComponnet = this.selectComponent('#mychart')
+        this.initChart()
     },
     //修改30天或者7天数据
     changeday() {
@@ -344,7 +378,21 @@ Page({
 
         // 取出对应数量的数据
         const resultList = allList.slice(0, numItemsToTake);
-        const stepsData = resultList.map(item => item.steps);
+        const stepsData = resultList.map((item, index) => {
+            if (index === 0) {
+                // 如果是第一条数据,设置特殊样式
+                return {
+                    value: item.steps,
+                    itemStyle: {
+                        color: '#a90000',
+                    }
+                };
+            } else {
+                // 其他数据直接返回 steps
+                return item.steps;
+            }
+        });
+
         this.setData({
             resultList,
             stepsData

+ 2 - 2
nova-werun/pages/home/statistics/index.wxml

@@ -50,7 +50,7 @@
         <view class="text3">本周记录</view>
     </view>
     <view class="chart">      
-     <ec-canvas canvas-id="echart-pie" ec="{{ec}}"></ec-canvas>
+     <ec-canvas id="mychart" canvas-id="mychart" ec="{{ec}}"></ec-canvas>
     </view>
 </view>
 <view class="all2" style="height: {{contentHeight}}rpx;" wx:if="{{active==1}}">
@@ -120,7 +120,7 @@
             </view>
         </view>
         <view class="card3-bottom">
-            <ec-canvas canvas-id="echart-pie" ec="{{ec}}"></ec-canvas>
+            <ec-canvas id="mychart" canvas-id="mychart" ec="{{ec}}"></ec-canvas>
         </view>
     </view>
 </view>