大屏可视化数据面板分格渐变进度条、数字翻牌器及其刷新动效实现

数据可视化大屏是当前可视化领域的一项热门应用，通常可以分为信息展示类、数据分析类及监控预警类。这类应用的视觉设计通常效果炫酷，动效丰富，有时候一些页面布局和动画实现会对前端人员有一定的挑战性，在这里分享一些大屏可视化应用数据面板实现过程中遇到的问题及其解决方案。

一、数据面板刻度尺效果、分格渐变数据条css实现

在某个应用开发工作中，视觉设计了如下图的数据面板样式：

其中涉及到的分格渐变的数据条样式和面板下方的刻度尺样式一开始没有好的实现思路，用dom元素去构造每一个方格和刻度的方案显然是不合理的，这样做需要在页面中加入大量冗余dom，页面结构会非常臃肿。
这样一来，就只能想办法用css实现视觉稿的效果，查阅css3渐变的各个特性时，发现利用重复线性渐变repeating-linear-gradient这一属性能巧妙实现视觉稿中效果。组件Dom结构如下：

类名为process-wrapper的div元素作为进度条的容器，固定宽度，类名为process-bg的div表示进度条，宽度根据数值和量程计算出基于父元素的百分比，背景用线性渐变进行填充，类名为number的div显示数值，数值显示在进度条右上角，故number作为process-bg子元素，基于进度条进行absolute绝对定位&#