【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] + '\n';
                        } 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值