SOURCE

let color1 = [
	"rgba(239, 121, 33, 1)",
	"rgba(254, 174, 40, 1)",
	"rgba(39, 87, 231, 1)"
];
let color2 = [
	"rgba(255, 142, 0, 1)",
	"rgba(250, 230, 118, 1)",
	"rgba(140, 171, 252, 1)",
];
// 创建渐变色
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color, index) {
	return {
		radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
		stops: [
			[0, color2[index]],
			[1, color1[index]] // darken
		]
	};
});
var chart = Highcharts.chart('container', {
	chart: {
		type: 'pie',
		options3d: {
			enabled: true,
			alpha: 45,
			beta: 0
		}
	},
	title: {
        useHTML: true,
        margin: 0,
		text: '<div class="box"><div class="trapezoid">园区充值总额结构分析</div></div>'
	},
	tooltip: {
		enabled: false,
		pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	},
    credits:{ 
        enabled: false, // 禁用版权信息 
    },
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			depth: 35,
			size:'100%',
			top:-20,
			dataLabels: { 
				useHTML: true,
				softConnector: false,   // 是否使用曲线
				connectorColor: '#ed6b37', // 连接线颜色，默认是扇区颜色
				distance: 30, // 数据标签与扇区距离
				connectorPadding: 0,  // 数据标签与连接线的距离
				format: '<div class="dataLabels"><b>{point.name}</b>: {point.percentage:.1f} %</div>'
			}
		}
	},
	series: [{
		type: 'pie',
		name: '浏览器占比',
		data: [
			['Firefox', 20],
			['IE',       20],
			['Others',   17]
		],
		shadow: {
			color: '#ed6b37',
			offsetX: 0,
			offsetY: 8,
			opacity: 0.05,
		},
	}]
});

<script src="https://code.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://code.hcharts.cn/highcharts/highcharts-3d.js"></script>
<script src="https://code.hcharts.cn/plugins/zh_cn.js"></script>
<div id="container" style="min-height:368px;min-width:300px"></div>
<style type="text/css">
@font-face {
	font-family: "阿里妈妈数黑体 Bold";
	font-weight: 700;
	src: url("//at.alicdn.com/wf/webfont/AeK9ZBvWEmyx/xoyDVFSP4Qe2.woff2") format("woff2"), url("//at.alicdn.com/wf/webfont/AeK9ZBvWEmyx/HWhsJ2YV9Lrv.woff") format("woff");
	font-display: swap;
}
</style>

.dataLabels {
	height: 26px;
	position: absolute;
	background: rgba(252, 233, 225, 1);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	flex-direction: row;
	border: 1px solid #ED6B37;
	border-radius: 2px;
	top: -20px;
	left: -20px;
	padding: 0 8px 0;
	font-size: 16px;
	font-family: PingFang;
	font-weight: bold;
	color: #ED6B37;
}

.trapezoid {
    position: relative;
    line-height:32px;
    text-align:center;
    color: #fff;
    width:240px;
    height:40px;
    font-size: 24px;
    font-family: '阿里妈妈数黑体 Bold', webfont-notdef;
}
.box::before { 
    content: ''; 
    display: block;
    background: linear-gradient(to right, #F39618, #FE4E10);
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    transform: perspective(.5em) rotateX(-3deg); 
    transform-origin: bottom;
    border-radius:0 0 8px 8px
}