统计

pages/stuAdmin/fee/list.js

@@ -1,4 +1,5 @@
 const app = getApp()
+import * as echarts from '../../../commpents/ec-canvas/echarts'
 Page({
     data: {
         frameStyle: { useTop: true, name: '付费情况', leftArrow: true, useBar: false },
@@ -10,21 +11,86 @@ Page({
     /**
      * 生命周期函数--监听页面加载
      */
-    onLoad: function (options) { },
+    onLoad: function (options) {
+    },
     // 监听用户是否登录
     watchLogin: async function () {
         const that = this;
         wx.getStorage({
             key: 'user',
-            success: async res => { },
+            success: async res => {
+                that.setData({
+                    ec: {
+                        onInit: that.initChart
+                    }
+                })
+                // 模拟请求
+                var times = setTimeout(async function () {
+                    // 数据
+                    that.data.xdata = [
+                        { value: 2, name: '1月(钱数)' },
+                        { value: 10, name: '2月(钱数)' },
+                        { value: 19, name: '3月(钱数)' },
+                        { value: 20, name: '4月(钱数)' },
+                        { value: 70, name: '5月(钱数)' },
+                        { value: 9, name: '6月(钱数)' },
+                        { value: 12, name: '7月(钱数)' },
+                        { value: 41, name: '8月(钱数)' },
+                        { value: 31, name: '9月(钱数)' },
+                        { value: 13, name: '10月(钱数)' },
+                        { value: 16, name: '11月(钱数)' },
+                        { value: 10, name: '12月(钱数)' }
+                    ];
+                    clearTimeout(times);
+                }, 1000)
+            },
             fail: async res => {
-                // wx.redirectTo({ url: '/pages/index/index' })
+                wx.redirectTo({ url: '/pages/index/index' })
             }
         })
     },
+    // 饼图
+    initChart(canvas, width, height, dpr) {
+        let that = this;
+        // 由于请求数据有延迟所以写一个时间函数，当数据存在的时候再执行绘制
+        var times = setInterval(function () {
+            var xdata = that.data.xdata;
+            if (xdata) {
+                clearInterval(times)
+                const chart = echarts.init(canvas, null, {
+                    width: width,
+                    height: height,
+                    devicePixelRatio: dpr // new
+                });
+                canvas.setChart(chart);
+                var option = {
+                    tooltip: {
+                        trigger: 'item'
+                    },
+                    series: [
+                        {
+                            name: 'Access From',
+                            type: 'pie',
+                            radius: '50%',
+                            data: xdata,
+                            emphasis: {
+                                itemStyle: {
+                                    shadowBlur: 10,
+                                    shadowOffsetX: 0,
+                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                                }
+                            }
+                        }
+                    ]
+                };
+                chart.setOption(option, true);
+                return chart;
+            }
+        }, 100)
+    },
     /**
-     * 生命周期函数--监听页面初次渲染完成
-     */
+    * 生命周期函数--监听页面初次渲染完成
+    */
     onReady: function () { },
     /**
      * 生命周期函数--监听页面显示
@@ -58,10 +124,11 @@ Page({
 
     },
 
+
     /**
      * 用户点击右上角分享
      */
-    onShareAppMessage: function () {
+    onShareAppMessage: function (res) {
 
-    }
+    },
 })

pages/stuAdmin/fee/list.json

@@ -1,6 +1,7 @@
 {
-    "component": true,
-    "usingComponents": {
-      "mobile-main": "/commpents/mobile-frame/index"
-    }
-  }
+  "component": true,
+  "usingComponents": {
+    "mobile-main": "/commpents/mobile-frame/index",
+    "ec-canvas": "/commpents/ec-canvas/ec-canvas"
+  }
+} 

pages/stuAdmin/fee/list.less

@@ -1,4 +1,17 @@
-.main {
-    background-color: var(--mainColor);
+ec-canvas {
+    width: 100%;
+    height: 100%;
 }
 
+.container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 2vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+}

pages/stuAdmin/fee/list.wxml

@@ -1,5 +1,5 @@
 <mobile-main frameStyle="{{frameStyle}}" bind:back="back">
     <view slot="info" class="container main">
-        1
+        <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
     </view>
 </mobile-main>

pages/stuAdmin/fee/list.wxss

@@ -1,3 +1,16 @@
-.main {
-  background-color: var(--mainColor);
+ec-canvas {
+  width: 100%;
+  height: 100%;
+}
+.container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 2vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
 }

pages/stuAdmin/study/list.js

@@ -25,13 +25,20 @@ Page({
                     }
                 })
                 // 模拟请求
-                var times = setTimeout(function () {
-                    console.log("模拟请求")
+                var times = setTimeout(async function () {
+                    const student = await app.$get(`/lessonStudent`, { student_id: res.data.info.id, is_pay: '1' })
+                    if (student.errcode == '0') {
+                        for (const val of student.data) {
+                            const lesson = await app.$get(`/lesson/${val.lesson_id}`)
+                            val.lessonname = lesson.data.title
+                        }
+                        var schooldata = student.data.map((item) => { return item.lessonname; });
+                    }
                     // 数据
-                    that.data.schooldata = ['学校1', '学校2', '学校3', '学校4'];
-                    that.data.xdata = ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022'];
-                    that.data.data1 = [230, 150, 178, 70, 178, 340, 133, 118, 136, 165, 130, 178, 340];
-                    that.data.data2 = [112, 150, 151, 135, 170, 130, 200, 112, 150, 151, 135, 170, 130];
+                    that.data.schooldata = schooldata;
+                    that.data.xdata = ['1月份', '2月份', '3月份', '4月份', '5月份', '6月份', '7月份', '8月份', '9月份', '10月份', '11月份', '12月份'];
+                    that.data.data1 = [230, 150, 178, 70, 178, 340, 133, 118, 136, 165, 130, 178];
+                    that.data.data2 = [112, 150, 151, 135, 170, 130, 200, 112, 150, 151, 135, 170];
                     clearTimeout(times);
                 }, 1000)
             },
@@ -59,55 +66,143 @@ Page({
                 canvas.setChart(chart);
                 var option = {
                     tooltip: {
-                        trigger: 'axis'
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'cross',
+                            label: {
+                                backgroundColor: '#6a7985'
+                            }
+                        }
+                        ,
+                        formatter: function (params) {
+                            let html = params[0].name + "<br>";
+                            for (let i = 0; i < params.length; i++) {
+                                html += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + params[i].color + ';"></span>'
+                                if (params[i].seriesName == "签到数") {
+                                    html += params[i].seriesName + ":" + params[i].value + "%<br>";
+                                }
+                                if (params[i].seriesName == "时长") {
+                                    html += params[i].seriesName + ":" + params[i].value + "小时<br>";
+                                }
+                            }
+                            return html;
+                        }
                     },
+
                     legend: {
-                        data: schooldata
+                        textStyle: { color: '#4CA6A3' },
+                        x: 'right',
+                        data: [{ name: '签到数', icon: 'rect' }, { name: '时长', icon: 'rect' }]
                     },
                     grid: {
-                        left: '3%',
-                        right: '4%',
+                        left: '2%',
+                        right: '2%',
                         bottom: '3%',
                         containLabel: true
                     },
-                    xAxis: {
-                        type: 'category',
-                        boundaryGap: false,
-                        data: xdata
-                    },
-                    yAxis: {
-                        type: 'value'
-                    },
-                    series: [
+                    xAxis: [
                         {
-                            name: schooldata[0],
-                            type: 'line',
-                            stack: 'Total',
-                            data: data1
-                        },
+                            type: 'category',
+                            boundaryGap: false,
+                            //设置x轴线的属性
+                            axisLine: {
+                                lineStyle: {
+                                    color: '#4CA6A3', // 设置x轴字体颜色
+                                    width: 2, // 设置x轴字体宽度
+                                }
+                            },
+                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+                        }
+                    ],
+                    yAxis: [
                         {
-                            name: schooldata[1],
-                            type: 'line',
-                            stack: 'Total',
-                            data: data2
+                            type: 'value',
+                            name: '时长',
+                            position: 'left',
+                            alignTicks: true,
+                            axisLine: {
+                                show: true,
+                                lineStyle: {
+                                    fontSize: 16,
+                                    color: '#293C55'
+                                }
+                            },
+                            axisLabel: {
+                                formatter: '{value} 小时'
+                            }
                         },
                         {
-                            name: schooldata[2],
+                            type: 'value',
+                            name: "签到数",
+                            nameLocation: "center",
+                            alignTicks: true,
+                            nameGap: 35,
+                            nameRotate: 0,
+                            nameTextStyle: {
+                                fontSize: 16,
+                                color: '#293C55'
+                            },
+                            splitLine: { show: false },//去除网格线
+                            min: 0,
+                            max: 100,
+                            interval: 10,
+                            // 设置轴线的属性
+                            axisLine: {
+                                show: true,
+                                lineStyle: {
+                                    color: '#293C55',
+                                }
+                            }
+                        }
+                    ],
+                    series: [
+                        {
+                            name: '签到数',
                             type: 'line',
-                            stack: 'Total',
+                            stack: '总量',
+                            areaStyle: {},
+                            itemStyle: {
+                                normal: {
+                                    color: "#25DEDB",//折线点的颜色
+                                    lineStyle: {
+                                        color: "#25DEDB"//折线的颜色
+                                    }
+                                }
+                            },
+                            areaStyle: { // 该属性设置可以使这下图区域颜色达到渐变的效果
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: '#25DEDB'
+                                }, {
+                                    offset: 1,
+                                    color: '#ffe'
+                                }])
+                            },
                             data: data1
                         },
                         {
-                            name: schooldata[3],
+                            name: '时长',
                             type: 'line',
-                            stack: 'Total',
+                            stack: '总量',
+                            areaStyle: {},
+                            itemStyle: {
+                                normal: {
+                                    color: "#E96C44",//折线点的颜色
+                                    lineStyle: {
+                                        color: "#E96C44"//折线的颜色
+                                    }
+                                }
+                            },
+                            areaStyle: { // 该属性设置可以使这下图区域颜色达到渐变的效果
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: '#E96C44'
+                                }, {
+                                    offset: 1,
+                                    color: '#ffe'
+                                }])
+                            },
                             data: data2
-                        },
-                        {
-                            name: schooldata[4],
-                            type: 'line',
-                            stack: 'Total',
-                            data: data1
                         }
                     ]
                 };