1、图例带百分比,显示在下方
2、label带边框和百分比数据
var copylegendName = ['A', 'AA', 'AAA', 'AAAA', 'AAAAA'];
var copyrateArr = [1, 2, 2, 2, 2];
var seriesData = [];
for (var i = 0; i < copylegendName.length; i++) {
var item = {
name: copylegendName[i],
value: copyrateArr[i],
};
seriesData.push(item);
}
option = {
tooltip: {
trigger: 'item',
formatter: "{b}:<br/> {c}个 ({d}%)"
},
legend: {
type: "plain",
left: "45%",
bottom: "10%",
show: true,
itemGap: 18, // 各个item之间的间隔,单位px,默认为10,
itemWidth: 12, // 图例图形宽度
itemHeight: 12, // 图例图形高度
// width:'30%',
align: 'left',
padding: 10,
backgroundColor: 'yellow',
tooltip: {
show: true
},
orient: "vertical",
data: copylegendName,
selectedMode: "true",
formatter: function(name) {
var index = 0;
var percent = 0;
var total = 0;
copylegendName.forEach(function(value, i) {
if (value == name) {
index = i;
}
});
copyrateArr.forEach(function(value, i) {
total += value;
});
if (total === 0) {
return name + " " + 0 + "%";
} else {
percent = ((copyrateArr[index] / total) * 100).toFixed(0);
return name + " " + percent + "%";
}
},
},
series: [{
name: '',
type: 'pie',
radius: '50%',
center: ['50%', '40%'],
itemStyle: {
normal: {
label: {
show: true,
formatter: '{b}\n{c}个({d}%)',
backgroundColor: '#fff',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
padding: [10, 10],
},
labelLine: {
show: true
}
}
},
data: seriesData
}]
};