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

最新推荐文章于 2024-10-28 17:23:11 发布

左直拳

最新推荐文章于 2024-10-28 17:23:11 发布

阅读量465

点赞数

分类专栏： JavaScript 文章标签： rgb 一种颜色不同深浅

本文链接：https://blog.csdn.net/leftfist/article/details/129083154

版权

JavaScript 专栏收录该内容

168 篇文章

订阅专栏

使用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));
}