ball-applet/pagesSchool/schAdmin/stat/coach.js

const app = getApp()
import * as echarts from '../../../commpents/ec-canvas/echarts'
let chart;
Page({
    data: {
        frameStyle: { useTop: true, name: '教练统计', leftArrow: true, useBar: false },
        // 选中
        tabs: {
            active: '0',
            menu: [
                { title: '教练出勤率', active: '0' },
                { title: '教练收入情况', active: '1' },
            ]
        },
        // 教练
        zhcoach: '',
        coach_id: '',
        coachList: [],
        value: [],
        date: [],
    },
    // 返回
    back(e) {
        wx.navigateBack({ delta: 1 })
    },
    // 选项卡选择
    tabsChange: function (e) {
        const that = this;
        let data = e.detail;
        that.setData({ 'tabs.active': data.active })
        that.watchLogin();
    },
    // 选择教练
    coachChange: async function (e) {
        const that = this;
        let data = that.data.coachList[e.detail.value];
        if (data) {
            that.setData({ coach_id: data.coach_id });
            that.setData({ zhcoach: data.coach_id_name });
        }
        await that.watchLogin();
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: async function (options) {
        const that = this;
        that.setData({ ec: { onInit: that.initChart } })
        // 监听用户是否登录
        await that.watchLogin();
    },
    // 监听用户是否登录
    watchLogin: async function () {
        const that = this;
        wx.getStorage({
            key: 'user',
            success: async res => {
                // 教练
                const abb = await app.$get(`/rcs`, { school_id: res.data.info.id });
                if (abb.errcode == '0' && abb.total > 0) {
                    that.setData({ coachList: abb.data })
                }
                if (that.data.coach_id) {
                    if (that.data.tabs.active == '0') {
                        const arr = await app.$get(`/statistics/schoolSignCoach`, { school_id: res.data.info.id, coach_id: that.data.coach_id });
                        if (arr.errcode == '0') {
                            var date = []
                            var value = []
                            arr.data.map(function (item) {
                                var m = ''; m = item.m; date.push(m)
                                var sevm = '';
                                sevm = item.value.split('%').join('')
                                value.push(sevm)
                            })
                            that.setData({ date: date })
                            that.setData({ value: value })
                            const option = {
                                xAxis: [{ data: date, }],
                                yAxis: [{
                                    axisLabel: {
                                        formatter: '{value}%',
                                    },
                                }],
                                series: [{
                                    data: value,
                                    itemStyle: {
                                        normal: {
                                            label: { show: true, formatter: '{c}%', }
                                        }
                                    },
                                }],
                                tooltip: [{ formatter: '{b}月:出勤率{c}%' }]
                            }
                            if (chart) chart.setOption(option)
                        }
                    } else {
                        const arr = await app.$get(`/statistics/schoolCoachIn`, { school_id: res.data.info.id, coach_id: that.data.coach_id });
                        if (arr.errcode == '0') {
                            var date = []
                            var value = []
                            arr.data.map(function (item) {
                                var m = ''; m = item.m; date.push(m)
                                var sevm = ''; sevm = item.total; value.push(sevm)
                            })
                            that.setData({ date: date })
                            that.setData({ value: value })
                            const option = {
                                xAxis: [{ data: date, }],
                                yAxis: [{
                                    axisLabel: {
                                        formatter: '{value}元',
                                    },
                                }],
                                series: [{
                                    data: value,
                                    itemStyle: {
                                        normal: {
                                            label: { show: true, formatter: '{c}元', }
                                        }
                                    },
                                }],
                                tooltip: [{ formatter: '{b}月:收入{c}元' }]
                            }
                            if (chart) chart.setOption(option)
                        }
                    }
                }
            },
            fail: async res => {
                wx.redirectTo({ url: '/pages/index/index' })
            }
        })
    },
    // 折线图
    initChart(canvas, width, height, dpr) {
        const that = this;
        var date = that.data.date;
        var value = that.data.value;
        chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr
        });
        canvas.setChart(chart);
        var option = {
            grid: {
                left: 20,
                right: 20,
                bottom: 145,
                top: 60,
                containLabel: true
            },
            tooltip: {
                show: true,
                trigger: 'axis',
                formatter: '{b}:{c}' // 格式化数值百分比输出
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date,
                // 设置x轴线的属性
                //使x轴文字显示全
                axisLabel: {
                    formatter: '{value}月',
                    show: true, interval: 0,
                },
            },
            yAxis: {
                x: 'center',
                type: 'value',
                splitLine: {
                    lineStyle: { type: 'dashed' }
                },
            },
            series: [
                {
                    type: 'line',
                    smooth: true,
                    data: value,
                    itemStyle: {
                        normal: {
                            color: '#ff7f50',
                            lineStyle: { color: '#5470C6' },
                            label: { show: true }
                        }
                    },
                }
            ]
        };
        chart.setOption(option, true);
        return chart;
    },
    /**
   * 生命周期函数--监听页面初次渲染完成
   */
    onReady: function () { },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },
    /**
     * 页面上拉触底事件的处理函数
     */
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

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

    },

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

    },


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

    },
})