查看: 7023|回复: 2

[8月赛] 【云上的你】前端与后台进行数据交互并使用Echarts显示心得

[复制链接]

1

主题

2

帖子

5

积分

新手上路

Rank: 1

积分
5
发表于 2017-8-1 16:35:10 | 显示全部楼层 |阅读模式
本帖最后由 coldplay 于 2017-8-3 09:41 编辑

作为2017年中移物联网的实习生小白一枚,很高兴能接触到OneNET这个平台,在学习的过程中渐渐了解了这个平台的强大之处,但是也遇到一些问题,比如在使用Ajax获取设备数据时总会报错

报错

报错

后面看到宝马哥在GitHub上的JS-SDK才发现自己代码写错了,用宝马哥的SDK可以获得设备数据,但有一个安全性问题,使用JS-SDK会把我们设备的api-key暴露在浏览器端,任何人都可以在浏览器端获得我们设备的api-key

<-----------------------------------------------------------------华丽的分割线---------------------------------------------------------------->

为了设备api-key不被暴露在浏览器端,我们采取后台获取数据传给前端的方式进行数据显示,前端采用Echarts进行数据的展示,具体效果如下图 TIM图片20170801161629.png
这只是其中一个数据的显示情况,代码具体实现并不难,首先引入echarts.min.js,具体文件可以去官网自行下载,然后准备一个容器用来承载数据,比如放置一个div标签。
js代码具体实现如下
  1. var myChart = echarts.init( document.getElementById('main') );

  2.                 // 初始化数据
  3.                 $.get('data.json').done(function (data) {

  4.                         console.log(data.data.datastreams[0]);
  5.                         var arrTime = [];
  6.                         var arrTem = [];
  7.                         for (var i = 0; i < data.data.datastreams[0].datapoints.length; i++) {
  8.                                 arrTime.push(data.data.datastreams[0].datapoints[i].at);
  9.                                 arrTem.push(data.data.datastreams[0].datapoints[i].value);
  10.                         }

  11.                           option = {
  12.                             title : {
  13.                                 text: data.data.datastreams[0].id,
  14.                                 // subtext: '纯属虚构'
  15.                             },
  16.                             tooltip : {
  17.                                 trigger: 'axis'
  18.                             },
  19.                             legend: {
  20.                                 data:['空气湿度','']
  21.                             },
  22.                             toolbox: {
  23.                                 show : true,
  24.                                 feature : {
  25.                                     mark : {show: true},
  26.                                     dataView : {show: true, readOnly: false},
  27.                                     magicType : {show: true, type: ['line', 'bar']},
  28.                                     restore : {show: true},
  29.                                     saveAsImage : {show: true}
  30.                                 }
  31.                             },
  32.                             calculable : true,
  33.                             xAxis : [
  34.                                 {
  35.                                     type : 'category',
  36.                                     boundaryGap : false,
  37.                                     data : arrTime
  38.                                 }
  39.                             ],
  40.                             yAxis : [
  41.                                 {
  42.                                     type : 'value',
  43.                                     axisLabel : {
  44.                                         formatter: '{value} RH'
  45.                                     }
  46.                                 }
  47.                             ],
  48.                             series : [
  49.                                 {
  50.                                     name:'空气湿度',
  51.                                     type:'line',
  52.                                     data:arrTem,
  53.                                     markPoint : {
  54.                                         data : [
  55.                                             {type : 'max', name: '最大值'},
  56.                                             {type : 'min', name: '最小值'}
  57.                                         ]
  58.                                     },
  59.                                     markLine : {
  60.                                         data : [
  61.                                             {type : 'average', name: '平均值'}
  62.                                         ]
  63.                                     }
  64.                                 },
  65.                             ]
  66.                         };
  67.                     
  68.                           myChart.setOption(option);
  69.                 });
复制代码
我们的数据显示之后得实现动态刷新,不能一个数据就在那里不动了。ECharts 由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得异常简单。所有数据的更新都通过 setOption实现,我们只需要定时获取数据,setOption 填入数据,而不用考虑数据到底产生了那些变化,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。定时获取数据设定一个定时器规定每隔多久去获取数据就好。


这就是我使用Echarts的一点点心得体会,Echarts的使用并不难,但是要自己亲手做一个图表展示可能会有点难度。它的官网里有很多案列演示,API也很完善,感兴趣的同学可以去它的官网看看。
回复

举报

0

主题

3

帖子

8

积分

新手上路

Rank: 1

积分
8
发表于 2017-8-4 22:14:16 | 显示全部楼层
学习,感谢分享!

51

主题

161

帖子

207

积分

中级会员

Rank: 3Rank: 3

积分
207
发表于 2017-8-7 10:24:02 | 显示全部楼层
江山代有才人出~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表