大屏可视化的一些总结

研究的大屏框架是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，强制清空图表动画队列，避免频繁更新图表状态时动画池体积持续增长（绘制速度低于新增速度，造成堆积），导致内存泄露。