h5+echarts大屏数据展示经验总结

Posted 2021-02-20 ellafive

1.布局，一般情况下大屏都是恰好铺满整个屏幕，当我们f11切换全屏时候经常会导致空出一节或者有部分内容超出屏幕，导致观赏效果不佳。这时候我们只需要用100vh设置一个总容器再利用flex布局填充总容器就可以确保任何情况都是铺满全屏。

2.大屏资源实例：https://gitee.com/lvyeyou/DaShuJuZhiDaPingZhanShi该项目总结了很多大屏样式，可以模仿设计出适合自己的方案。

3.echarts实例，图表可以很直观的表示数据特征，同事又很具有观赏性，因此大屏制作中常用到许多图表，https://gallery.echartsjs.com/explore.html提供了很多漂亮的echarts图例子，通常我们只需在该网站上找到适合自己的图表，copy下来加上自己的数据稍作修改就可以达到意想不到的效果。

4.优秀的配色和图表间的间隔设计可以让大屏给人一种眼前一亮的感觉，大大提升大屏的感染力（这是对比了自己和同事做的大屏后的感想），然而配色是个很难很费时间得活，能交给美工最好，如果没有美工只能自己慢慢调整，https://color.adobe.com/zh/create这个工具可以自由搭配颜色，通过一定得颜色搭配原理找到适合放一起得颜色。

5.仅仅一个静态的大屏难免让人觉得枯燥，我们可以让图表产生轮播的效果让图表动起来，echarts-auto-tooltip.js这个插件可以很方便的用一行代码让图表动起来。用法：https://www.cnblogs.com/chengwb/p/5833454.html
————————————————
版权声明：本文为CSDN博主「weixin_39001363」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39001363/java/article/details/104051836

演示網址：http://47.105.36.188:3001/DaShuJuZhiDaPingZhanShi/index.html