如何让饼图中间文字大小自适应图表？

如何让饼图中间文字大小自适应图表？
今天在项目中遇到echarts饼图中间文字居中的需求，显示用了title：{}中添加文本，辅助left,top位置来显示也能实现，

但是后面发现不能中间数字变化后无法适应位置，这样写会固定死位置，不灵活。

关键代码：

   {
                name: '',
                z: 100,
                type: 'gauge',
                radius: '-50%',
                center: [`30%`, `50%`],
                // 配置中间的数字
                detail: {
                    // 调节数字位置
                    offsetCenter: [-1,-15],
                    fontSize: 30,
                    fontFamily:'PangMenZhengDao' ,
                    color: '#D8E9FF',
                },
                pointer: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                // 中间的字和数字 数据
                data: [
                    {
                        value: value,
                        name:''
                    },
                ],
            }

直接用这个达不到我想要的结果，没法给下面文字定义style,我还是结合了title，把数字下面的文字固定死了，如果有大神指教那就太好了。
也是在网上反复查，最终测试可以了，代码如下：
series: [
{
name: ‘占比’,
type: ‘pie’,
radius: [‘45%’, ‘65%’],
center:[‘30%’,‘50%’],
avoidLabelOverlap: true,
emphasis: {
label: {
show: false,
fontSize: ‘20’,
fontFamily:‘PingFang’,
}
},
label: {
color: ‘#D8E9FF’,
fontFamily:‘PingFang’,
normal:{
show:false,
position:‘center’,
formatter: ‘{b} : {c}’ , // 标签内容
},
},
labelLine: {
lineStyle: {
color: ‘rgba(255, 255, 255, 0)’
},
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
shadowBlur: 0,
shadowColor: ‘rgba(255, 255, 255)’
},
data: data，
animationType: ‘scale’,
animationEasing: ‘elasticOut’,
animationDelay: function (idx) {
return Math.random() * 200;
}
},
{
name:‘中心’,
radius: [‘0%’, ‘38%’],
center: [‘30%’, ‘50%’],
type: ‘pie’,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: “rgba(15, 55, 73, 1)” },
{ offset: 1, color: “rgba(9, 32, 41, .59)” },
]), //内圆颜色
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
animation: false,
tooltip: {
show: false
},
data: [{
value: 1,

            }],
        },
        {
            name: '外边框',
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ['30%', '50%'],
            radius: ['73%', '73%'],
            label: {
                normal: {
                    show: false
                }
            },
            tooltip:{show:false},
            data: [{
                value: 9,
                name: '',
                itemStyle: {
                    normal: {
                        borderWidth: 2,
                        borderColor: '#194b54'
                    }
                }
            }]
        },
        {
            name: '',
            z: 100,
            type: 'gauge',
            radius: '-50%',
            center: [`30%`, `50%`],
            // 配置中间的数字
            detail: {
                // 调节数字位置
                offsetCenter: [-1,-15],
                fontSize: 30,
                fontFamily:'PangMenZhengDao' ,
                color: '#D8E9FF',
            },
            pointer: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            // 中间的字和数字 数据
            data: [
                {
                    value: value,
                    name:''
                },
            ],
        }
    ]

贴个图：