文章目录
  1. 1. 大屏需求
  2. 2. 兼容不同分辨率
  3. 3. 使用RAF
  4. 4. 独立浮层组件
  5. 5. 缓存动态组件
  6. 6. 避免echarts的内存泄露
  7. 7. slot嵌套使用

大屏的数据可视化能够让用户从全局的角度了解当前业务的各种核心指标,它的视觉冲击效果很强, 往往能给用户留下深刻的印象。关于可视化大屏的需求分析、视觉效果定位和设计准则可以参考简书上的可视化大屏经验分享。本文章总结了在实际项目开发中所遇到的几个问题及解决办法,以供开发人员参考。

大屏需求

项目经过几轮迭代后,需要开发一个全国版的大屏首页用来展示一些核心的指标,设计图如下:

页面分成5个部分,中间展示全国版的热力图,自动轮播展示两类核心指标数据。其余页面四个角用来展示不同分类的指标数据。热点类容Top10列表区域可以自动循环轮播。对应不同分类指标的详情数据则通过浮层来展示,如下:

浮层可以自动轮播,或者鼠标悬浮到某个分类区域时,对应浮层自动弹出。

在开发过程中遇到的问题及解决办法如下:

兼容不同分辨率

  • 使用@media规则来设置不同分辨率下的字体大小,间距;
  • 背景图如果是jpg、png的话,在大屏上需要准备一个大尺寸的图片,否则小图片拉伸会变得模糊;

使用RAF

由于不同分类指标的详情数据需要通过浮层轮播来展示,考虑到大面积UI界面动效的流畅性,使用requestAnimationFrame来实现,而非setInterval

独立浮层组件

由于不同模块有自己的浮层内容,且浮层的动效和交互都是一致的,故抽离出一个独立的浮层容器,用了控制动效和交互,浮层内的内容则由不同的动态组件来填充。

缓存动态组件

每个浮层内容需要轮播展示,考虑到性能的问题,使用keep-alive来包裹组件,这样动态组件只需要在第一次有数据时渲染界面,后面就使用缓存的组件展示,减少页面的渲染开销。

避免echarts的内存泄露

由于浮层使用了setInterval来定时轮播各个动态组件,而每个组件内又使用到了echarts来渲染图表。如果按照之前的用法,将每个echarts对象放到this里面,则会导致echarts对象在组件切换时得不得释放,导致浏览器内存使用不断增加,最终导致页面崩溃。其解决办法是使用echarts的getInstanceByDomdispose方法来管理。

slot嵌套使用

在项目开发中,我们经常会抽象出一些独立的功能组件,并且使用slot来进行内容分发。对于一般的slot用法我们应该很熟悉,而对于多层嵌套的slot,我们可以使用下面的写法来实现。

文章目录
  1. 1. 大屏需求
  2. 2. 兼容不同分辨率
  3. 3. 使用RAF
  4. 4. 独立浮层组件
  5. 5. 缓存动态组件
  6. 6. 避免echarts的内存泄露
  7. 7. slot嵌套使用