vue + echarts 实现监控大屏

       主要用vue,这个真的不太懂前端的同学也能够很快上手,文档什么的也很清楚, echarts 也是文档非常清楚,两个加起来做监控大屏,是很好上手的。

       方案如下

       该大屏采用半自动化形式,两侧自动,中间固定内容。

 

1

3

定制数据一

2

4

5

7

定制数据二

6

8

9

11

10

12

13

15

定制图形三

14

16

      最少能接受4个实例,最多16个(不建议布满)。两侧数据展示会根据实例个数做合并与拆分,实例个数是根据占据格数分别为1,2,4。首先进入主页面,获取所有实例数据的url和数据展现形式,并且将url 传到子组件中,子组件根据请求的数据渲染。

      几个重点:

      1,整体布局采用百分比,这样放大缩小不会影响布局,注意百分比要每层div都要加,否则不生效

      2,字体大小图形大小配合百分比使用rem来布,rem根据不同分辨率设置不同大小

      3,echars的各项指标最好不写死,也根据分辨率来

      4,部署在小米电视上,用的飞视浏览器,分辨率会降低,但做了适配不影响,主要是能够全屏。当然也可以打包成apk,个人不太推荐打包成apk,主要是每次迭代都要打包,太麻烦了。


      接口测试数据:http://gongpan2048.cn/api/v1/urllist

      效果:http://gongpan2048.cn:9020/#/

      github: https://github.com/gongpan2048/dashboard.git

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Echarts监控大屏实例十是一个基于Vue框架和Echarts图表库开发的实时监控大屏,用于展示各种实时数据监控信息。 该实例借助Vue框架的响应式特性,可以实时更新数据并展示在大屏上。通过与后端接口的交互,获取最新的监控数据,并将数据传递给Echarts图表进行可视化展示。 在该实例中,我们可以看到各种类型的图表,如柱状图、折线图、饼状图等,用于展示不同类型的监控指标。例如,柱状图可以展示各个地区的销售额,折线图可以展示系统的响应时间变化趋势,饼状图可以展示各个部门的占比。 除了图表,该实例还提供了其他实用的功能。例如,可以设置数据刷新间隔,使数据可以按照一定的频率进行更新,保持实时性。同时,还可以对图表进行定制化的配置,包括颜色、字体、显示内容等方面,以满足不同的需求。 在实际应用中,该实例可以用于各种监控场景。例如,可以用于电商平台的实时订单监控,可以展示订单量、销售额等信息;也可以用于后台系统的性能监控,可以展示CPU、内存等指标的变化情况。通过将实时数据视化展示,可以帮助用户快速了解当前状态,并及时采取相应的措施。 总的来说,Vue Echarts监控大屏实例十是一个功能强大、易于使用的实时监控大屏,可以帮助用户实时监控各种指标,并在需要时作出相应的决策。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值