前端大屏页面布局经验

额··· 其实谈不上经验，只能说是开发过程中值得记录一下的东西，不一定是对的。

分辨率

首先一点，大屏对分辨率和显示器是有要求的，因为他不像一般的页面，出个纵向的滚动条啥的无所谓，不是特殊情况下，大屏是不能出现滚动条的，所以其实不是随便一台电脑，随便一个分别率都可以使用大屏的，目前一般的分别率是 19201080100%的，但是具体得根据设计师设计图决定，还有，大屏是一般是全屏效果，就是F11电脑全屏，不加上浏览器上不标签栏、地址栏和书签栏的区域。

Echarts

再一个，大屏开发过程中就会发现，百分之九十的大屏页面都是展示数据报表，就是各种Echarts柱形图、折线图、雷达图的展示，所以说对于Echarts的使用就得稍微熟练一点，因为大部分的大屏设计师不会把页面设计的就是echarts官网示例一样的简陋样式，需要开发者根据echarts的配置手册，尽可能的调试成设计师设计的样式，配置手册东西超级多，这个步骤需要花费大部分时间，碰到难一点的，一个echarts调半天也是可能的，好在弄得多了，有些地方就记住了，后来也就慢慢的快了。如果没有做过或者是接触过，一时间很难找到该使用哪个属性配置样式，这个时候就不要瞎找了，抓紧时间百度，形容一下想要的样子，就很容易找到，要相信，像我们这种初学者很多，肯定又问在网上提问的人也很多，但是百度到的大部分不可能和我们需要的一模一样，不要上来就骂，根据别人的资料，修改成自己需要的，也是一种能力。

布局

第三一个，布局。这个是大屏开发中最烦的事情，尽管是根据固定的分辨率开发调试，但是毕竟实际情况可能根据电脑不同需要稍微的适配，保证在近似的分辨率下展示效果是正常的，不至于很错版。

在开发的时候建议哈，仅仅是建议，建议使用弹性布局、使用百分比设置宽高之类的属性值，尽可能的减少px的使用，因为像素不一样，px的大小也不一样，极容易出现错版的问题，但是可以使用rem、em之类的，推荐rem。

还有一点，我们在开发大屏的时候如果用到echarts，它里面的一些东西比如说字体大小设置的数值就是px，默认就是px，这个就不太好搞，我们需要定义一个方法，然后把px转成rem对应的值，效果会好一些，这些代码不需要自己写，网上百度就可以，案例有很多，只要看得懂，会用就行，当然用了之后研究一下更好，不过话又说回来，能用起来其实已经会了。

模块化

因为我是用vue开发的大屏，模块化是必不可少的，不要在一个文件里面填充太多的东西，我们可以把每一小部分单独拆出来，封装好，然后引用到对应的位置，不要把一个页面填充到上千行，不方便阅读，也不容易维护，那句话怎么说的来着，“我写的代码，只有我和浏览器能看懂，但是一星期以后，只有浏览器能看懂。” 不要出现这么尴尬的局面，该加注释的地方加注释，文件命名易懂又好区分。模块化之后第一个原因是方便维护，第二一个原因是可以组件复用，比如说echarts，页面上有好多相同的柱形图，一摸一样，只是渲染的数据不一样，那就可以封装一个柱形图组件，组件复用就可以，就是类似的道理。

样式

样式的话很简单，尽可能的减少内联样式，不要直接写在标签里面，那样多了的话，会疯！可以抽成一个文件，如果页面多了，样式有近乎相同，那就可以样式复用。样式不要乱，管理好，具体使用什么样的写法，根据自己的兴趣来，自己觉得好就可以，但是不要因为省事就不管后期维护和修改了。

插件和文档分项

在这里总结一下做大屏可能会用到的一些资料吧，不知道会不会用到，也不确定是不是就是最好的，记录一下，希望有用。

Echart官网

Echart配置项地址

Echarts示例地址

个性化图表

Element组件库

Ant-d 组件库

Vue 大屏数据展示组件库 Data-V

Flex 布局

阿里巴巴矢量图

基于vue.js的无缝滚动插件

Vue 大屏开发自适应 VScode | flexible.js | rem | echarts自适配

vue 全局实现数字千位分隔符格式

vue 使用 video.js 播放 m3u8 视频流

常用的几种echart报表整理