给定两个端点色值，根据数值大小用js设置色值

前言：

最近项目中遇到这样一个场景，就是画的散点图根据数值大小，颜色不同，当然这个用echarts中的visualMap视觉映射组件就能实现了，效果如图所示，只需要设置两个端点色值，很方便也很简单。但是如果想获取图中所有的散点的色值呢？我仔细看了echarts的API，只看到点击某点时能拿到一个对象，对象中有color属性，但是这也只是点击一次获取一个色值呀，后来我又想到一个办法（虽然不太优雅......），就是直接根据值的大小去获取颜色。

代码： 

 function rgbToHex(r, g, b){
    var hex = ((r << 16) | (g << 8) | b).toString(16);
    return "#" + new Array(Math.abs(hex.length - 7)).join("0") + hex;
 }
 // hex to rgb
 function hexToRgb(hex){
     var rgb = [];
     for (var i = 1; i < 7; i += 2){
        rgb.push(parseInt("0x" + hex.slice(i, i + 2)));
     }
     return rgb;
 }
 // 计算渐变过渡色
 function gradient(startColor, endColor, step){
    // 将 hex 转换为rgb
     var sColor = hexToRgb(startColor),
     eColor = hexToRgb(endColor);
  
    // 计算R\G\B每一步的差值
    var rStep = (eColor[0] - sColor[0]) / step,
        gStep = (eColor[1] - sColor[1]) / step,
        bStep = (eColor[2] - sColor[2]) / step;
  
    var gradientColorArr = [];
    for (var i = 0;i < step;i++){
        // 计算每一步的hex值
        gradientColorArr.push(rgbToHex(parseInt(rStep * i + sColor[0]), parseInt(gStep * i + sColor[1]), parseInt(bStep * i + sColor[2])));
    }
    return gradientColorArr;
}

// 测试
var colorArr = gradient('#0082FF', '#FF4A66', 10);  
/*
就得到了分割了10份的色值数组
 [ '#0082ff',
  '#197cef',
  '#3376e0',
  '#4c71d1',
  '#666bc1',
  '#7f66b2',
  '#9960a3',
  '#b25a93',
  '#cc5584',
  '#e54f75' ]
*/

这个step步长可以任意设置，step越大，色值就越精确。实现原理很简单，就是按比例去分配，可以把所有数的最大是设为最高色值，最小值设为最低色值，其他中间的值，按数值占比设置颜色。由于图例太多，我是用div自己做的，所以在拿色值的时候就遇到这个问题，通过这种方式解决的，不过可能不是很准确，如下图所示。不过如果我们设置的step和echarts中visualMap分割色值步长是一样就能准确实现了。