🍓 作者主页：💖仙女不下凡💖
🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！
🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！
✨什么是legend图例组件，如下图：
💕 其中也会含有很多属性，具体使用请参考一下内容
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工具栏组件配置项大全