搭建简易的物联网服务端和客户端-ECharts数据显示(七)
2017-05-21 00:00
375 查看
继续缓慢学习。昨天前端获取到了数据,今天我们来通过ECharts来显示数据。
代码地址:https://github.com/klren0312/stm32_wifi
2017.3.22
搭建简易的物联网服务端和客户端目录
百度推出的一款纯 Javascript 的图表库。
官方网址:http://echarts.baidu.com/index.html
2)基本使用
官方网站有文档,我这里放出最基本结构(我也就会这么多。。。)
![](https://static.oschina.net/uploads/img/201705/21194503_tpzE.png)
基本结构.png
![](https://static.oschina.net/uploads/img/201705/21194504_Umv0.png)
官方异步说明.png
1)建立图表代码(body里面要建个id为main的div,记得设置长宽)
两个折线图放在一起,分别显示温度和湿度。
3)fetch获取数据并加载到图表中
![](https://static.oschina.net/uploads/img/201705/21194505_wH67.png)
温湿度图表.png
2)温湿度柱状图截图
![](https://static.oschina.net/uploads/img/201705/21194506_S2J4.png)
温湿度柱状图表.png
@治电小白菜 20170322
代码地址:https://github.com/klren0312/stm32_wifi
2017.3.22
搭建简易的物联网服务端和客户端目录
ECharts数据显示
1.ECharts基本
1)介绍百度推出的一款纯 Javascript 的图表库。
官方网址:http://echarts.baidu.com/index.html
2)基本使用
官方网站有文档,我这里放出最基本结构(我也就会这么多。。。)
![](https://static.oschina.net/uploads/img/201705/21194503_tpzE.png)
基本结构.png
2.EChart异步获取数据显示
百度遇到坑,后来发现官方快速入门就有介绍。。。![](https://static.oschina.net/uploads/img/201705/21194504_Umv0.png)
官方异步说明.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)温湿度折线图截图![](https://static.oschina.net/uploads/img/201705/21194505_wH67.png)
温湿度图表.png
2)温湿度柱状图截图
![](https://static.oschina.net/uploads/img/201705/21194506_S2J4.png)
温湿度柱状图表.png
@治电小白菜 20170322
相关文章推荐
- 搭建简易的物联网服务端-ECharts数据显示(七)
- 搭建简易的物联网服务端和客户端-Maibu显示(九)
- 搭建简易的物联网服务端和客户端-微博发送信息(十五)
- 搭建简易的物联网服务端和客户端-DCloud手机端(十)
- 搭建简易的物联网服务端和客户端-第二次增补(十二)
- 搭建简易的物联网服务端和客户端-网络控制(二十)
- 搭建简易的物联网服务端和客户端-Nodejs_PM2(十八)
- 搭建简易的物联网服务端和客户端-数据库功能增加(十三)
- 搭建简易的物联网服务端和客户端-第一次融合(五)
- 搭建简易的物联网服务端和客户端-邮件通知(十九)
- 搭建简易的物联网服务端和客户端-第三次增补(二十二)
- 搭建简易的物联网服务端和客户端-Nodejs_express服务(六)
- 搭建简易的物联网服务端和客户端-Maibu控制(二十一)
- 搭建简易的物联网服务端和客户端整合目录
- 搭建简易的物联网服务端和客户端-整合(八)
- 搭建简易的物联网服务端和客户端-蓝牙控制(十六)
- 搭建简易的物联网服务端和客户端-Cortana控制(十七)
- 搭建简易的物联网服务端和客户端-微博接口(十四)
- 搭建简易的物联网服务端和客户端-第一次增补(十一)
- ext异步请求一个aspx/ashx/web service取得数据,服务端返回一个json.然后客户端接收并显示.