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!

相关文章
Echarts实战案例代码(8):设置itemStyle渐变color属性实现柱图的伪3D效果的解决方案
Echarts实战案例代码(8):设置itemStyle渐变color属性实现柱图的伪3D效果的解决方案
276 0
|
24天前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
150 0
|
2月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
6月前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
130 0
|
6月前
|
JavaScript
如何用JS实现表格隔行换色功能
如何用JS实现表格隔行换色功能
27 0
|
6月前
|
JavaScript 前端开发
jquery实现动态五角星评分
jquery实现动态五角星评分
|
数据可视化 大数据
Echarts自定义图形颜色的写法总结
Echarts自定义图形颜色的写法总结
258 0
|
11月前
【ECharts学习】—实现我的第一个图表
【ECharts学习】—实现我的第一个图表
|
前端开发
【前端统计图】echarts改变颜色属性的demo
【前端统计图】echarts改变颜色属性的demo
41 0
Echarts实战案例代码(47):barGap属性实现不同系列的柱间距离且在最后一个 bar系列上才会生效
Echarts实战案例代码(47):barGap属性实现不同系列的柱间距离且在最后一个 bar系列上才会生效
290 0