echars 两列展示图例
思路:将图例拆分两个独立的图列展示
效果图展示
代码
legend: [{
orient: 'vertical',
top: '60%',
icon:"circle",
itemWidth: 12,
itemHeight: 12,
right: 340,
itemGap: 20,
textStyle:{
rich: {
a: {
align: 'left',
color: '#555555',
fontSize: 14,
fontWeight: 500,
padding: [0, 0, 0, 0],
},
b0: {
align: 'left',
color: '#000000',
fontSize: 14,
fontWeight: 'bold',
padding: [0, 0, 0, 2],
},
},
},
data: data.slice(0,Math.ceil(data.length/2)),
formatter: function (name) {
let title = '';
var total = 0;
var target;
var index;
var number;
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
number = data[i].number;
title = data[i].label;
index = i < 6 ? i : 5;
}
}
//return `{a| ${name}} {b0| ${target} ${number}}`;
return '{a| ' + name + '} {b0| ' + target + ' ' + number + '}';
},
},{
orient: 'vertical',
top: '60%',
icon:"circle",
itemWidth: 12,
itemHeight: 12,
right: 100,
itemGap: 20,
selectedMode: 'multiple',
textStyle:{
rich: {
a: {
align: 'left',
color: '#555555',
fontSize: 14,
fontWeight: 500,
padding: [0, 0, 0, 0],
},
b0: {
align: 'left',
color: '#000000',
fontSize: 14,
fontWeight: 'bold',
padding: [0, 0, 0, 2],
},
},
},
data: data.slice(Math.ceil(data.length/2) ,data.length),
formatter: function (name) {
let title = '';
var total = 0;
var target;
var index;
var number;
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
number = data[i].number;
title = data[i].label;
index = i < 6 ? i : 5;
}
}
//return `{a| ${name}} {b0| ${target} ${number}}`;
return '{a| ' + name + '} {b0| ' + target + ' ' + number + '}';
},
}],