js echarts 固定颜色按顺序组合 或者随机生成颜色

2023-10-27

在使用echarts的时候或者大转盘的时候,数据量总是很多,但是颜色可以随机生成,也可以使用自己固定的颜色,这边我就分享了一下几种按照顺序组成颜色的代码

// 第一种 通过循环颜色,用一个splice 删一个,如果颜色没有了,再重新给他原来的数组,继续循环
var colorsed = ["#CCCDFF", "#BAC7E8", "#D9EEFF", "#BADFE8"];
var gslist = [1,2,3,4,5,6,7,8,9]
var colorCopy = JSON.parse(JSON.stringify(colorsed))   //深拷贝一个数据
var  list = []
function bnpa(colors){
	for(var i= 0; i < colors .length; i++){
        if(list.length < gslist.length ){
            list.push(colors[i])
            colors.splice(i,1)  //关键一步
            if(colors.length<1){
                var colorCopys = JSON.parse(JSON.stringify(colorCopy))   
                bnpa(colorCopys)
            }else{
                bnpa(colors)
            }
        }
	}
}
bnpa(colorsed)
// (9) ['#CCCDFF', '#BAC7E8', '#D9EEFF', '#BADFE8', '#CCCDFF', '#BAC7E8', '#D9EEFF', '#BADFE8', '#CCCDFF']
//第二种 思路和第一种一样
var colors = ["#CCCDFF", "#BAC7E8", "#D9EEFF", "#BADFE8"];
var gslist = [1,2,3,4,5,6,7,8,9]
var list = []
function bnpa(arr){
    for(var i= 0; i <arr.length; i++){
        if(i < colors.length){
            list.push(colors[i])
        }else if(i >= colors.length && i == arr.length-1){
            var atms = arr.splice(colors.length)
            bnpa(atms)
        }
    } 
}
bnpa(gslist) 
//(9) ['#CCCDFF', '#BAC7E8', '#D9EEFF', '#BADFE8', '#CCCDFF', '#BAC7E8', '#D9EEFF', '#BADFE8', '#CCCDFF']

也可随机生成颜色

// 随机生成
	return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);

欢迎有任何问题可以进行咨询,谢谢~

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js echarts 固定颜色按顺序组合 或者随机生成颜色 的相关文章

随机推荐

  • 为何推荐首选enum class 而非 enum

    首先 我们比较下这两种枚举类型的表示方式上有何差异 一 异同点 enum class 官方解释 unscoped enum enum identifier type enum list scoped enum enum class stru
  • AS修改快捷键以及AS设置

    1 修改快捷键方式 2 设置代码提示忽略大小写 3 设置AS中Java代码各个部分的字体颜色
  • JCreator 使用技巧

    转自 http wenku baidu com view 32f22a287375a417866f8fcf html JCreator 使用技巧 JCreator 使用技巧 1 导语 在众多的JAVA开发环境中 我对 JCreator 情有
  • 第十天栈和队列

    栈 和队列的原理大家应该很熟悉了 队列是先进先出 栈是先进后出 首先大家要知道 栈和队列是STL C 标准库 里面的两个数据结构 接下来介绍的栈和队列也是SGI STL里面的数据结构 知道了使用版本 才知道对应的底层实现 来说一说栈 栈先进
  • mdk中error: L6047U: The size of this image exceeds

    跳出error L6047U The size of this image 192324 bytes exceeds the maximum all的原因是由于mdk未破解 亲测已解决 破解工具的链接 http www xue51 com
  • ubuntu设置pac代理

    前言 由于公司ubuntu没有对代理做有线代理去搜索资料 所以下面得内容是为了记录一下 设置代理pac代理有两种方式 可能还有其他得 1 浏览器设置自动代理配置得URL PAC 2 写入profile配置文件 1 浏览器设置自动代理配置的U
  • YOLOv5-Shufflenetv2

    YOLOv5中修改网络结构的一般步骤 models common py 在common py文件中 加入要修改的模块代码 models yolo py 在yolo py文件内的parse model函数里添加新模块的名称 models ne
  • 【100天精通Python】Day51:Python 数据分析_数据分析入门基础与Anaconda 环境搭建

    目录 1 科学计算和数据分析概述 2 数据收集和准备 2 1 数据收集 2 1 1 文件导入 2 1 2 数据库连接 2 1 3 API请求 2 1 4 网络爬虫 2 2 数据清洗 2 2 1 处理缺失值 2 2 2 去除重复值 2 2 3
  • 浪潮服务器NF5280M5配置管理口BMC的IP web界面登录 ipmi 代外【详细】

    开启服务器以后等待按del或f2 进入bios选择第五项Server Mgmt界面选择BMC Network Configuration 回车 选择BMC IPv4 Network Configuration 回车 注意 只需要配置BMC
  • MySQL——必考面试题 ①

    一 为什么要使用数据库 数据保存在内存 优点 存取速度快 缺点 数据不能永久保存 数据保存在文件 优点 数据永久保存 缺点 速度比内存操作慢 频繁的IO操作 查询数据不方便 数据保存在数据库 数据永久保存 使用SQL语句 查询方便效率高 管
  • unity生成vr效果

    这是一个谷歌的插件 GoogleVRForUnity unitypackage 谷歌插件下载地址 开始制作最简单的 VR 盒子 导入 GoogleVRForUnity unitypackage 将项目的平台设置为 Android 平台 在项
  • web前端DOM

    1 2 1 什么是DOM 文档对象模型 Document Object Model 简称DOM 是 W3C 组织推荐的处理可扩展标记语言 html或者xhtml 的标准编程接口 W3C 已经定义了一系列的 DOM 接口 通过这些 DOM 接
  • 2023.1.30日学习内容(多线程接收,发送文件)

    1 多线程接收文件 1 线程文件 public Socket socket public MyThread Socket socket this socket socket Override public void run try Stri
  • WordGo导出word(list)

    导出word文档 param userResume public String getWord BasUserResume userResume WordGo wordGo new WordGo wordGo add userResume
  • 计算机网络期中测验

    目录 一 单选题 二 填空题 三 判断题 一 单选题 1 单选题 采用全双工通信方式 数据传输的方向为 A 可以在两个方向上传输但不能同时进行 B 只能在一个方向上传输 C 可以在两个方向上同时传输 D 以上均不对 答案 C 解析 三种通信
  • 百度移动统计热力图和事件分析的坑

    埋点是这2年比较火的一项技术 友盟 极光推送 腾讯云 百度移动统计都相继开发了增加埋点的SDK 方便开发者使用 其中最为先进的是百度移动统计的无埋点技术 无埋点技术是不用开发者手动埋点的一项技术 很方便使用 对开发减少了开发量 太赞 集成步
  • jieba如何自行 split 或 join ?

    目录 jieba suggest freq 源码 split 关键运行过程解释 注意 使用此函数也有可能分不开 join 关键运行过程解释 jieba add word del word 源码 参考文献 jieba suggest freq
  • 联想拯救者R720 - i5-7300HQ/1050ti(macOS Big Sur/Windows) 双系统在 OpenCore (6.0.3)/ OCC (2.5.0)引导下的安装过程

    前言 重要 硬件列表 拯救者R720 处理器 型号 i5 7300HQ 架构 kaby lake 显卡 核显 UHD630 独显无效 忽略 主板 系列 100 Series 网卡 型号自选自购 不做陈列 声卡 批次不同 型号不同 不做陈列
  • [Unity好插件之PlayMaker]PlayMaker如何扩展额外创建更多的脚本

    学习目标 如果你正在学习使用PlayMaker的话 那么本篇文章将非常的适用 关于如何连线则是你自己的想法 本篇侧重于扩展适用更多的PlayMaker行为Action 那么什么是PlayMaker行为Action呢 就是这个列表 当我们要给
  • js echarts 固定颜色按顺序组合 或者随机生成颜色

    在使用echarts的时候或者大转盘的时候 数据量总是很多 但是颜色可以随机生成 也可以使用自己固定的颜色 这边我就分享了一下几种按照顺序组成颜色的代码 第一种 通过循环颜色 用一个splice 删一个 如果颜色没有了 再重新给他原来的数组