记录上一次的后续---echarts动态柱状图
说明：
目前经过测试，实现了ESP8266发送数据到server然后转存数据库，最后由页面显示出动态的柱状图表
使用的整体代码均是上一次，只是针对file.html文件作出如下修改
<!DOCTYPE html>
<body>
<title>传输文件</title>
<button onclick="tim()">开始</button>
<button onclick="xrl2()">返回</button>
<button onclick="setInterval(0)">tubiao</button>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="../static/echarts.min.js"></script>
<!-- 当上传文件之后进行的操作 -->
<p id="demo">"e d d "</p>
<p id="demi">"ccc "</p>
<p id="dema">"aaaa "</p>
<p id="demc">"cccac "</p>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById(main));
function outt() {
// 输出接收到的文字数据
document.getElementById("demo").innerHTML=xhr.responseText;
}
function error() {
document.getElementById("demo").innerHTML="请求出错";
}
var xhr = new XMLHttpRequest();
function xrl(){
xhr.open("GET", "http://127.0.0.1:5000/upload", false);
xhr.send();
if (xhr.readyState == 4){
xhr.onload = outt()
}
else{
xhr.onerror = error()
}
var a= JSON.parse(xhr.responseText);
document.getElementById("demo").innerHTML=a.tname;
document.getElementById("demi").innerHTML=a.tvalue;
document.getElementById("dema").innerHTML=option.serise.name;
document.getElementById("demc").innerHTML=a.hvalue;
}
function xrl2(){
window.location.href="http://127.0.0.1:5000/dat";//页面跳转，本地跳转
}
function tim(){
setInterval(xrl,6000);
}
</script>
<script>
var xxhr = new XMLHttpRequest();
function txxrl(){
xxhr.open("GET", "http://127.0.0.1:5000/upload", false);
xxhr.send();
if (xxhr.readyState == 4){
xxhr.onload = outt()
}
else{
xxhr.onerror = error()
}
var a= JSON.parse(xxhr.responseText);
//document.getElementById("demi").innerHTML=a.tvalue;
//document.getElementById("demc").innerHTML=a.hvalue;
return a.tvalue;
}
function hxxrl(){
xxhr.open("GET", "http://127.0.0.1:5000/upload", false);
xxhr.send();
if (xxhr.readyState == 4){
xxhr.onload = outt()
}
else{
xxhr.onerror = error()
}
var a= JSON.parse(xxhr.responseText);
//document.getElementById("demi").innerHTML=a.tvalue;
//document.getElementById("demc").innerHTML=a.hvalue;
return a.hvalue;
}
var myChart = echarts.init(document.getElementById(main));
setInterval(function () {
var option = {
xAxis: {
data: [1, 4, 2, , 5, , , ]
},
yAxis: [
{
type: value,
max: 100
}
],
series: {
type: bar,
data: []
}
};
var seriesData = [];
//for (var i = 0; i < option.xAxis.data.length; i++) {
//option.series.data[i] = Math.random() * 80;
option.series.data[0] = txxrl();
option.series.data[1] = hxxrl();
//}
myChart.setOption(option);
}, 1000);
</script>
</body>
附录最后代码打包分享
链接：https://pan.baidu.com/s/1RzLc6mQZdMqOiN9UgsIouQ 提取码：qk7u 复制这段内容后打开百度网盘手机App，操作更方便哦--来自百度网盘超级会员V4的分享
上一篇：
Java架构师技术进阶路线图
下一篇：
你所不知道的MAC（1）——媒体接入控制