微信小程序 Echarts 异步数据更新的练习，被坑了很多次，特作记录。
作者：罗兵
地址：https://www.cnblogs.com/hhh5460/p/9989805.html
0、效果图
1、视图
2、设置
//index.json{ "usingComponents": { "ec-canvas": "../../components/ec-canvas/ec-canvas" }}
3、样式
/**index.wxss**/ec-canvas { width: 100%; height: 100%;}
/**app.wxss**/.container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box;}
4、逻辑
/**index.js**/// 载入组件import * as echarts from '../../components/ec-canvas/echarts';// 载入工具//const util = require('../../utils/util.js')// 全局变量let chart = null;let month = ['月', '月', '月', '月', '月', '月']; //月份let evaporation = [0, 0, 0, 0, 0, 0]; //蒸发量let precipitation = [0, 0, 0, 0, 0, 0]; //降水量function initChart(canvas, width, height) { chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); chart.showLoading(); // 首次显示加载动画 var option = { legend: { data: ['蒸发量', '降水量'] }, xAxis: { data: month //全局变量 }, yAxis: {}, series: [{ name: '蒸发量', type: 'bar', data: evaporation //全局变量 }, { name: '降水量', type: 'line', data: precipitation //全局变量 }] }; chart.setOption(option); chart.hideLoading(); // 隐藏加载动画 return chart;};Page({ data: { ec: { onInit: initChart }, lastid: 0 // 哨兵 }, onReady() { this.data.timer = setInterval(this.getData, 2000); }, getData() { //请求后台数据 var that = this; wx.request({ url: 'http://127.0.0.1:5000/api/weather', herder: { "content-type": "application/json" }, method: "POST", data:{ id: that.data.lastid + 1 // 哨兵，记录上次数据表中的最后id }, success: function(res){ that.setData({lastid: that.data.lastid + 1}); // 下面这三个骚操作受python启发！！ month = month.slice(1).concat(res.data.month); // 数组，先切片、再拼接 evaporation = evaporation.slice(1).concat(res.data.evaporation.map(parseFloat)); //注意map方法 precipitation = precipitation.slice(1).concat(res.data.precipitation.map(parseFloat)); chart.setOption({ xAxis: { data: month //全局变量 }, series: [{ name: '蒸发量', data: evaporation //全局变量 }, { name: '降水量', data: precipitation //全局变量 }] }); if(that.data.lastid == 12){clearInterval(that.data.timer);} }, fail: function (res) {}, complete: function (res) {}, }); }});
5、后端
# flask_restful_api.pyimport sqlite3from flask import Flask, request, render_template, jsonifyapp = Flask(__name__)def get_db(): db = sqlite3.connect('mydb.db') db.row_factory = sqlite3.Row return dbdef query_db(query, args=(), one=False): db = get_db() cur = db.execute(query, args) db.commit() rv = cur.fetchall() db.close() return (rv[0] if rv else None) if one else rv@app.before_first_requestdef create_db(): # 建立连接 conn = sqlite3.connect('mydb.db') c = conn.cursor() # 创建表格 c.execute('''DROP TABLE IF EXISTS weather''') c.execute('''CREATE TABLE weather (id integer, month text, evaporation text, precipitation text)''') # 准备数据（格式：月份,蒸发量,降水量） purchases = [(1,'1月', 2, 2.6), (2, '2月', 4.9, 5.9), (3,'3月', 7, 9), (4,'4月', 23.2, 26.4), (5,'5月', 25.6, 28.7), (6,'6月', 76.7, 70.7), (7,'7月', 135.6, 175.6), (8,'8月', 162.2, 182.2), (9,'9月', 32.6, 48.7), (10,'10月', 20, 18.8), (11,'11月', 6.4, 6), (12,'12月', 3.3, 2.3) ] # 插入数据 c.executemany('INSERT INTO weather VALUES (?,?,?,?)', purchases) conn.commit() conn.close()@app.route("/api/weather", methods=["GET","POST"])def weather(): if request.method == 'POST': res = query_db("SELECT * FROM weather WHERE id = (?)", args=(request.json['id'],)) #以后每次返回1个数据 return jsonify(month = [x[1] for x in res], evaporation = [x[2] for x in res], precipitation = [x[3] for x in res]) # 返回json格式if __name__ == "__main__": app.run(debug=True)
6、要点
a. 前端发送：herder: { "content-type": "application/json"}；
前端接收：response.data（注意，微信将后台数据封装在res.data中, res.data是json格式）
b. 后端接收：request.json['id'] ；
后端发送：jsonify
c. 本地测试设置：
7、参考
微信小程序Cannot read property 'setData' of null错误：https://blog.csdn.net/qq_42183184/article/details/82356208
微信小程序wx.request组件的那些坑：https://www.cnblogs.com/jhlqab/p/6900798.html
flask前端与后端之间传递的两种数据格式：json与FormData：https://www.cnblogs.com/hhh5460/p/8411978.html
flask+sqlite3+echarts3+ajax 异步更新数据：https://www.cnblogs.com/hhh5460/p/6010500.html
we3cschool微信小程序API发起请求：（地址略）