今天学习echarts的组件legend图例
图例组件。
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便多个图例的布局。
当图例数量过多时，可以使用 滚动图例（垂直） 或 滚动图例（水平）
以下摘自echarts官网，详情也可去echarts官网配置看点击打开链接
legend.type string图例的类型。可选值：
'plain'：普通图例。缺省就是普通图例。'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。当使用
'scroll'时，这些使用这些设置进行细节配置：legend.id string组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
legend.id string组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
legend.show boolean[ default: true ]legend.zlevel number[ default: 0 ]所有图形的 zlevel 值。
zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
zlevel大的 Canvas 会放在zlevel小的 Canvas 的上面。legend.z number[ default: 2 ]组件的所有图形的
z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
z相比zlevel优先级更低，而且不会创建新的 Canvas。legend.left string, number[ default: 'auto' ]图例组件离容器左侧的距离。
left的值可以是像20这样的具体像素值，可以是像'20%'这样相对于容器高宽的百分比，也可以是'left','center','right'。如果
left的值为'left','center','right'，组件会根据相应的位置自动对齐。legend.top string, number[ default: 'auto' ]图例组件离容器上侧的距离。
top的值可以是像20这样的具体像素值，可以是像'20%'这样相对于容器高宽的百分比，也可以是'top','middle','bottom'。如果
top的值为'top','middle','bottom'，组件会根据相应的位置自动对齐。legend.right string, number[ default: 'auto' ]图例组件离容器右侧的距离。
right的值可以是像20这样的具体像素值，可以是像'20%'这样相对于容器高宽的百分比。默认自适应。
legend.bottom string, number[ default: 'auto' ]图例组件离容器下侧的距离。
bottom 的值可以是像
20这样的具体像素值，可以是像'20%'这样相对于容器高宽的百分比。默认自适应。
legend.width string, number[ default: 'auto' ]图例组件的宽度。默认自适应。
legend.height string, number[ default: 'auto' ]图例组件的高度。默认自适应。
legend.orient string[ default: 'horizontal' ]图例列表的布局朝向。
可选：
- 'horizontal'
- 'vertical'
legend.align string[ default: 'auto' ]图例标记和文本的对齐。默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 'right' 以及纵向布局（orient 为 'vertical'）的时候为右对齐，及为 'right'。
可选：
- 'auto'
- 'left'
- 'right'
legend.padding number[ default: 5 ]图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
使用示例：
// 设置内边距为 5 padding: 5 // 设置上下的内边距为 5，左右的内边距为 10 padding: [5, 10] // 分别设置四个方向的内边距 padding: [ 5, // 上 10, // 右 5, // 下 10, // 左 ]legend.itemGap number[ default: 10 ]图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
legend.itemWidth number[ default: 25 ]图例标记的图形宽度。
legend.itemHeight number[ default: 14 ]图例标记的图形高度。
legend.symbolKeepAspect boolean[ default: true ]如果图标（可能来自系列的
symbol或用户自定义的legend.data.icon）是path://的形式，是否在缩放时保持该图形的长宽比。legend.formatter string, Function[ default: null ]用来格式化图例文本，支持字符串模板和回调函数两种形式。
示例：
// 使用字符串模板，模板变量为图例名称 {name} formatter: 'Legend {name}' // 使用回调函数 formatter: function (name) { return 'Legend ' + name; }legend.selectedMode string, boolean[ default: true ]图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成
false关闭。除此之外也可以设成
'single'或者'multiple'使用单选或者多选模式。legend.inactiveColor Color[ default: '#ccc' ]图例关闭时的颜色。
legend.selected Object图例选中状态表。
示例：
selected: { // 选中'系列1' '系列1': true, // 不选中'系列2' '系列2': false }图例的公用文本样式。
legend.textStyle.color Color[ default: #333 ]文字的颜色。
legend.textStyle.fontStyle string[ default: 'normal' ]文字字体的风格
可选：
'normal''italic''oblique'legend.textStyle.fontWeight string[ default: normal ]文字字体的粗细
可选：
'normal''bold''bolder''lighter'- 100 | 200 | 300 | 400...
legend.textStyle.fontFamily string[ default: 'sans-serif' ]文字的字体系列
还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
legend.textStyle.fontSize number[ default: 12 ]文字的字体大小
legend.textStyle.lineHeight number行高。
rich中如果没有设置lineHeight，则会取父层级的lineHeight。例如：{ lineHeight: 56, rich: { a: { // 没有设置 `lineHeight`，则 `lineHeight` 为 56 } } }legend.textStyle.backgroundColor string, Object[ default: 'transparent' ]文字块背景色。
可以是直接的颜色值，例如：
'#123234','red',rgba(0,23,11,0.3)'。可以支持使用图片，例如：
backgroundColor: { image: 'xxx/xxx.png' // 这里可以是图片的 URL， // 或者图片的 dataURI， // 或者 HTMLImageElement 对象， // 或者 HTMLCanvasElement 对象。 }当使用图片的时候，可以使用
width或height指定高宽，也可以不指定自适应。legend.textStyle.borderColor string[ default: 'transparent' ]文字块边框颜色。
legend.textStyle.borderWidth number[ default: 0 ]文字块边框宽度。
legend.textStyle.borderRadius number, Array[ default: 0 ]文字块的圆角。
legend.textStyle.padding number, Array[ default: 0 ]文字块的内边距。例如：
padding: [3, 4, 5, 6]：表示[上, 右, 下, 左]的边距。padding: 4：表示padding: [4, 4, 4, 4]。padding: [3, 4]：表示padding: [3, 4, 3, 4]。注意，文字块的
width和height指定的是内容高宽，不包含padding。legend.textStyle.shadowColor string[ default: 'transparent' ]文字块的背景阴影颜色。
legend.textStyle.shadowBlur number[ default: 0 ]文字块的背景阴影长度。
legend.textStyle.shadowOffsetX number[ default: 0 ]文字块的背景阴影 X 偏移。
legend.textStyle.shadowOffsetY number[ default: 0 ]文字块的背景阴影 Y 偏移。
legend.textStyle.width number, string文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见
backgroundColor）时，可能会使用它。注意，文字块的
width和height指定的是内容高宽，不包含padding。
width也可以是百分比字符串，如'100%'。表示的是所在文本块的contentWidth（即不包含文本块的padding）的百分之多少。之所以以contentWidth做基数，因为每个文本片段只能基于content box布局。如果以outerWidth做基数，则百分比的计算在实用中不具有意义，可能会超出。注意，如果不定义
rich属性，则不能指定width和height。legend.textStyle.height number, string文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见
backgroundColor）时，可能会使用它。注意，文字块的
width和height指定的是内容高宽，不包含padding。注意，如果不定义
rich属性，则不能指定width和height。legend.textStyle.textBorderColor string[ default: 'transparent' ]文字本身的描边颜色。
legend.textStyle.textBorderWidth number[ default: 0 ]文字本身的描边宽度。
legend.textStyle.textShadowColor string[ default: 'transparent' ]文字本身的阴影颜色。
legend.textStyle.textShadowBlur number[ default: 0 ]文字本身的阴影长度。
legend.textStyle.textShadowOffsetX number[ default: 0 ]文字本身的阴影 X 偏移。
legend.textStyle.textShadowOffsetY number[ default: 0 ]文字本身的阴影 Y 偏移。
在
rich里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。例如：
label: { // 在文本中，可以对部分文本采用 rich 中定义样式。 // 这里需要在文本中使用标记符号： // `{styleName|text content text content}` 标记样式名。 // 注意，换行仍是使用 '\n'。 formatter: [ '{a|这段文本采用样式a}', '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}' ].join('\n'), rich: { a: { color: 'red', lineHeight: 10 }, b: { backgroundColor: { image: 'xxx/xxx.jpg' }, height: 40 }, x: { fontSize: 18, fontFamily: 'Microsoft YaHei', borderColor: '#449933', borderRadius: 4 }, ... } }详情参见教程：富文本标签
legend.tooltip Object图例的 tooltip 配置，配置项同 tooltip。默认不显示，可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip，如下示例：
legend: { formatter: function (name) { return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…'); }, tooltip: { show: true } }图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的
name（如果是饼图，也可以是饼图单个数据的name）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串''（空字符串）或者'\n'（换行字符串）用于图例的换行。如果
data没有被指定，会自动从当前系列中获取。多数系列会取自 series.name 或者 series.encode 的seriesName所指定的维度。如 饼图 and 漏斗图 等会取自 series.data 中的 name。如果要设置单独一项的样式，也可以把该项写成配置项对象。此时必须使用
name属性对应表示系列的name。示例
data: [{ name: '系列1', // 强制设置图形为圆。 icon: 'circle', // 设置文本为红色 textStyle: { color: 'red' } }]legend.data[i].name string图例项的名称，应等于某系列的
name值（如果是饼图，也可以是饼图单个数据的name）。legend.data[i].icon string图例项的 icon。
ECharts 提供的标记类型包括
'circle','rect','roundRect','triangle','diamond','pin','arrow'可以通过
'image://url'设置为图片，其中 URL 为图片的链接，或者dataURI。URL 为图片链接例如：
'image://http://xxx.xxx.xxx/a/b.png'URL 为
dataURI例如：'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'可以通过
'path://'将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。例如：
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'legend.data[i].textStyle Object图例项的文本样式。
legend.backgroundColor Color[ default: 'transparent' ]图例背景色，默认透明。
颜色可以使用 RGB 表示，比如
'rgb(128, 128, 128)'，如果想要加上 alpha 通道，可以使用 RGBA，比如'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如'#ccc'legend.borderColor Color[ default: '#ccc' ]图例的边框颜色。支持的颜色格式同 backgroundColor。
legend.borderWidth number[ default: 1 ]图例的边框线宽。
legend.borderRadius number, Array[ default: 0 ]圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。 如:
borderRadius: 5, // 统一设置四个角的圆角大小 borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）legend.shadowBlur number图形阴影的模糊大小。该属性配合
shadowColor,shadowOffsetX,shadowOffsetY一起设置图形的阴影效果。示例：
{ shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10 }注意：此配置项生效的前提是，设置了
show: true以及值不为tranparent的背景色backgroundColor。legend.shadowColor Color阴影颜色。支持的格式同
color。注意：此配置项生效的前提是，设置了
show: true。legend.shadowOffsetX number[ default: 0 ]阴影水平方向上的偏移距离。
注意：此配置项生效的前提是，设置了
show: true。legend.shadowOffsetY number[ default: 0 ]阴影垂直方向上的偏移距离。
注意：此配置项生效的前提是，设置了
show: true。legend.scrollDataIndex number[ default: 0 ]legend.type 为
'scroll'时有效。图例当前最左上显示项的
dataIndex。
setOption时指定此项的话，可决定当前图例滚动到哪里。但是，如果仅仅想改变图例翻页，一般并不调用
setOption（因为这太重量了），仅仅使用 action legendScroll 即可。legend.pageButtonPosition string[ default: 'end' ]legend.type 为
'scroll'时有效。图例控制块的位置。可选值为：
'start'：控制块在左或上。'end'：按钮快在右或下。legend.pageFormatter string, Function[ default: '{current}/{total}' ]legend.type 为
'scroll'时有效。图例控制块中，页信息的显示格式。默认为
'{current}/{total}'，其中{current}是当前页号（从 1 开始计数），{total}是总页数。如果
pageFormatter使用函数，须返回字符串，参数为：{ current: number total: number }legend.type 为
'scroll'时有效。图例控制块的图标。
legend.pageIconInactiveColor string[ default: '#aaa' ]legend.type 为
'scroll'时有效。翻页按钮不激活时（即翻页到头时）的颜色。
legend.pageIconSize number, Array[ default: 15 ]legend.type 为
'scroll'时有效。翻页按钮的大小。可以是数字，也可以是数组，如
[10, 3]，表示[宽，高]。legend.type 为
'scroll'时有效。图例页信息的文字样式。
legend.animation boolean图例翻页是否使用动画。
legend.animationDurationUpdate number[ default: 800 ]图例翻页时的动画时长。
案例
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>echarts之组件title</title> <!-- 引入echarts --> <script type="text/javascript" src="../js/echarts.js" ></script> </head> <body> <div id="title" style="width: 600px; height: 400px;"></div> <script type="text/javascript"> //初始化echarts var myChart = echarts.init(document.getElementById('title')); //配置 var option = { title:{ //是否显示，默认true show:true, //标题文本 text:'我的主标题', textStyle:{ //主标题字体颜色 color:'green', //主标题的字体风格，斜体加粗 fontStyle:'oblique', //文字大小 fontSize:24, }, subtext:'我的副标题', //副标题样式 subtextStyle:{ color:'#FF4500', fontSize:15 }, //距离容器左边的距离，居中，九宫格布局 left:'center', }, legend:{ //是否显示，默认true show:true, //图例类型，普通类型 type:'plain', //图例数据与series的name对应 data:['图例1','图例2'], //离容器左边的距离，左对齐 left:'center', //离容器顶端的距离，靠底端 top:'bottom', //图例布局的朝向，水平 orient:'horizontal', //图例与文本的对齐方式，默认auto align:'right', //图例之间的间距 itemGap:10, //图形的宽高 itemWidth:25, itemHeight:14, symbolKeepAspect:true, //文字格式器，支持函数 formatter:'{name}数据', //图例选择模式，多选模式 selectMode:'multiple', //图例关闭时的颜色，默认为#CCC inactiveColor:'#48D1CC', //图例选中状态 selected:{ '图例1':true, '图例2':false }, //文本样式 textStyle:{ color:'#FFD700', fontSize:16 }, //提示框，默认不显示 tooltip:{ show:true } }, xAxis:{ type:'category', data:['小米','魅族','华为','苹果','一加'] }, yAxis:{}, series:[ { name:'图例1', type:'bar', data:[15,45,78,56,45] }, { name:'图例2', type:'line', data:[15,45,78,56,45] } ] }; //显示 myChart.setOption(option); </script> </body> </html>效果图
建议还是多动手！！！！
echarts基础学习之组件legend（二）
1387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
