前端大屏可视化项目

本文详述了作者在前端大屏可视化项目中遇到的挑战及解决方案,包括屏幕适配策略、字体大小选择、不同尺寸屏幕的适配方法如使用zoom、transform scale或rem,以及如何处理大屏样式难题,如使用雪碧图优化图片加载。同时分享了DataV组件库中轮播表数据更新问题、3D柱状图实现、进度条和折线图渐变背景的制作方法,最后讨论了弹窗位置动态调整的实现技巧。
摘要由CSDN通过智能技术生成

这篇文章记录了我开发中遇到的问题和解决方法。

1、确定需要适配屏幕的大小,虽然我们前端默认大屏的1920*1080起步的,但是防止有人不懂开发前需要新搞清楚适配范围;

2、和UI说清楚字体大小尽量在12px以上,一是12px以下写起来麻烦;二是12px以下在大屏中展示效果不好;

3、不同大小屏幕的适配方法 我使用的是zoom,其中1920是设计稿的宽度

const s = window.innerWidth / 1920
document.body.style.zoom = s + ''

当然transform scale 和rem等方式也行;

4、大屏中有很多样式很难实现,可能会使用很多图片代替,图片太多可以使用雪碧图来优化;

5、DataV组件库中的轮播表config数据更新后视图不发生变化的解决方法:

this.config.data = ['foo', 'foo']是无效的

this.config = { data: ['foo', 'foo'] }才是有效的

6、3d柱形图的实现:模仿了
https://gallery.echartsjs.com/editor.html?c=xH0E6KFMcG

<
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值