fls-asp-qr-intelligent-tutoring/src/views/result/randarPage.vue

<script setup lang="ts">
import { onMounted, defineProps, nextTick, watch ,ref} from 'vue'
import * as echarts from 'echarts';
const props = defineProps({
    randarList: Array // 或者根据你的需求，使用其他类型
});
const list = ref([0,0,0,0])
const echartsRander = (randarList) => {
    const dom = document.getElementById('chartsId');
    if (!dom) return;
    const myChart = echarts.init(dom);

    const option = {
        color: ['#56A3F1'],
        radar: {
            center: ['51%', '50%'], // 设置雷达图的中心位置，避免坐标轴名称被遮挡
            radius: '58%',
            indicator: [
                { name: '自我介绍专业性', max: 25 },
                { name: '客户画像采集', max: 25 },
                { name: '需求挖掘能力', max: 25 },
                { name: '沟通转化效果', max: 25 }
            ],
            axisName: {
                color: '#fff',
                backgroundColor: '#666',
                borderRadius: 3,
                padding: [3, 3]
            }
        },
        series: [
            {
                type: 'radar',
                data: [
                    {
                        symbol: 'rect',
                        symbolSize: 8,
                        lineStyle: {
                            type: 'dashed'
                        },
                        value: randarList,
                        label: {
                            show: true,
                            formatter: function (params) {
                                return params.value;
                            }
                        },
                    }
                ]
            }
        ]
    };

    option && myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
}

// onMounted(() => {

//     nextTick(()=>{
//         console.log(props.randarList,'00000000000')
//         echartsRander(props.randarList)
//     })
//     // echartsRander(props.randarList)
// })

onMounted(() => {
    nextTick(() => {
        if (props.randarList && props.randarList.length > 0) {
            list.value = props.randarList;
            echartsRander(props.randarList);
        }
    });
});

// 使用 watch 来观察 props.randarList 的变化
watch(() => props.randarList, (newVal, oldVal) => {
    if (newVal && newVal.length > 0) {
        list.value = newVal
        echartsRander(newVal);
    }
});

</script>
<template>
    <!-- <div> -->
        <div id="chartsId" style="width: 100%;height: 100%;"></div>
        <!-- <div v-else>暂无数据</div> -->
    <!-- </div> -->
</template>