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

最新推荐文章于 2025-04-27 10:24:27 发布

佛佛ง

最新推荐文章于 2025-04-27 10:24:27 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Echarts学习笔记文章标签： echarts javascript

本文链接：https://blog.youkuaiyun.com/LzzMandy/article/details/90677047

Echarts学习笔记专栏收录该内容

38 篇文章

订阅专栏

博客介绍了ECharts相关设置，包括让图例带百分比并显示在下方，以及让label带有边框和百分比数据，这些设置与JavaScript和ECharts技术相关。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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