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
		}),
	}
]

猜你喜欢

转载自blog.csdn.net/PGD_607/article/details/111365030