echarts中setOption对legend的设置

最新推荐文章于 2025-07-29 23:20:55 发布

原创最新推荐文章于 2025-07-29 23:20:55 发布 · 596 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

前端专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了ECharts中图例组件（legend）的各种配置选项，包括类型、宽度、颜色、位置、布局方向、对齐方式、间距、图例标记大小、样式、选中模式及其文本样式等，帮助读者理解如何自定义ECharts图表的图例展示。

在这里插入图片描述

var echartsInstance = echarts.init(document.getElementById('DOMid'))
echartsInstance.setOption({
	legend:{
		type:'plain',				//普通图例，默认
			 'scroll',				//可滚动翻页的图例
		width:
		borderColor:
		borderWidth:
		left:
		top:
		orient:'horizontal'/'vertical'//图例列表的布局朝向
		align:'auto'/'left'/'right'	//图例文本的对齐
		padding:
		itemGap:10					//图例每项之间的间隔
		itemWidth:					//图例标记的图形宽度
		itemStyle:{
			borderColor:
			borderWidth:
			borderType:'solid'/'dashed'/'dotted'
		},
		selectedMode:true/false				//控制是否可以通过点击图例改变系列的显示状态
		             'single'/'multiple'
		 textStyle:{
		 	padding:
		 	width:
		 	overflow:
		 },
		 tooltip:{				//图例的tooltip配置，配置项同tooltip。
		 },
		 icon:'circle','rect','roundRect','diamond',
		 	  'image://http://xxx.xxx/xx.png',
		 	  'dataURL',
		 data:
		 
	}
})