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!

相关文章
|
小程序 计算机视觉
UNIAPP微信小程序使用Echarts
UNIAPP微信小程序使用Echarts
3605 0
|
5月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
507 0
|
存储 索引
antd中table组件选中单行换样式(比如背景颜色)
在Ant Design (antd)的Table组件中,可以通过设置`onRow`属性来定义行点击事件,从而改变被点击行的样式,如背景颜色。`onRow`是一个函数,返回一个对象,对象包含事件处理函数,如`onClick`。同时,使用`rowClassName`属性来指定行的类名,结合状态管理,可以实现点击某行后改变其背景颜色的效果。具体实现时,需要在组件状态中保存当前被点击行的索引,然后通过`rowClassName`判断并返回相应的类名。
1353 2
antd中table组件选中单行换样式(比如背景颜色)
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
|
前端开发 小程序 Java
【规范】SpringBoot接口返回结果及异常统一处理,这样封装才优雅
本文详细介绍了如何在SpringBoot项目中统一处理接口返回结果及全局异常。首先,通过封装`ResponseResult`类,实现了接口返回结果的规范化,包括状态码、状态信息、返回信息和数据等字段,提供了多种成功和失败的返回方法。其次,利用`@RestControllerAdvice`和`@ExceptionHandler`注解配置全局异常处理,捕获并友好地处理各种异常信息。
6588 0
【规范】SpringBoot接口返回结果及异常统一处理,这样封装才优雅
|
JavaScript
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
3845 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
|
容器
echarts的grid——图表的位置配置
echarts的grid——图表的位置配置
2320 1
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
5769 0
|
缓存 JavaScript API
Vue-Router路由动态缓存组件(keep-alive),vue2/vue3不同写法
Vue-Router路由动态缓存组件(keep-alive),vue2/vue3不同写法