微信小程序 Echarts 异步数据更新
微信小程序 Echarts 异步数据更新的练习,被坑了很多次,特作记录。
作者:罗兵
地址:https://www.cnblogs.com/hhh5460/p/9989805.html
0、效果图
1、视图
<!--index.wxml-->
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
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.py import sqlite3
from flask import Flask, request, render_template, jsonify app = Flask(__name__) def get_db():
db = sqlite3.connect('mydb.db')
db.row_factory = sqlite3.Row
return db def 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_request
def 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发起请求:(地址略)
微信小程序 Echarts 异步数据更新的更多相关文章
- 微信小程序onlaunch异步,首页onLoad先执行?
按照原理是小程序初始化时会先触发APP里的onLaunch事件,之后再执行页面Page里的onLoad事件.但实际请求时在onLaunch事件中请求获取数据,等待返回值的时候Page里的onLoad事 ...
- 微信小程序onLaunch异步,首页onLoad先执行?
本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执 ...
- 微信小程序echarts层级太高
项目中因为需求,底部的tab导航栏是自己写的,在开发者工具中一切正常:但是在真机上页面滑动时,echarts的层级比tab高,调过两者的z-index后仍然如此. 经过查找后发现cover-view和 ...
- 微信小程序异步处理
直接看问题: 然后看打印的结果: 根据上面两图可以看出,代码上先执行的网络请求,再执行打印的变量,但是从下面打印的结果来看,先出结果的是执行打印变量的函数(aafn函数),再打印出网络请求succes ...
- 微信小程序之onLaunch与onload异步问题
所述问题: 前端时间开发了一个微信小程序商城项目,因为这个项目我们的需求是进入小程序就通过wx.login({}) 这个api进行用户登录,获取系统后台的用户基本信息.再此之前,一直以为微信小程序中的 ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序中同步 异步的使用
https://www.jianshu.com/p/e92c7495da76 微信小程序中使用Promise进行异步流程处理 https://www.cnblogs.com/cckui/p/102 ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序学习记录(一)
如何定义一个全局变量: 1,在根目录下app.js中添加 App({ globalData: { g_isPlayingMusic : false, g_currentMusicPostId :nul ...
随机推荐
- 腾讯TBS X5 WebView的简单使用
工作中经常涉及H5网页的加载工作,最多使用的就是安卓系统控件WebView,但是当网页内容比较多的时候,需要等待很久才能加载完,加载完后用户才能看到网页中的内容,这样用户需要等很久,体验很差. 那能不 ...
- C语言中数据类型的本质
数据类型可以理解为固定内存大小的别名.比如int类型,就是表示占用4字节的内存. 1 数据类型的大小 用sizeof操作符获得数据类型的大小. 比如 int a[5]; sizeof(a)就可以得 ...
- 调研getfit
Gitfit实际是一个提供私人教练的服务,其主要业务有三种,“局部减脂”每天0.5-1小时,对局部高强度的刺激,快速达到塑形目地,不需要复杂器械,0基础也能跟上训练进度,并提供咨询师.营养师团队.专属 ...
- 建站相关-github+hexo, Markdown
sunwhut的博客写的tutorial非常详细,参照该文一步步来会很顺利. 以后有时间也可以鼓捣一下Django. hexo: 使用了上面博客推荐的NexT主题.NexT主题配置方式见此文. hex ...
- percona pt toolkit 总结
##=====================================================##pt-osc之工作流程:1.检查更改表是否有主键或唯一索引,是否有触发器2.检查修改表 ...
- 2019 wannafly winter camp day 3
2019 wannafly winter camp day 3 J 操作S等价于将S串取反,然后依次遍历取反后的串,每次加入新字符a,当前的串是T,那么这次操作之后的串就是TaT.这是第一次转化. 涉 ...
- css固定footer到浏览器底部的方法
<html> <head></head> <body> <div class="page-wrapper"> <d ...
- FastDFS分布式文件系统设计原理
转载自http://blog.chinaunix.net/uid-20196318-id-4058561.html FastDFS是一个开源的轻量级分布式文件系统,由跟踪服务器(tracker ser ...
- PHPer是草根吗
以下文字并没有非常多的技术词汇,所以只要对PHP感兴趣的人都可以看看. PHPer是草根吗? 从PHP诞生之日起,PHP就开始在Web应用方面为广大的程序员服务.同时,作为针对Web开发量身定制的脚本 ...
- [luogu4072] 征途
题面 题意体面中写得很明确, 应该不用我说了, 方差的概念在初中人教版九年级数学中有所提到, 没有上过初中的同学们可以左转百度. 将序列拆为几段求最值, 我们考虑用dp来实现. 先推一下式子, 令方差 ...