Eharts 常用的属性

最新推荐文章于 2024-09-26 15:14:10 发布

原创最新推荐文章于 2024-09-26 15:14:10 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

Echarts 专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了ECharts中控制地图缩放、Tooltip提示框配置及数据展示方式，包括roam属性、formatter格式化选项和图表类型下的变量含义。提供了图表配置实例，帮助理解不同图表类型如饼图、折线图等的数据展示规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 控制Map缩放的属性： roam: true/false，true表示可缩放，false表示不能缩放。

2. Tooltip:提示框，鼠标悬浮交互时的信息提示,其中有个重要的属性 formatter，这个属性是用来格式提示信息的格式。以饼图为例：

option = {
			 	   title : {
			 			text: '性别比例',
			 			//subtext: '纯属虚构',
			 			x:'center',
			 			y:25,
			 			textStyle:{
			 		    fontSize: 12,
			 		    fontWeight: 'bolder',
			 		    color: '#333'
			 		    }
			 		},
			 		tooltip : {
			 			trigger: 'item',
			 			formatter: "{a} <br/>{b} : {c} ({d}%)"
			 		},
			 		color:['#87cefa','#ff69b4'],//设置饼图的颜色
			 		calculable : true,
			 		series : [
			 			{
			 				name:'性别比例',
			 				type:'pie',			 				
			 				radius : '55%',
			 				center: ['50%', '60%'],				
			 				data:{value:335, name:'男'},
                                                     {value:310, name:'女'}
			 			}
	                                ]
}

其中变量a、b、c、d在不同图表类型下代表数据含义为：
折线（区域）图、柱状（条形）图、K线图 : a（series.name），b（category.data），c（data.value）, d（无）
散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无）
地图 : a（series.name），b（region.name），c（series.data.value）, d（无）
饼图、雷达图、仪表盘、漏斗图: a（series.name），b(series.data.name/polar.indicator.value），c（series.data.value）, d（饼图：百分比 | 雷达图：指标名称）
力导向图, 和弦图 :
节点 : a（series.name），b（节点名称），c（节点值）, d(节点类目索引)
边 : a（series.name），b（边名称，默认为源名称-目标名称），c（边权重）, d(源节点name或者index), e(目标节点name或者index)。

未完待续……

如果有看不明白的请留言。