Echart实践小技巧:生成随机颜色函数和颜色数组

简介: Echart实践小技巧:生成随机颜色函数和颜色数组


生成随机颜色

    //随机颜色;
    function randColor() {
        return '#' +
                (function (color) {
                    return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)])
                    && (color.length == 6) ? color : arguments.callee(color);
                })('')
    }
    //console.log(randColor());
    //$("#menu").attr("style", "background-color:" + randColor());

生成随机颜色数组

    //获取随机颜色数组
    function getColor(num) {
        var colorList = [];
        for (var i = 0; i < num; i++) {
            colorList.push(randColor());
        }
        return colorList;
    }
    console.log(getColor(5));
<div id="menu"></div>



    //获取随机颜色数组
    function getColor(num) {
        for (var i = 0; i < num; i++) {
            var html = "<div style='height: 30px;line-height:30px;color:#000;text-align:center;background-color:" + randColor() + "'>" + randColor() + "</div>";
            $("#menu").append(html);
        }
    }
    getColor(20);


Done!

目录
打赏
0
0
0
0
184
分享
相关文章
|
10月前
uView colorSwitch 颜色转换
uView colorSwitch 颜色转换
70 0
|
10月前
|
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
359 1
Echarts实战案例代码(8):设置itemStyle渐变color属性实现柱图的伪3D效果的解决方案
Echarts实战案例代码(8):设置itemStyle渐变color属性实现柱图的伪3D效果的解决方案
330 0
|
5月前
|
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
985 0
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
606 0
Element UI & Element Plus之改变表格单元格颜色
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
876 0
【ECharts学习】—实现我的第一个图表
【ECharts学习】—实现我的第一个图表
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图(一)
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等