echarts基础学习之组件legend（二）_echarts legend type

今天学习echarts的组件legend图例

图例组件。

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便多个图例的布局。

当图例数量过多时，可以使用 滚动图例（垂直） 或 滚动图例（水平）

以下摘自echarts官网，详情也可去echarts官网配置看点击打开链接

legend.type  string

图例的类型。可选值：

• 'plain'：普通图例。缺省就是普通图例。
• 'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。

参见 滚动图例（垂直） 或 滚动图例（水平）。

当使用 'scroll' 时，这些使用这些设置进行细节配置：

• legend.scrollDataIndex
• legend.pageButtonItemGap
• legend.pageButtonGap
• legend.pageButtonPosition
• legend.pageFormatter
• legend.pageIcons
• legend.pageIconColor
• legend.pageIconInactiveColor
• legend.pageIconSize
• legend.pageTextStyle
• legend.animation
• legend.animationDurationUpdate

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  Object

图例的公用文本样式。

折叠详情

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 偏移。

legend.textStyle.rich  Object

在 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
    }
}

legend.data[i]  Object

图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 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.pageButtonItemGap  number

[ default: 5 ]

legend.type 为 'scroll' 时有效。

图例控制块中，按钮和页信息之间的间隔。

参见 滚动图例（垂直） 或 滚动图例（水平）。

legend.pageButtonGap  number

[ default: null ]

legend.type 为 'scroll' 时有效。

图例控制块和图例项之间的间隔。

参见 滚动图例（垂直） 或 滚动图例（水平）。

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.pageIcons  Object

legend.type 为 'scroll' 时有效。

图例控制块的图标。

展开详情 ...

legend.pageIconColor  string

[ default: '#2f4554' ]

legend.type 为 'scroll' 时有效。

翻页按钮的颜色。

参见 滚动图例（垂直） 或 滚动图例（水平）。

legend.pageIconInactiveColor  string

[ default: '#aaa' ]

legend.type 为 'scroll' 时有效。

翻页按钮不激活时（即翻页到头时）的颜色。

参见 滚动图例（垂直） 或 滚动图例（水平）。

legend.pageIconSize  number, Array

[ default: 15 ]

legend.type 为 'scroll' 时有效。

翻页按钮的大小。可以是数字，也可以是数组，如 [10, 3]，表示 [宽，高]。

参见 滚动图例（垂直） 或 滚动图例（水平）。

legend.pageTextStyle  Object

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>

效果图

建议还是多动手！！！！