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

博客介绍了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
    }]
};

<think>好的,用户现在想将图例设置在的正下方。之前已经介绍了ECharts中legend的基本配置,现在需要针对的特定情况进行调整。首先,我需要回忆一下ECharts(pie chart)的常见结构,以及图例的位置配置方式。 用户可能的需求场景是,他们有一个,希望图例不要放在右侧或者左侧,而是正下方,这样可能更节省空间或者更符合设计需求。需要确保图例水平居中,并且与之间有适当的间距,避免重叠。 首先,确定如何调整图例的位置。在ECharts中,图例的位置可以通过left、right、top、bottom等属性来设置。要让图例位于正下方,应该设置bottom属性为一个具体的像素值或百分比,同时设置leftright来水平居中。例如,设置left为'center'或者通过leftright的组合使其居中。 接下来,本身的位置可能需要调整,以便为图例腾出空间。通常,的center属性可以调整其位置,可能需要将向上移动,避免被图例遮挡。例如,设置的center为['50%', '40%'],这样垂直方向居中偏上,下方留出空间给图例。 还需要考虑图例的方向,默认是水平(horizontal),在正下方水平排列是合适的,但如果有多个图例项,可能需要调整itemGap或使用滚动模式。如果图例项过多,可能需要设置为垂直方向,但用户明确要求是正下方,所以应该保持水平方向。 另外,图例的宽度高度可能需要调整,特别是当图例项较多时,可能需要设置width为'80%',并居中,避免超出容器。同时,图例的文本样式符号样式可能需要微调,以确保美观。 可能遇到的问题包括图例重叠,或者图例项过多导致换行或溢出。此时需要测试不同情况下的显示效果,调整bottom的值的center位置,确保两者之间有足够的空间。同时,可能需要设置图例的padding或调整itemGap来优化布局。 用户可能的深层需求是希望图例在视觉上更加协调,提升表的可读性美观性。因此,除了位置调整,可能还需要关注颜色搭配、字体大小等样式细节,但这些可能超出了当前问题的范围。 总结步骤: 1. 设置legend的orient为horizontal,保持水平排列。 2. 调整legend的位置,设置bottom为合适的值(例如60像素),leftright为0,使其水平居中。 3. 调整的center位置,将其上移,例如center: ['50%', '40%']。 4. 根据需要设置图例的宽度、间距样式,确保图例项正确显示且不溢出。 5. 测试不同数据屏幕尺寸下的显示效果,确保布局稳定。 最后,提供一个完整的配置示例,供用户参考调整。</think>在 ECharts 中,若要将图例(`legend`)放置在的正下方,需要通过调整图例的 `position` 的 `center` 属性来实现对齐。以下是具体配置方法示例: --- ### **关键配置步骤** 1. **调整图例位置**: - 设置 `legend` 的 `orient` 为 `horizontal`(水平方向)。 - 通过 `bottom` 控制图例距离容器底部的距离(如 `60px`)。 - 设置 `left` `right` 为 `0`,使图例水平居中。 - 调整 `itemGap` `itemWidth` 优化图例项间距。 2. **调整位置**: - 通过 `series.pie.center` 将上移,避免与图例重叠(如 `['50%', '40%']`)。 3. **可选样式优化**: - 设置图例文本对齐(`align: 'left'`)。 - 调整半径(`radius`)图例背景色。 --- ### **完整代码示例** ```javascript option = { // 图例配置:正下方 legend: { orient: 'horizontal', // 水平方向 bottom: 60, // 距离容器底部 60px left: 0, // 左对齐 right: 0, // 右对齐(与 left 结合实现水平居中) itemGap: 20, // 图例项间距 itemWidth: 20, // 图例标记宽度 itemHeight: 12, // 图例标记高度 textStyle: { color: '#666', fontSize: 14 }, // 可选:背景色边框 backgroundColor: '#f9f9f9', borderColor: '#ddd', borderWidth: 1 }, // 系列配置 series: [{ type: 'pie', center: ['50%', '40%'], // 位置:水平居中,垂直方向偏上(留出底部空间) radius: '50%', // 半径(占容器比例) label: { // 标签位置 position: 'outer', alignTo: 'edge' }, data: [ { name: '类别A', value: 335 }, { name: '类别B', value: 310 }, { name: '类别C', value: 274 }, { name: '类别D', value: 235 } ] }] }; ``` --- ### **效果说明** - **图例位置**: 图例会固定在容器底部正中央,与分离,避免遮挡。 ![示例效果](https://fastly.jsdelivr.net/gh/apisrc/echarts-legend-bottom.png) - **自适应调整**: 如果图例项过多,可以启用滚动模式: ```javascript legend: { type: 'scroll', // 滚动模式 pageIconColor: '#666',// 翻页按钮颜色 pageIconInactiveColor: '#ccc' } ``` --- ### **常见问题** 1. **图例重叠**: - 增大 `bottom` 值(如 `80px`)。 - 缩小半径(`radius: '40%'`)。 2. **图例项过多换行**: - 设置 `width: '80%'` 限制图例宽度。 - 减少 `itemGap` 或启用滚动模式。 3. **移动端适配**: ```javascript legend: { itemWidth: 16, // 缩小标记尺寸 itemHeight: 8, textStyle: { fontSize: 12 // 缩小字体 } } ``` 通过以上配置,可以灵活控制图例的位置样式,使其完美适配的布局需求!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佛佛ง

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值