echarts 中的legend 配置-Toy模板网

这篇具有很好参考价值的文章主要介绍了echarts 中的legend 配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

legend: {
show: true, // 是否显示图例
type: 'category', // 'plain'：普通图例。缺省就是普通图例; 'scroll'：可滚动翻页的图例。当图例数量较多时可以使用
z: 2, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
top: 'auto' // 距离容器侧边距离
bottom: 'auto' // 距离容器侧边距离
left: 'auto', // 距离容器侧边距离
right: 'auto', // 距离容器侧边距离
width: 'auto', // 图例组件的宽度。默认自适应
height: 'auto', // 图例组件的高度。默认自适应
orient: 'horizontal', // 图例列表的布局朝向; horizontal; vertical
align: 'auto', // 图例标记和文本的对齐。默认自动
padding: 5, // 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
itemGap: 10, // 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 25, // 图例标记的图形宽度
itemHeight: 14, // 图例标记的图形高度// 使用字符串模板，模板变量为图例名称 {name}
formatter: function (name) { // 使用回调函数
return 'Legend ' + name;
},
inactiveColor: '#ccc', // 图例关闭时的颜色
textStyle: {
color: '#FFF', // 文字的颜色
fontStyle: 'normal', // 文字字体的风格('normal'，无样式；'italic'，斜体；'oblique'，倾斜字体)
fontWeight: 'normal', // 文字字体的粗细('normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700)
fontSize: '20', // 文字字体大小
align: 'left', // 文字水平对齐方式，默认自动('left'，'center'，'right')
verticalAlign: 'left', // 文字垂直对齐方式，默认自动('top'，'middle'，'bottom'
lineHeight: '50', // 行高 )
backgroundColor: 'red', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
},
data: [{
name: '系列1',
icon: 'circle', // 强制设置图形为圆。
textStyle: {
color: '#FFF', // 文字的颜色
fontStyle: 'normal', // 文字字体的风格('normal'，无样式；'italic'，斜体；'oblique'，倾斜字体)
fontWeight: 'normal', // 文字字体的粗细('normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700)
fontSize: '20', // 文字字体大小
align: 'left', // 文字水平对齐方式，默认自动('left'，'center'，'right')
verticalAlign: 'left', // 文字垂直对齐方式，默认自动('top'，'middle'，'bottom'
lineHeight: '50', // 行高 )
backgroundColor: 'red', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
},
backgroundColor: 'transparent', // 图例背景色，默认透明
}],
}
————————————————文章来源地址https://www.toymoban.com/news/detail-617331.html