ball-applet/pages/stuAdmin/study/list.js

const app = getApp()
import * as echarts from '../../../commpents/ec-canvas/echarts'
Page({
    data: {
        frameStyle: { useTop: true, name: '学校学习情况', leftArrow: true, useBar: false },
    },
    // 返回
    back(e) {
        wx.navigateBack({ delta: 1 })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
    },
    // 监听用户是否登录
    watchLogin: async function () {
        const that = this;
        wx.getStorage({
            key: 'user',
            success: async res => {
                that.setData({
                    ec: {
                        onInit: that.initChart
                    }
                })
                // 模拟请求
                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 = 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)
            },
            fail: async res => {
                wx.redirectTo({ url: '/pages/index/index' })
            }
        })
    },
    // 折线图
    initChart(canvas, width, height, dpr) {
        let that = this;
        // 由于请求数据有延迟所以写一个时间函数，当数据存在的时候再执行绘制
        var times = setInterval(function () {
            var xdata = that.data.xdata;
            var schooldata = that.data.schooldata;
            var data1 = that.data.data1;
            var data2 = that.data.data2;
            if (xdata && data1 && data2 && schooldata) {
                clearInterval(times)
                const chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr // new
                });
                canvas.setChart(chart);
                var option = {
                    tooltip: {
                        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: {
                        textStyle: { color: '#4CA6A3' },
                        x: 'right',
                        data: [{ name: '签到数', icon: 'rect' }, { name: '时长', icon: 'rect' }]
                    },
                    grid: {
                        left: '2%',
                        right: '2%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            // 设置x轴线的属性
                            axisLabel: {
                                //x轴文字的配置
                                show: true,
                                interval: 0,//使x轴文字显示全
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#4CA6A3', // 设置x轴字体颜色
                                    width: 2, // 设置x轴字体宽度
                                }
                            },
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '时长',
                            position: 'left',
                            alignTicks: true,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    fontSize: 16,
                                    color: '#293C55'
                                }
                            },
                            axisLabel: {
                                formatter: '{value} 小时'
                            }
                        },
                        {
                            type: 'value',
                            alignTicks: true,
                            nameGap: 10,
                            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: '总量',
                            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: '时长',
                            type: 'line',
                            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
                        }
                    ]
                };
                chart.setOption(option, true);
                return chart;
            }
        }, 100)
    },
    /**
   * 生命周期函数--监听页面初次渲染完成
   */
    onReady: function () { },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        const that = this;
        // 监听用户是否登录
        that.watchLogin();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },


    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function (res) {

    },
})