echart使用同一色系，深浅随机的颜色

Posted 2023-03-04 左直拳

使用echart画统计图，有时想将不同线条的颜色都用同一种色系，然后深浅不同做区分。比如：

图中的虚线，都是红色，深浅不同，代表一种观测数据。原理是将指定颜色的R、G、B分别加上同一个随机数，该随机数在 -255 与 255之间。

类库代码：

/*
 * 颜色加深或浅化
 * */
function lightDarkenColor(color, num) //颜色加深或浅化
    let colorArr = getRgbNum(color);
    let sColorChange = [];
    for (var i = 0; i < colorArr.length; i++) 
        let val = colorArr[i] + num;
        if (val < 0) 
            val = 0;
        
        if (val > 255) 
            val = 255;
        
        sColorChange.push(val)
    
    return "rgba(" + sColorChange.join(",") + ",1)";

function getRgbNum(sColor) //将十六进制的颜色值分拆为包含R、G、B三个元素值的数组

    if (sColor.length === 4) //补全颜色值 例如：#eee,#fff等
        var sColorNew = "#";
        for (var i = 1; i < 4; i += 1) 
            sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
        
        sColor = sColorNew;
    
    //处理六位颜色值
    var sColorChange = [];
    for (var i = 1; i < 7; i += 2) 
        //核心代码，通过parseInt将十六进制转为十进制，parseInt只有一个参数时是默认转为十进制的，第二个参数则是指定转为对应进制
        sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
    
    return sColorChange;

function colorRgba(str, n) //将十六进制的颜色值，转换为rgb()形式
    //十六进制颜色值的正则表达式
    var reg = /^#([0-9a-fA-f]3|[0-9a-fA-f]6)$/;
    var sColor = str.toLowerCase();
    n = n || 1;
    //十六进制颜色转换为RGB格式
    if (sColor && reg.test(sColor)) 
        let sColorChange = getRgbNum(sColor);
        return "rgba(" + sColorChange.join(",") + "," + n + ")";
     else 
        return sColor;
    

2、调用

function getRealColor() 
    var d = new Date();
    var n = d.getTime() % 2;//使用1970年以来的毫秒数对2取模，用于确定参与的随机数是正或是负
    var pn = n === 0 ? -1 : 1;
    return lightDarkenColor("#f00", Math.round(Math.random() * 255 * pn));

得到的值类似于：

'rgba(255,110,110,1)'