需求背景
table表格展现数据时，无法直观体现数据的健康度，尤其是数据较多的时候，查找比对数据对用户来说，与其说体验差，不如说是一种折磨。（互相伤害，48？）
本着用户至上的原则（别骂了，别骂了，再骂就把人骂傻了～）。为了让数据有个更为直观的体现和更方便用户查找定位有价值的数据，方案采用了为table不同区间数据贴上不同的背景色，整体形成一个热力图。
实现原理
如果仅仅是为不同的数据区间定义一个随机的颜色，数据的增长，递减是无法直观体现出来的，且颜色太过丰富却毫无规律可言，同样也会给用户造成困扰。所以颜色的选取需遵循渐变规则。
通过确定一个起始颜色和一个临界颜色，通过加权平均算法，可以得到两色之间的渐变色。包含起始颜色、临界颜色、中间渐变色的集合后文统称色阶图。
例如：百分比数据，0～100，每百分之十对应一个色阶，将色阶图等分成十分，然后根据数据去等分色阶图里选取即可。
npm包 - color-gradient-lamination
介绍：两个颜色区间的渐变色取值，适用于定制化的热力图展示
Show
两个颜色之间的色阶图
从色阶图取色应用到table中，呈现一个热力变化
Install
npm install color-gradient-lamination --save
Methods
CG.gradientColorLamination(start_color, end_color, lamination); // start_color: 起始颜色（十六进制） end_color：临界颜色（十六进制） lamination：等分色阶
Usage
import CG from 'color-gradient-lamination'
CG.gradientColorLamination('#ff3c00', '#adff2f', 5); // ['#ff3c00', '#eb6d0c', '#d69e18', '#c2ce23', '#adff2f']
CG.gradientColorLamination('#ff3c00', '#adff2f', 7); // ['#ff3c00', '#f15d08', '#e47d10', '#d69e18', '#c8be1f', '#bbdf27', '#adff2f']
结尾
github地址：github.com/Kaiynn/colo…
感兴趣的同学可以自行看看源码，有问题也欢迎大家留言或git上提issue。
文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊
😈本文首发于掘金，未经许可禁止转载😈
