echarts 饼状图 调整位置

本文介绍如何通过百分比精确控制ECharts中的饼图中心位置,让系列名称'圆环图系列名称'的布局更具灵活性,同时探讨了hover动画和标签配置细节。

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

通过调整 center 按照百分比调整位置

series: [{
				name: '圆环图系列名称',         // 系列名称
				type: 'pie',                    // 系列类型
				left: '0%',
				center: ['24%', '50%'],           // 饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。[ default: ['50%', '50%'] ]
				radius: ['30%', '40%'],         // 饼图的半径,数组的第一项是内半径,第二项是外半径。[ default: [0, '75%'] ]
				hoverAnimation: true,           // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
				color: color,                   // 圆环图的颜色
				label: {                        // 饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等.
					normal: {
						show: false,             // 是否显示标签[ default: false ]
						position: 'outside',    // 标签的位置。'outside'饼图扇区外侧,通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
						formatter: '{b} : {c}次'  // 标签内容
					}
				},
				labelLine: {                    // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
					normal: {
						show: false,             // 是否显示视觉引导线。
						length: 15,             // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
						length2: 10,            // 视觉引导项第二段的长度。
						lineStyle: {            // 视觉引导线的样式
							//color: '#000',
							//width: 1
						}
					}
				},
				data: data                      // 系列中的数据内容数组。
			}],
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值