大屏可视化的一些总结

研究的大屏框架是vue-big-screen-plugin

一 。

所谓的大屏就是根据当前屏幕的大小通过css3的scale缩放自适应 一般设置初始化的宽高为1920 1080px

然后通过函数  window.addEventListener('resize', resize) 事件监听去动态的修改缩放比

也可以使用dataV的

dv-full-screen-container

这个组件 

二.

vw、vh 与% 的区别

我的理解vw,vh是视口窗口的  %是父元素的  实测在子元素中使用vw也是窗口的百分比

多记录一点rem 是根节点的font-size的大小 如果当根元素设置了字体大小单位为100px时,那么1rem=100px (相对于根节点的字体大小的尺寸)

dataV

官方声明 组件库的开发和调试都使用Chrome浏览器,没有时间和精力做其他浏览器的兼容,尤其是IE。

所以请使用Chrome浏览器。

组件的默认宽高都是100%,可以根据父容器宽高进行自适应,但在某些情况下组件宽高可能表现异常,这种情况一般是因为组件的父容器宽高发生了变化,而组件没有侦知这一变化,你可以在组件上绑定key值,在更改父容器宽高且页面完成重绘后(使用$nextTick),更新key值,使组件强制刷新,以获取正确宽高。

避免你的组件更新了数据后,状态却不刷新,也就是没变化,请务必看这里 重新赋值

组件props均未设置deep监听,刷新props时,请直接生成新的props对象(基础数据类型除外),或完成赋值操作后使用ES6拓展运算符生成新的props对象(this.someProps = { ...this.someProps })。

使用dataV的图表的时候

尽量避免频繁更新图表状态(时间间隔小于3s),频繁更新时建议animationEnd配置为true,强制清空图表动画队列,避免频繁更新图表状态时动画池体积持续增长(绘制速度低于新增速度,造成堆积),导致内存泄露。

你可能感兴趣的:(前端,javascript,html)