前言:
最近项目中遇到这样一个场景,就是画的散点图根据数值大小,颜色不同,当然这个用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分割色值步长是一样就能准确实现了。