前言
前期团队一直在搭建与云端服务器对接的事情,近期终于落地,数据采集中心实现了服务端与可视化编辑器的融合,整个案例中脚本就两百行左右,基本通过可视化平台配置完成,体现我们平台的高效性。今天通过本案例讲解下服务端接口搭建、服务端与可视化编辑器是如何配合使用的。
看板效果图
设备数据上报阿里云
服务端接口搭建
前期准备,服务端上传设备到阿里云端,完成后,我们打开上图阿里云平台具体要对接的产品数据,按下列骤订阅消息
![b05733e01b52561b1588b2ec2e3f199c303.jpg](https://oscimg.oschina.net/oscnet/b05733e01b52561b1588b2ec2e3f199c303.jpg)
![635928fa081743fa5c16128510eba1786da.jpg](https://oscimg.oschina.net/oscnet/635928fa081743fa5c16128510eba1786da.jpg)
数据集准备
![ca3b2ee172eefa6531fc13e3efe49f98dc0.jpg](https://oscimg.oschina.net/oscnet/ca3b2ee172eefa6531fc13e3efe49f98dc0.jpg)
可视化端实现过程
改变了以往html+css的方式,ui设计师直接在页面中设计、拖拉组件方式就可以很快完成
一、简单数据展示实现过程 设计图标样式,定义需要动态改变的参数![2a72f0a99380f2e814a43011081854c46f3.jpg](https://oscimg.oschina.net/oscnet/2a72f0a99380f2e814a43011081854c46f3.jpg)
![58fd4ea34f8c6ab0d6a6774c9a9efcdccf5.jpg](https://oscimg.oschina.net/oscnet/58fd4ea34f8c6ab0d6a6774c9a9efcdccf5.jpg)
![bd774ade039cfc87b96250b23b68e0b831d.jpg](https://oscimg.oschina.net/oscnet/bd774ade039cfc87b96250b23b68e0b831d.jpg)
二、拖拉组件实现过程
![5621be05550b6f505f02fc4a002c0d7b894.jpg](https://oscimg.oschina.net/oscnet/5621be05550b6f505f02fc4a002c0d7b894.jpg)
![3dfac269a2688d54ec29a33c991a7649196.jpg](https://oscimg.oschina.net/oscnet/3dfac269a2688d54ec29a33c991a7649196.jpg)
var fontResize=data.a('fontResize');if(fontResize){ option.textStyle.fontSize=data.a('allFontSize')\*gv.getZoom();//字体 option.title.textStyle.fontSize=data.a('titleFontsize')\*gv.getZoom();//标题字体大小 option.xAxis\[0\].axisLabel.textStyle.fontSize=data.a('allFontSize')\*gv.getZoom();//XY轴字体大小 option.yAxis\[0\].axisLabel.textStyle.fontSize=data.a('allFontSize')\*gv.getZoom();//XY轴字体大小 cache.htmlChart.clear();//清空缓存重新加载 cache.htmlChart.setOption(option);}
引入自定义组件,设置图表参数
![0065a5a28269a83bc5528502137dede3b82.jpg](https://oscimg.oschina.net/oscnet/0065a5a28269a83bc5528502137dede3b82.jpg)
![ce52ad1c08bc5504ac82a059155ade8d78f.jpg](https://oscimg.oschina.net/oscnet/ce52ad1c08bc5504ac82a059155ade8d78f.jpg)
function(data){ for(var item in data){ if(item == '40005'){ pm_xAxis.push(util.formatDate(new Date(data[item].time), 'mm:ss')); pm_series0.push(data[item].value); }else if(item == '40010'){ pm_series1.push(data[item].value); } } if(pm_xAxis.length>8){ pm_xAxis.shift(); pm_series0.shift(); pm_series1.shift(); } return [ { "name": "PM2.5", "type": "line", "symbol": "none", "data": pm_series0, "smooth": false }, { "name": "PM10", "type": "line", "symbol": "none", "data": pm_series1, "smooth": false } ]}
看板中的其他模块大同小异,按上述步骤熟练后都可以快速实现,就不再重复描述,有兴趣同学可以动手试一试哦!
本文为云栖社区原创内容,未经允许不得转载。