在做后台管理系统时,很多时候都需要用图表来展示数据,echarts是其中一种使用广泛的图表库,调色盘颜色种数有限,如5.1.2版本,只有9种颜色。当需要展示的种类超过9种时,就会重复使用默认的颜色列表
但是往往不希望使用重复的颜色,可使用如下方法生成随机颜色。
本文适用于所有echarts图表(饼图、折线图、柱状图……)
//记得在data里面定义this.colors
//随机生成颜色
handleColors(){
let color = '';
let r=Math.floor(Math.random()*256);
let g=Math.floor(Math.random()*256);
let b=Math.floor(Math.random()*256);
color = `rgb(${r},${g},${b})`;
return color;//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
},
//根据种类数量生成颜色列表
setEchartColor(data){
for (let i = 0; i < data.length; i++) {
let color = this.colorHex(this.handleColors());
//此时的this.colors包含16进制颜色,rgb颜色,如果不想包含其中一种颜色可以自行去除
this.colors.push(color);
}
},
//rgb颜色转十六进制
colorHex(string){
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
if(/^(rgb|RGB)/.test(string)){
var aColor = string.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
var strHex = "#";
for(var i=0; i<aColor.length; i++){
var hex = Number(aColor[i]).toString(16);
if(hex === "0"){
hex += hex;
}
strHex += hex;
}
if(strHex.length !== 7){
strHex = string;
}
return strHex;
}else if(reg.test(string)){
var aNum = string.replace(/#/,"").split("");
if(aNum.length === 6){
return string;
}else if(aNum.length === 3){
var numHex = "#";
for(var i=0; i<aNum.length; i+=1){
numHex += (aNum[i]+aNum[i]);
}
return numHex;
}
}else{
return string;
}
},
//使用
var option={
color:this.setEchartColor()
}
效果如下: