物联网全栈教程-从云端到设备(十)

本文介绍如何在物联网应用中使用React创建仪表盘。通过VSCode打开项目,复制官方代码,解决依赖错误,安装并配置viser-react组件。在完成基本仪表盘展示后,鼓励读者自行实践调整仪表盘样式,并预告下篇文章将探讨如何显示设备数据。
摘要由CSDN通过智能技术生成

上一篇文章零妖老哥已经通过一行代码即 bone init 初始化了一个默认的Web应用,通过执行另外一行代码 bone start 启动了本地的Web服务,并且可以通过谷歌浏览器来查看这个网页的效果。今天我们就去查找一些官方的帮助文档,然后根据提供的例程代码来修改为己用。
有些坑零妖已经跳过了,所以就直接放出四个网址,里面都是干货。整个物联网弹幕器的项目中的Web应用所遇到的问题,都是通过浏览这四个网址来解决的。
https://bone.aliyun.com/bone-web/bonewebsdk.html?name=wpgl7p     Bone Web 的官方介绍
https://bone.aliyun.com/bone-web/component.html                   UI组件的详细介绍
https://viserjs.github.io/demo.html                                 数据可视化组件
https://linkdevelop.aliyun.com/docCenter#/                          物联网设备相关的API说明
注意:使用一些组件的时候,要先安装它们到电脑上。然后再修改package.json这个文件,把对这个组件的依赖添加进去,这样上传到服务器之后网页就会正常运行。具体方法零妖接下来会说。

我们的目标是把设备上报的温度数据通过仪表盘的形式显示到网页上。在网页上显示一个仪表盘的代码最简单的做法就是去复制别人的代码然后简单修改一下啊。我们用到的其实是一个叫做“数据可视化”的组件,这个组件零妖认为在物联网项目中将会经常用到,因为大数据和物联网无非就是一些数据的交换和显示。

进入 https://viserjs.github.io/demo.html#/gauge/basic-gauge ,查看React的官方例

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值