ECharts图表的图例对齐问题（自定义宽高）

最新推荐文章于 2025-03-16 16:21:29 发布

跪在_坚持

最新推荐文章于 2025-03-16 16:21:29 发布

阅读量6.9k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： echarts js 文章标签： html5 javascript

本文链接：https://blog.csdn.net/guizai_jianchi/article/details/105296068

js 同时被 2 个专栏收录

4 篇文章

订阅专栏

echarts

3 篇文章

订阅专栏

本文介绍如何使用ECharts的富文本和formatter属性来精确控制图例组件的宽度，通过示例代码展示如何实现图例项的自定义布局。

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

先上效果图：

配置项legend. width 可设置图例组件的宽度，但是按照官方的去设置发现效果不对劲，会变成纵向居中（也许还有其他效果不多说），

解决方法如下：

利用富文本legend.textStyle. rich 和 legend. formatter设置样式

                legend: { //图例
                    orient: 'horizontal',
                    bottom: 0,
                    itemWidth: 15,
                    itemHeight: 15,
                    data: data,
                    formatter: [
                        '{a|{name}}'
                    ].join('\n'),
                    textStyle: {
                        rich: {
                            a: {
                                width: 55,
                                color: '#909399',
                                fontSize: 12,
                                lineHeight: 12
                            }
                        },
                    },
                },

完美解决！