在做后台管理系统时,很多时候都需要用图表来展示数据,echarts是其中一种使用广泛的图表库,调色盘颜色种数有限,如5.1.2版本,只有9种颜色
当需要展示的种类超过9种时,就会重复使用默认的颜色列表
但是往往不希望使用重复的颜色,可使用如下方法生成随机颜色
//随机生成颜色
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.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;
}
},
data数据:
colors:[],
dataList:[
{value: 1048, name: '视频'},
{value: 735, name: '娱乐'},
{value: 580, name: '游戏'},
{value: 484, name: '体育'},
{value: 230, name: '小视频'},
{value: 552, name: '汽车'},
{value: 743, name: '科技'},
{value: 561, name: '财经'},
{value: 857, name: '女性'},
{value: 313, name: '历史'},
{value: 652, name: '时尚'},
]
效果如下: