如何设置echart图例legend的位置

最新推荐文章于 2024-05-17 17:26:18 发布

原创最新推荐文章于 2024-05-17 17:26:18 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

Html 同时被 3 个专栏收录

262 篇文章

订阅专栏

软件

126 篇文章

订阅专栏

Echarts

45 篇文章

订阅专栏

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

如何设置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: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },

改变颜色

在这里插入图片描述

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

改变间隔

在这里插入图片描述

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

改变图例宽度高度

在这里插入图片描述

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

边框颜色

       legend: {
            orient: 'vertical',
            left: 'right',
            bottom: 'bottom',
            backgroundColor: '#FF0000',
            textStyle: {
                color: "#FFFF00"
            },
            itemGap: 101,
            itemWidth: 50,
            itemHeight: 20,
            borderColor: '#0f0',
            borderWidth: '2',
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },

在这里插入图片描述

改变图例内边距

改变图例内边距，单位px，默认各方向内边距为5,接受数组分别设定上右下左边距

在这里插入图片描述

        legend: {
            orient: 'vertical',
            left: 'right',
            bottom: 'bottom',
            backgroundColor: '#FF0000',
            textStyle: {
                color: "#FFFF00"
            },
            itemGap: 101,
            itemWidth: 50,
            itemHeight: 20,
            borderColor: '#0f0',//边框颜色
            borderWidth: '50',//边框粗细
            padding: 100,//改变图例内边距
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },

调整 legend和图表的间距

在options 中加入属性：

        grid: {
            top: '25%',//距上边距

            left: '25%',//距离左边距

            right: '25%',//距离右边距

            bottom: '25%',//距离下边距
            containLabel: true
        },

在这里插入图片描述

调整legend距离

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