【Vue3】 echarts雷达图 [文字标题过长显示不全]-Toy模板网

这篇具有很好参考价值的文章主要介绍了【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值文章来源地址https://www.toymoban.com/news/detail-685223.html

到了这里，关于【Vue3】 echarts雷达图 [文字标题过长显示不全]的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！