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(function () {
                    console.log("模拟请求")
                    // 数据
                    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];
                    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'
                    },
                    legend: {
                        data: schooldata
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xdata
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: schooldata[0],
                            type: 'line',
                            stack: 'Total',
                            data: data1
                        },
                        {
                            name: schooldata[1],
                            type: 'line',
                            stack: 'Total',
                            data: data2
                        },
                        {
                            name: schooldata[2],
                            type: 'line',
                            stack: 'Total',
                            data: data1
                        },
                        {
                            name: schooldata[3],
                            type: 'line',
                            stack: 'Total',
                            data: data2
                        },
                        {
                            name: schooldata[4],
                            type: 'line',
                            stack: 'Total',
                            data: data1
                        }
                    ]
                };
                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) {

    },
})