今天主要完成的是表的局部刷新，然后就是整體展示。
代碼地址：https://github.com/klren0312/stm32_wifi
2017.3.23

搭建簡易的物聯(lián)網(wǎng)服務(wù)端和客戶端目錄

整合

1.EChart的局部刷新

1）setTimeout 和 setInterval
setTimeout 在指定的毫秒數(shù)后，將定時任務(wù)處理的函數(shù)添加到執(zhí)行隊列的隊尾（只是延遲執(zhí)行一次）
setInterval 按照指定的周期（毫秒數(shù)計時），將定時任務(wù)處理函數(shù)添加到執(zhí)行隊列的隊尾（周期循環(huán)執(zhí)行）

2）局部刷新
剛開始是準(zhǔn)備進行全部頁面進行刷新，來更新數(shù)據(jù)（原諒我的無知）

function freshWeb(){
    window.location.reload();
}
setInterval('freshWeb()',3000)

但是感到體驗很差，于是我把fetch數(shù)據(jù)的相關(guān)放到一個函數(shù)中，然后用setInterval對fetch數(shù)據(jù)的函數(shù)循環(huán)執(zhí)行，就可以達到ECharts數(shù)據(jù)更新的操作。

function getData(){
    fetch("http://127.0.0.1:3000/tem")
        .then(status)
        .then(json)
        .then(function(data){
            myChart.setOption({
                series: [{
                // 根據(jù)名字對應(yīng)到相應(yīng)的系列
                 name: '溫度',
                 data: data
                }]
            });
        })
        .catch(function(err){
             console.log("Fetch錯誤:"+err);
        });
}
//循環(huán)執(zhí)行fetch數(shù)據(jù)獲取，達到ECharts數(shù)據(jù)更新的操作
setInterval('getData()',10);

2.整合實戰(zhàn)結(jié)果圖片

1）實時溫濕度web顯示

實時溫濕度web顯示頁面

2）服務(wù)端數(shù)據(jù)存儲

服務(wù)端

3）單片機照片

單片機

3.感謝大家

本人初學(xué)者，什么都不會，自己慢慢摸索，很多用到的技術(shù)和思路可能很繁瑣，到后面隨著我的學(xué)習(xí)會慢慢改正。

@治電小白菜 20170323