如何设置echart图例legend的位置

最新推荐文章于 2025-03-31 11:00:02 发布

徊忆羽菲

最新推荐文章于 2025-03-31 11:00:02 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Echarts Html 软件

本文链接：https://blog.youkuaiyun.com/guo_qiangqiang/article/details/116744110

本文介绍了如何设置ECharts图例legend的各种位置，包括底部居中、底部右侧、颜色调整、间隔改变、宽高调整、边框颜色设定、内边距修改以及legend与图表的间距调整等。

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

如何设置echart图例legend的位置

常见legend位置

在这里插入图片描述

底部居中

在这里插入图片描述

legend: {
   
            orient: 'vertical',
            left: 'center',
            bottom:'bottom',
            textStyle: {
   
                color: "#FFFF00"
            },
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },

底部右侧

在这里插入图片描述

legend: {
   
            orient: 'vertical',
            left: 'right',
            bottom:'bottom',
            textStyle: {
   
                color: "#FFFF00"
            },
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },