搭建简易的物联网服务端和客户端-ECharts数据显示（七）

治电小白菜

发布于 2020-08-25 11:17:17

1.1K0

发布于 2020-08-25 11:17:17

文章被收录于专栏：技术综合技术综合

继续缓慢学习。昨天前端获取到了数据，今天我们来通过ECharts来显示数据。代码地址：https://github.com/klren0312/stm32_wifi 2017.3.22

搭建简易的物联网服务端和客户端目录

ECharts数据显示

1.ECharts基本

1)介绍百度推出的一款纯 Javascript 的图表库。官方网址：http://echarts.baidu.com/index.html 2)基本使用

官方网站有文档，我这里放出最基本结构(我也就会这么多。。。)

2.EChart异步获取数据显示

百度遇到坑，后来发现官方快速入门就有介绍。。。

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);
    });