012_图例

最新推荐文章于 2025-04-16 00:50:37 发布

原创最新推荐文章于 2025-04-16 00:50:37 发布 · 1.3w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #echarts

Apache ECharts 专栏收录该内容

12 篇文章

订阅专栏

1. 图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列, 通过点击对应数据列的标记, 可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。

2. 图例布局

2.1. 图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致, 可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。

2.2. legend.type, 图例的类型。可选值: 'plain'普通图例, 缺省就是普通图例; 'scroll'可滚动翻页的图例, 当图例数量较多时可以使用。string类型。

2.3. legend.id , 组件ID。默认不指定。指定则可用于在option或者API中引用组件。string类型。

2.4. legend.show = true, 是否显示图例。boolean类型。

2.5. legend.left = 'auto', 图例组件离容器左侧的距离。left的值可以是像20这样的具体像素值, 可以是像'20%'这样相对于容器高宽的百分比, 也可以是'left', 'center', 'right'。string和number类型。

2.6. legend.top = 'auto', 图例组件离容器上侧的距离。top的值可以是像20这样的具体像素值, 可以是像'20%'这样相对于容器高宽的百分比, 也可以是'top', 'middle', 'bottom'。string和number类型。

2.7. legend.right = 'auto', 图例组件离容器右侧的距离。right的值可以是像20这样的具体像素值, 可以是像'20%'这样相对于容器高宽的百分比。默认自适应。string和number类型。

2.8. legend.bottom = 'auto', 图例组件离容器下侧的距离。bottom的值可以是像20这样的具体像素值, 可以是像'20%'这样相对于容器高宽的百分比。默认自适应。string和number类型。

2.9. legend.width = 'auto', 图例组件的宽度。默认自适应。string和number类型。

2.10. legend.height = 'auto', 图例组件的高度。默认自适应。string和number类型。

2.11. legend.orient = 'horizontal', 例列表的布局朝向。可选: 'horizontal'和'vertical'。string类型。

2.12. legend.borderColor = '#ccc', 图例的边框颜色。Color类型。

2.13. legend.borderWidth = 1, 图例的边框线宽。number类型。

2.14. legend.borderRadius, 圆角半径, 单位px, 支持传入数组分别指定4个圆角半径。number或Array类型。如:

borderRadius: 5, // 统一设置四个角的圆角大小
borderRadius: [5, 5, 0, 0] // (顺时针左上, 右上, 右下, 左下)

2.15. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图例布局</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="top" style="width: 900px; height: 400px;"></div>
		<div id="right" style="width: 900px; height: 400px;"></div>
		<div id="bottom" style="width: 900px; height: 400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var mytopChart = echarts.init(document.getElementById('top'));
	      	var myrightChart = echarts.init(document.getElementById('right'));
	      	var mybottomChart = echarts.init(document.getElementById('bottom'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '图例布局'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 配置要在X轴显示的项
		        xAxis: {
    			  type: "category" // 类目
  				},
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 数据集
		        dataset: {
		          source: [ // 原数据。
		            ['product', '2020', '2021', '2022'],
		        	['Matcha Latte', 89.3, 95.8, 97.7],
		        	['Milk Tea', 92.1, 89.4, 83.1],
		        	['Cheese Cocoa', 94.4, 91.2, 92.5],
		        	['Walnut Brownie', 85.4, 76.9, 78.1]
		          ]
		        },
		        // 系列列表
		        series: [ { type: 'bar' }, { type: 'bar' }, { type: 'bar' } ]
	      	};
	      	// 图例组件
		    var topLegend = {
	          	id: 'top',
	          	show: true,
	          	width: 300, // 宽高设置过大, 也还是包裹内容的大小
	          	height: 80,
	          	borderColor: 'red',
	          	borderWidth: 1,
	          	left: 'center',
	          	top: 'top',
	          	orient: 'horizontal'
	        };
	        option.legend = topLegend;
	        option.title.text = '图例布局在上方';
	      	// 使用刚指定的配置项和数据显示图表。
	      	mytopChart.setOption(option);


	      	// 图例组件
		    var rightLegend = {
	          	id: 'right',
	          	show: true,
	          	width: 80, // 宽高设置过大, 也还是包裹内容的大小
	          	height: 60,
	          	borderColor: 'red',
	          	borderWidth: 1,
	          	type: 'scroll',
	          	right: 10,
	          	top: 'middle',
	          	orient: 'vertical'
	        };
	        option.legend = rightLegend;
	        option.title.text = '图例布局在右边';
	        myrightChart.setOption(option);

	        // 图例组件
		    var bottomLegend = {
	          	id: 'bottom',
	          	show: true,
	          	width: 300, // 宽高设置过大, 也还是包裹内容的大小
	          	height: 80,
	          	borderColor: 'red',
	          	borderWidth: 1,
	          	left: 'center',
	          	bottom: 10,
	          	orient: 'horizontal'
	        };
	        option.legend = bottomLegend;
	        option.title.text = '图例布局在下方';
	        mybottomChart.setOption(option);
	    </script>
	</body>
</html>

2.16. 效果图

3. 图例样式

3.1. legend.formatter, 用来格式化图例文本, 支持字符串模板和回调函数两种形式。string或Function类型。示例:

// 使用字符串模板, 模板变量为图例名称{name}
formatter: 'Legend {name}'
// 使用回调函数
formatter: function (name) {
    return 'Legend ' + name;
}

3.2. legend.icon, 图例项的icon。string类型。ECharts提供的标记类型包括: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'。可以通过'image://url'设置为图片, 其中URL为图片的链接, 或者dataURI。例如:

// URL为图片链接
'image://http://xxx.xxx.xxx/a/b.png'
// URL为dataURI
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

3.3. legend.backgroundColor = 'transparent', 图例背景色, 默认透明。颜色可以使用RGB表示, 比如: 'rgb(128, 128, 128)', 如果想要加上alpha通道, 可以使用RGBA, 比如: 'rgba(128, 128, 128, 0.5)', 也可以使用十六进制格式, 比如: '#ccc'。Color类型。

3.4. legend.data, 图例的数据数组。数组项通常为一个字符串, 每一项代表一个系列的name。图例组件会自动根据对应系列的图形标记(symbol)来绘制自己的颜色和标记, 特殊字符串''(空字符串)或者'\n'(换行字符串)用于图例的换行。如果data没有被指定, 会自动从当前系列中获取。如果要设置单独一项的样式, 也可以把该项写成配置项对象。此时必须使用name属性对应表示系列的name。所有属性: { name , icon , itemStyle , lineStyle , symbolRotate , textStyle }。示例:

data: [{
    name: '系列1',
    // 强制设置图形为圆。
    icon: 'circle',
    // 设置文本为红色
    textStyle: {
        color: 'red'
    }
}]

3.5. legend.textStyle.color = #333, 文字的颜色。Color类型。

3.6. legend.textStyle.fontStyle = 'normal', 文字字体的风格。可选: 'normal'、'italic'和'oblique'。string类型。

3.7. legend.textStyle.fontWeight = 'normal', 文字字体的粗细。可选: 'normal'、'bold'、'bolder'、'lighter'和100 | 200 | 300 | 400...。string和number类型。

3.8. legend.textStyle.fontFamily = 'sans-serif', 文字的字体系列。还可以是'serif', 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...。string类型。

3.9. legend.textStyle.fontSize = 12, 文字的字体大小。number类型。

3.10. legend.textStyle.lineHeight, 行高。number类型。

3.11. legend.textStyle.backgroundColor = 'transparent', 文字块背景色。string和Object类型。可以使用颜色值, 例如：'#123234', 'red', 'rgba(0,23,11,0.3)'。也可以直接使用图片, 当使用图片的时候, 可以使用width或height指定高宽, 也可以不指定自适应。例如:

backgroundColor: {
    image: 'xxx/xxx.png'
    // 这里可以是图片的 URL，
    // 或者图片的 dataURI，
    // 或者 HTMLImageElement 对象，
    // 或者 HTMLCanvasElement 对象。
}

3.12. legend.textStyle.borderColor, 文字块边框颜色。Color类型。

3.13. legend.textStyle.borderWidth, 文字块边框宽度。number类型。

3.14. legend.textStyle.borderType = 'solid', 文字块边框描边类型。string、number和Array类型。可选: 'solid'、'dashed'和'dotted'。自v5.0.0开始, 也可以是number或者number数组, 用以指定线条的dash array, 配合borderDashOffset可实现更灵活的虚线效果。例如:

{
	borderType: [5, 10],

	borderDashOffset: 5
}

3.15. legend.textStyle.borderDashOffset, 用于设置虚线的偏移量, 可搭配borderType指定dash array实现灵活的虚线效果。number类型。

3.16. legend.textStyle.borderRadius, 文字块的圆角。number和Array类型。

3.17. legend.textStyle.padding, 文字块的内边距。number和Array类型。

padding: [3, 4, 5, 6], 表示[上, 右, 下, 左]的边距。
padding: 4, 表示padding: [4, 4, 4, 4]。
padding: [3, 4], 表示padding: [3, 4, 3, 4]。

3.18. legend.textStyle.shadowColor = 'transparent', 文字块的背景阴影颜色。Color类型。

3.19. legend.textStyle.shadowBlur, 文字块的背景阴影长度。number类型。

3.20. legend.textStyle.shadowOffsetX, 文字块的背景阴影X偏移。number类型。

3.21. legend.textStyle.shadowOffsetY, 文字块的背景阴影Y偏移。number类型。

3.22. legend.textStyle.width, 文本显示宽度。number类型。

3.23. legend.textStyle.height, 文本显示高度。number类型。

3.24. legend.textStyle.textBorderColor, 文字本身的描边颜色。Color类型。

3.25. legend.textStyle.textBorderWidth, 文字本身的描边宽度。number类型。

3.26. legend.textStyle.textBorderType = 'solid', 文字本身的描边类型。number、string和Array类型。可选: 'solid'、'dashed'和'dotted'。自v5.0.0开始, 也可以是number或者number数组, 用以指定线条的dash array, 配合textBorderDashOffset可实现更灵活的虚线效果。例如:

{
	textBorderType: [5, 10],

	textBorderDashOffset: 5
}

3.27. legend.textStyle.textBorderDashOffset, 用于设置虚线的偏移量, 可搭配textBorderType指定dash array实现灵活的虚线效果。number类型。

3.28. legend.textStyle.textShadowColor = 'transparent', 文字本身的阴影颜色。Color类型。

3.29. legend.textStyle.textShadowBlur, 文字本身的阴影长度。number类型。

3.30. legend.textStyle.textShadowOffsetX, 文字本身的阴影X偏移。number类型。

3.31. legend.textStyle.textShadowOffsetY, 文字本身的阴影Y偏移。number类型。

3.32. legend.textStyle.overflow = 'none', 文字超出宽度是否截断或者换行。配置width时有效。string类型。可选值:

'truncate'截断, 并在末尾显示ellipsis配置的文本, 默认为...。
'break'换行。
'breakAll'换行, 跟'break'不同的是, 在英语等拉丁文中, 'breakAll'还会强制单词内换行。

3.33. legend.textStyle. ellipsis = '...',在overflow配置为'truncate'的时候, 可以通过该属性配置末尾显示的文本。string类型。

3.34. legend.textStyle. rich, 在rich里面, 可以自定义富文本样式。利用富文本样式, 可以在标签中做出非常丰富的效果。Object类型。

3.35. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图例样式</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 900px; height: 400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '图例样式'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          formatter: function (name) {
    			    return name + '年';
				  },
		          backgroundColor: 'pink',
		          textStyle: {
	              	fontSize: 16,
	              	lineHeight: 32,
	              	backgroundColor: 'rgba(4, 4, 4, 1)',
	              	borderColor: '#F00',
	              	borderWidth: 3,
	              	borderType: [5, 10],
	              	borderDashOffset: 5,
	              	borderRadius: 5,
	              	padding: 8
	              },
		          data: [
		            {
		              name: '2020', 
		              icon: 'circle',
		              textStyle: {
		              	color: 'rgba(20, 231, 58, 1)',
		              	fontStyle: 'normal',
		              	fontWeight: 'normal',
		              	fontFamily: 'serif'
		              }
		            }, 
		            {
		              name: '2021', 
		              icon: 'rect',
		              textStyle: {
		              	color: 'rgba(20, 217, 231, 1)',
		              	fontStyle: 'italic',
		              	fontWeight: 'bold',
		              	fontFamily: 'monospace'
		              }
		            }, 
		            {
		              name: '2022', 
		              icon: 'triangle',
		              textStyle: {
		              	color: 'rgba(104, 20, 231, 1)',
		              	fontStyle: 'oblique',
		              	fontWeight: 'bolder',
		              	fontFamily: 'Courier New'
		              }
		            }
		          ]
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
    			  type: "category" // 类目
  				},
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 数据集
		        dataset: {
		          source: [ // 原数据。
		            ['product', '2020', '2021', '2022'],
		        	['Matcha Latte', 89.3, 95.8, 97.7],
		        	['Milk Tea', 92.1, 89.4, 83.1],
		        	['Cheese Cocoa', 94.4, 91.2, 92.5],
		        	['Walnut Brownie', 85.4, 76.9, 78.1]
		          ]
		        },
		        // 系列列表
		        series: [ { type: 'bar' }, { type: 'bar' }, { type: 'bar' } ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

3.36. 效果图

4. 图例交互

4.1. 根据场景需要, 图例可支持交互操作, 点击控制显示或隐藏对应的数据列。

4.2. legend.selected图例选中状态表。Object类型。示例:

selected: {
    // 选中'系列1'
    '系列1': true,
    // 不选中'系列2'
    '系列2': false
}

4.3. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图例选中状态表</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 900px; height: 400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '图例选中状态表'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          selected: {
		          	'2020': true,
		          	'2021': true,
		          	'2022': false,
		          }
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
    			  type: "category" // 类目
  				},
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 数据集
		        dataset: {
		          source: [ // 原数据。
		            ['product', '2020', '2021', '2022'],
		        	['Matcha Latte', 89.3, 95.8, 97.7],
		        	['Milk Tea', 92.1, 89.4, 83.1],
		        	['Cheese Cocoa', 94.4, 91.2, 92.5],
		        	['Walnut Brownie', 85.4, 76.9, 78.1]
		          ]
		        },
		        // 系列列表
		        series: [ { type: 'bar' }, { type: 'bar' }, { type: 'bar' } ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

4.4. 效果图