【Vue3】 echarts雷达图 [文字标题过长显示不全]

1、代码

<template>
    <!-- 双预防运行结果 -->
    <div style="width: 1400px; height: 1000px; display: flex; padding: 0 10px">
        <v-chart :option="option" autoresize style="width: 85%;margin-right: 30px;" />
    </div>
</template>

<script lang="ts">
export default {
    name: DualPreventionOperation,
}
</script>
<script lang="ts" setup>
import { useDataStatus, dialogTypeEnum } from @/stores/dialog/data-status
import VChart from vue-echarts

const dataStatus = useDataStatus()
onMounted(() => {

})
const obj = dataStatus.dialogMap.get(dialogTypeEnum.prevention_operation).condition?.row
//visualMap 填充色对比 最大值
const option = ref(
    {
        backgroundColor: rgb(30, 36, 50),
        tooltip: {
            show: true,
            trigger: item,
        },

        radar: {
            // shape: circle,
            radius: 65%,
            name: {
                textStyle: {
                    color: #fff,
                    //backgroundColor: #999,
                    borderRadius: 3,
                    padding: [-10, -10],
                    fontSize: 20
                },
                formatter: function (value) {                    
                    let list = value.split("");
                    console.log(list);
                    let result = "";
                    for (let i = 1; i <= list.length; i++) {
                        if (!(i % 7) && list[i] != undefined) {
                            result += list[i - 1] + 
;
                        } else {
                            result += list[i - 1];
                        }
                    }
                    return result;
                },
            },
            axisLine: {
                lineStyle: {
                    color: #1968a0,
                    width: 1,
                    type: solid
                },
            },

            splitArea: {
                areaStyle: {

                    color: [rgba(40,203,228,0.3), rgb(30, 36, 50,0.7)]
                }
            },
            splitLine: {
                lineStyle: {
                    color: [#74e7f0, #74e7f0, #74e7f0, #74e7f0],
                    width: 1
                }
            },
            indicator: [{
                text: 风险分析完成率,
            }, {
                text: 隐患整改率,
            }, {
                text: 排查任务完成率,
            },
            ]
        },
        series: [{
            name: 双预防运行结果,
            type: radar,
            symbol: circle,
            symbolSize: 3,
            areaStyle: {
                normal: {
                    color: rgba(103,194,58,0.3),
                    fontSize: 24
                },
            },
            itemStyle: {
                color: rgba(103,194,58,.7),
                borderColor: rgba(103,194,58,.5),
                borderWidth: 5,
            },

            data: [
                {
                    value: [obj.num9, obj.num10, obj.num11],
                    name: 双预防运行结果
                }],

        }]
    }
)

</script>

<style lang="scss" scoped></style>

注意： 1）、文字显示不全 解决： <1>、radius: 65%, // 设置这个文字少的情况下可解决 <2>、上诉代码formatter这个方法，可解决文字过长进行换行展示 2）、indicator中可以设置max值