|
|
@@ -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,114 @@ 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(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' })
|
|
|
+ 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 () { },
|
|
|
/**
|
|
|
* 生命周期函数--监听页面显示
|
|
|
@@ -58,10 +152,11 @@ Page({
|
|
|
|
|
|
},
|
|
|
|
|
|
+
|
|
|
/**
|
|
|
* 用户点击右上角分享
|
|
|
*/
|
|
|
- onShareAppMessage: function () {
|
|
|
+ onShareAppMessage: function (res) {
|
|
|
|
|
|
- }
|
|
|
+ },
|
|
|
})
|
zs