饼图-图例显示百分比,label带边框和百分比

饼图-图例显示百分比,label带边框和百分比_第1张图片

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}:
{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 }] };

 

你可能感兴趣的:(Echarts学习笔记)