geg-gas-web/src/views/dashboard/analysis/components/VisitRadar.vue

<template>
    <Card :title="t('转化率')" :loading="loading">
        <div ref="chartRef" :style="{ width, height }"></div>
    </Card>
</template>
<script lang="ts" setup>
    import { Ref, ref, watch } from 'vue';
    import { Card } from 'ant-design-vue';
    import { useECharts } from '/@/hooks/web/useECharts';
    import { useI18n } from '/@/hooks/web/useI18n';
    const { t } = useI18n();
    const props = defineProps({
        loading: Boolean,
        width: {
            type: String as PropType<string>,
            default: '100%'
        },
        height: {
            type: String as PropType<string>,
            default: '300px'
        }
    });
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

    watch(
        () => props.loading,
        () => {
            if (props.loading) {
                return;
            }
            setOptions({
                legend: {
                    bottom: 0,
                    data: [t('访问'), t('购买')]
                },
                tooltip: {},
                radar: {
                    radius: '60%',
                    splitNumber: 8,
                    indicator: [
                        {
                            name: t('电脑')
                        },
                        {
                            name: t('充电器')
                        },
                        {
                            name: t('耳机')
                        },
                        {
                            name: t('手机')
                        },
                        {
                            name: 'Ipad'
                        },
                        {
                            name: t('耳机')
                        }
                    ]
                },
                series: [
                    {
                        type: 'radar',
                        symbolSize: 0,
                        areaStyle: {
                            shadowBlur: 0,
                            shadowColor: 'rgba(0,0,0,.2)',
                            shadowOffsetX: 0,
                            shadowOffsetY: 10,
                            opacity: 1
                        },
                        data: [
                            {
                                value: [90, 50, 86, 40, 50, 20],
                                name: t('访问'),
                                itemStyle: {
                                    color: '#b6a2de'
                                }
                            },
                            {
                                value: [70, 75, 70, 76, 20, 85],
                                name: t('购买'),
                                itemStyle: {
                                    color: '#5ab1ef'
                                }
                            }
                        ]
                    }
                ]
            });
        },
        { immediate: true }
    );
</script>