最近使用echarts中用到图例随机生成，颜色多不好设置的问题，图例多展示出现不全，不能根据颜色判断图例和数据的问题等总结一下
原始代码：
that_ge.charts = echarts.init(document.getElementById('paramenterEcharts'));
that_ge.alarmTypeLine = ['风速1','风速2','风速3','风速4','风速5','风速6','风速7','风速8','风速9','风速10','风速11','风速12','风速13','风速14','风速15',]
that_ge.charts.setOption({
color: that_ge.randerColor(),
tooltip: {
trigger: 'axis',
show:true, //这些是防止过多看不到，根据自己的需要进行注释就行。
showDelay:0,//这些是防止过多看不到，根据自己的需要进行注释就行。
hideDelay:50,//这些是防止过多看不到，根据自己的需要进行注释就行。
padding:10,//这些是防止过多看不到，根据自己的需要进行注释就行。
confine:true,//这些是防止过多看不到，根据自己的需要进行注释就行。
formatter:e=>{ // 遍历出图标和颜色、数值
var tip = "";
if(e !== null && e.length > 0){
tip += e[0].name + '<br/>';
for(let i=0;i<e.length;i++){
if(i % 3 === 0){
tip += e[i].marker + e[i].seriesName + ": " + e[i].value + "<br/>";
}else{
tip += e[i].marker + e[i].seriesName + ": " + e[i].value + " ";
}
}
return tip;
}
}
},
grid: {
left: '4%',
top:'2%',
},
legend: {
left: 'right', // 水平位置，可选值：'left', 'center', 'right'
type: 'scroll', // 使用滚动分页的图例
right: 100,
top: 30,
bottom: 20,
orient: 'vertical', // 可选值：'horizontal' 或 'vertical'
// data:legendData,
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
// data: val.data.xtimes,
data: [1,2,3,4,5,6,7,8,9],
axisLabel:{
color:"#22b8ff",
},
},
],
dataZoom: [//X轴鼠标滑动
{show: true,realtime: true,start: 0,end: 100},
{type: 'inside',realtime: true,start: 0,end: 100}
],
yAxis: {
type: 'value'
},
series: [
{
name: '风速1',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速2',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速3',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速4',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速5',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速6',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速7',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速8',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速9',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速10',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速11',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速12',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速13',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速14',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速15',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速16',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速17',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速18',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速19',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速20',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速21',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速22',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速23',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速24',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速25',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速26',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速27',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速28',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速29',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速30',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速31',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速32',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速33',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速34',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速35',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速36',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速37',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速38',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速39',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
{
name: '风速40',
type: 'line',
data: [4,5,6,8,9,4,12,3,12],
smooth: true,
},
]
})这个是在随机生成颜色中要使用的图例内容一定要写上。
这个声明在data(){
return{
alarmTypeLine:'',//echarts图标名称
}
}
随机生成的颜色代码：
randerColor(){ //echarts图颜色
let arr = [];
this.alarmTypeLine.forEach(item=>{
this.random(arr)
})
return arr;
},
random(arr){ //echarts图颜色
let color = 'rgb(' + [
Math.round(Math.random() * 256),
Math.round(Math.random() * 256),
Math.round(Math.random() * 256)
].join(',') + ')';
if(!arr.some(i=>i==color)){
arr.push(color)
}else{
this.random(arr)
}
},
