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

最新推荐文章于 2024-06-10 08:24:01 发布

chengyang4485

最新推荐文章于 2024-06-10 08:24:01 发布

阅读量264

点赞数

文章标签：嵌入式 json javascript ViewUI

原文链接：https://my.oschina.net/CIIren/blog/864457

版权

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

搭建简易的物联网服务端-STM32（一）

搭建简易的物联网服务端-Nodejs_net（二）

搭建简易的物联网服务端-Nodejs_mysql（三）

搭建简易的物联网服务端-net+mysql（四）

搭建简易的物联网服务端-第一次融合（五）

搭建简易的物联网服务端-Nodejs_express服务（六）

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

ECharts数据显示

1.ECharts基本

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

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

基本结构.png

<br>

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