🍓 作者主页：💖仙女不下凡💖

🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！

🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！

✨什么是legend图例组件，如下图：

• itemStyle：图形样式
• lineStyle：图例图形中线的样式
• textStyle：
• tooltip：图例的tooltip配置，配置项同tooltip。默认不显示
• data：图例数据数组，若data没有被指定，会自动从当前系列中获取。多数系列会取自series.name或者series.encode的 seriesName所指定的维度

💕 其中也会含有很多属性，具体使用请参考一下内容

legend: {
    type: 'plain',  //图例类型，plain/scroll
    show: true,  //是否显示x轴，布尔值
    zlevel: 2,  //控制图形的前后顺序
    z: 2,  //控制图形的前后顺序
    left: '',  //图例离容器左侧的距离，20/'20%'/'left'/'atuo'等
    top: '',
    right: '',
    bottom: '',
    width: 'auto',  //宽度，默认自适应
    height: 'auto',  //高度，默认自适应
    orient: 'horizontal',  //布局朝向，horizontal/vertical
    align: 'auto',  //图例标记和文本的对齐，默认自动，auto/left/right
    padding: 5,  //内边距，默认各方向内边距为5px
    itemGap: 10,  //图例间隔。横向时为水平间隔，纵向时为纵向间隔
    itemWidth: 25,  //图形宽度
    itemHeight: 14,  //图形高度
    itemStyle: {  
        color: '',  /颜色，参考下面的文章/
        borderColor: '',  //描边颜色，支持格式同color，不支持回调函数
        borderWidth: auto,  //描边宽度，可以为数字默认单位为px
        borderType: solid,  //描边类型，值：solid默认/dashed/dotted/number/array
        borderDashOffset: 0,  //虚线偏移量，搭配borderType指定dashed、array实现灵活的虚线效果
        borderCap: round  //线段末端的绘制，butt方形/round圆形/square也是方形效果与butt不同
    },
    lineStyle: {
        color: '',  /颜色，参考下面的文章/
        width: auto,  //线宽
        type: solid,  //线的类型，solid默认/dashed/dotted/number/array
        dashOffset: 0,  //虚线的偏移量，type指定dashed、array实现灵活的虚线效果
        cap: round,  //指定线段末端的绘制方式，参考上面的'borderCap'
        join: auto,  //设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性，bevel默认/round/miter
        miterLimit: 10,  //设置斜接面限制比例，只有当join为miter才有效，属性值：10默认值/number
        //阴影模糊大小，该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
        shadowBlur: 10,
        shadowColor: '',  //阴影颜色，格式同color
        shadowOffsetX: 0,  //阴影水平方向上偏移距离
        shadowOffsetY: 0,  //阴影垂直方向上的偏移距离
        opacity: auto  //透明度，支持从 0 到 1 的数字，为 0 时不绘制该图形
    },
    symbolRotate: inherit,  //旋转角度，类型为number|inherit。若为inherit，表示取系列symbolRotate
    formatter: 'Legend {name}',  //用来格式化图例文本，支持字符串模板和回调函数两种形式，name为图例名称
    selectedMode: true,  //图例选择模式，true/false/single/multiple
    inactiveColor: '#ccc',  //图例关闭时的颜色
    inactiveBorderColor: '#ccc',  //图例关闭时的描边颜色
    inactiveBorderWidth: 'auto',  //关闭时的描边粗细，属性值：auto取2/不存在描边取0/inherit始终取系列描边粗细
    selected: {
        '系列1': true,  // 选中'系列1'
        '系列2': false  // 不选中'系列2'
    },
    textStyle: {
        color: #333,  //文字颜色
        fontStyle: '',  //字体风格
        fontWeight: '',  //字体粗细
        fontFamily: '',  //字体系列
        fontSize: 12,  //字体大小
        lineHeight: 16,  //行高
        backgroundColor: '',  //背景色，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'
        borderColor: '',  //边框颜色
        borderWidth: 0,  //边框宽度
        borderType: 'solid',  //边框描边类型，属性值：solid/dashed/dotted/number/array
        borderDashOffset: 0,  //虚线偏移量，可搭配borderType指定dashed/array实现灵活的虚线效果
        borderRadius: 0,  //文字块圆角
        padding: 0,  //文字块内边距
        shadowColor: 'transparent',  //文字块背景阴影颜色
        shadowBlur: 0,  //文字块背景阴影长度
        shadowOffsetX: 0,  //文字块背景阴影 X 偏移
        shadowOffsetY: 0,  //文字块背景阴影 Y 偏移
        width: 0,  //文本显示宽度
        height: 0,  //文本显示高度
        textBorderColor: '',  //文字本身描边颜色
        textBorderWidth: '',  //文字本身描边宽度
        textBorderType: 'solid',  //文字本身描边类型，属性值：solid/dashed/dotted/number/array
        textBorderDashOffset: 0,//虚线偏移量，可搭配textBorderType指定dashed/array实现灵活的虚线效果
        textShadowColor: 'transparent',  //文字本身阴影颜色
        textShadowBlur: 0,  //文字本身阴影长度
        textShadowOffsetX: 0,  //文字本身阴影 X 偏移
        textShadowOffsetY: 0,  //文字本身阴影 Y 偏移
        overflow: 'none',  //文字超出宽度是否截断或者换行，配置width时有效，属性值：truncate/break/breakAll
        ellipsis: '',  //在overflow配置为'truncate'的时，该属性配置末尾显示文本
        rich: {},  //自定义富文本样式
    },
    tooltip: {  //配置项同tooltip。默认不显示
        show: true
    },
    //图例项icon，用来修改默认的图形样式
    icon: '',  //属性值：circle/rect/roundRect/triangle/diamond/pin/arrow/none/'image:'/'path:'
    data: [{
        name: '',
        //图例项的icon
        icon: 'circle',  
        itemStyle: {  //图例项的图形样式
            color: 'red',
            borderColor: ''
            borderWidth: auto,
            borderType: '',
            borderDashOffset: 0,
            borderCap: inherit,
            borderJoin: inherit,
            borderMiterLimit: inherit,
            shadowBlur: 0,
            shadowColor: '',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            opacity: inherit,
            decal: inherit
        },
        lineStyle: {},  //同上面的itemStyle
        symbolRotate: 'inherit',  //图形旋转角度
        textStyle: {}  //图例项的文本样式
    }],
    backgroundColor: 'transparent',  //图例背景色，默认透明
    borderColor: '#ccc',  //边框颜色
    borderWidth: 1,  //边框线宽
    borderRadius: 0,  //圆角半径，单位px，支持传入数组分别指定 4 个圆角半径
    //图形阴影的模糊大小，该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
    shadowBlur: 10,  
    shadowColor: '',  //阴影颜色。支持的格式同color
    shadowOffsetX: 0,  
    shadowOffsetY: 0,  
    scrollDataIndex: 0,  //type为'scroll'时有效，图例当前最左上显示项的dataIndex
    pageButtonItemGap: 5,  //type为'scroll'时有效，图例控制块中，按钮和页信息之间的间隔
    pageButtonGap: '',  //type为'scroll'时有效，图例控制块和图例项之间的间隔
    pageButtonPosition: 'end',  //type为'scroll'时有效，图例控制块的位置
    pageFormatter: '{current}/{total}',  //type为'scroll'时有效，图例控制块中，页信息的显示格式
    pageIcons: {  //type为'scroll'时有效，图例控制块的图标
        horizontal: '',
        vertical: ''
    },
    pageIconColor: '#2f4554',  //type为'scroll'时有效，翻页按钮的颜色
    pageIconInactiveColor: '#aaa',  //type为'scroll'时有效，翻页按钮不激活时（即翻页到头时）的颜色
    pageIconSize: 15,  //type为'scroll'时有效，翻页按钮的大小
    pageTextStyle: {},  //type为'scroll'时有效，图例页信息的文字样式，属性值参考textStyle写法
    animation: true,  //图例翻页是否使用动画
    animationDurationUpdate: 800,  //图例翻页时动画时长
    emphasis: {
        selectorLabel: {}  //内容参考textStyle
    },
    selector: false,  //图例组件中选择器按钮，默认不显示
    selectorLabel: {},  //选择器按钮的文本标签样式，内容参考textStyle
    selectorPosition: 'auto',  //选择器位置
    selectorItemGap: 7,  //选择器按钮之间间隔
    selectorButtonGap: 10  //选择器按钮与图例组件之间间隔
}

👉推荐相关文章：Echart图表 之 基本使用及配置项

👉推荐相关文章：Echart图表 之 title配置项大全

👉推荐相关文章：Echart图表 之 颜色color配置项大全

👉推荐相关文章：Echart图表 之 X轴（xAxis）与 Y轴（yAxis）配置项大全

👉推荐相关文章：Echart图表 之 tooltip提示框组件配置项大全

👉推荐相关文章：Echart图表 之 toolbox工具栏组件配置项大全