Echarts饼图实现与引导线间的间隔

目标效果(连接线与饼图存在间隔):
在这里插入图片描述

Echarts饼图label配置为outside时,默认连接线与图形直接相连:
在这里插入图片描述
实现方案:绘制时,同时绘制两个半径不同的饼图。一个只显示饼图(半径较小),不显示label;另一个饼图(半径较大),设置为透明,只显示label和连接线。
Echarts series的配置:

option.series = [
	// 只显示饼图,不显示label和连接线
	{
		type: 'pie',
		startAngle: 180,
		minAngle: 15,
		radius: ['30%', '65%'],
		label: {
		    show: false,
		},
		animationTypeUpdate: 'expansion',
		animationDurationUpdate: 1000,
		data: res.data.series.filter((item) => {
		    return item.value != 0
		})
	},
	// 饼图设置为透明,只显示label和连接线
	{
		type: 'pie',
		startAngle: 180,
		minAngle: 15,
		radius: ['65%', '70%'],
		avoidLabelOverlap: true,
		label: {
		    position: 'outer',
		    alignTo: 'edge',
		    margin: 10,
		    show: true,
		},
		labelLine: {
		    normal: {
		        length2: 250,
		        length: 10,
		        lineStyle: {
		            color: 'rgba(255, 255, 255, 0.45)'
		        }
		    },
		},
		// 设置为透明
		itemStyle: {
		    opacity: 0,
		},
		data: res.data.series.filter((item) => {
		    return item.value != 0
		}),
	}
]
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值