vue + echarts 实现监控大屏
主要用vue,这个真的不太懂前端的同学也能够很快上手,文档什么的也很清楚, echarts 也是文档非常清楚,两个加起来做监控大屏,是很好上手的。方案如下该大屏采用半自动化形式,两侧自动,中间固定内容。13定制数据一245...
·
主要用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
更多推荐
已为社区贡献3条内容
所有评论(0)