繼續緩慢學習。昨天前端獲取到了數據，今天我們來通過ECharts來顯示數據。
代碼地址：https://github.com/klren0312/stm32_wifi
2017.3.22

搭建簡易的物聯網服務端和客戶端目錄

ECharts數據顯示

1.ECharts基本

1)介紹
百度推出的一款純 Javascript 的圖表庫。
官方網址：http://echarts.baidu.com/index.html


2)基本使用

官方網站有文檔，我這里放出最基本結構(我也就會這么多。。。)

基本結構.png

2.EChart異步獲取數據顯示

百度遇到坑，后來發現官方快速入門就有介紹。。。

官方異步說明.png

1)建立圖表代碼(body里面要建個id為main的div，記得設置長寬)
兩個折線圖放在一起，分別顯示溫度和濕度。

//初始化echarts
var myChart = echarts.init(document.getElementById('main'));
//指定圖表的配置項和數據
var option ={
    title:{
        text:'溫濕度'
    },
    tooltip:{},//提示框
    legend:{//圖例組件
        data:['溫度','濕度']
    },
    xAxis:{
        data:["1","2","3","4","最新"]
    },
    yAxis:{},
    series: [{
        name: '溫度',
        type: 'line',
        data: []
    },{
        name:"濕度",
        type:'line',
        data:[]
    }]
};
//使用設置的配置項和數據顯示圖表
myChart.setOption(option);

3)fetch獲取數據并加載到圖表中

//fetch相關函數
function status(response){
    if(response.status>=200 && response.status<300){
        return Promise.resolve(response);
    }
    else{
        return Promise.reject(new Error(response.statusText));
    }
}
function json(response){
    return response.json();
}
獲取溫度數據
fetch("http://127.0.0.1:3000/tem")
    .then(status)
    .then(json)
    .then(function(data){
        //將數據加載到對應series name的表中
        myChart.setOption({
            series: [{
                // 根據名字對應到相應的系列
                name: '溫度',
                data: data
            }]
        });
    })
    .catch(function(err){
        console.log("Fetch錯誤:"+err);
    });
//獲取濕度數據
fetch("http://127.0.0.1:3000/hum")
    .then(status)
    .then(json)
    .then(function(data){
        //將數據加載到對應series name的表中
        myChart.setOption({
             series: [{
                 // 根據名字對應到相應的系列
                 name: '濕度',
                 data: data
             }]
        });
    })
    .catch(function(err){
        console.log("Fetch錯誤:"+err);
    });

3.結果截圖

1)溫濕度折線圖截圖

溫濕度圖表.png

2)溫濕度柱狀圖截圖

溫濕度柱狀圖表.png

@治電小白菜 20170322