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

1、代码

export default {name: 'DualPreventionOperation',}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: '双预防运行结果'}],}]})

注意：

1）、文字显示不全

解决：

、radius: ‘65%’, // 设置这个文字少的情况下可解决

、上诉代码formatter这个方法，可解决文字过长进行换行展示

2）、indicator中可以设置max值