记录上一次的后续---echarts动态柱状图

最新推荐文章于 2024-06-11 09:15:43 发布

chen3673

最新推荐文章于 2024-06-11 09:15:43 发布

阅读量194

点赞数

分类专栏：单片机互联网

本文链接：https://blog.csdn.net/chen3673/article/details/112735469

版权

单片机互联网专栏收录该内容

9 篇文章 0 订阅

订阅专栏

说明：

目前经过测试，实现了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的分享

chen3673

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
记录上一次的后续---echarts动态柱状图

说明：目前经过测试，实现了ESP8266发送数据到server然后转存数据库，最后由页面显示出动态的柱状图表使用的整体代码均是上一次，只是针对file.html文件作出如下修改<!DOCTYPE html><body><title>传输文件</title> <button onclick="tim()">开始</button> <button onclick="xrl2()">返回&l...
复制链接

扫一扫