dz-app/pages/index/components/enroll-dashboard.vue

<template>
    <mx-echarts ref="echarts" :options="option" canvas-id="dashboard"/>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {useEventListener} from "@vueuse/core";
import {useTransfer} from "@/hooks/useTransfer";
import {useTheme} from "@/hooks/useTheme";
import mxConst from "@/common/mxConst";

const option = ref({})
const {theme} = useTheme()
const {transferTo} = useTransfer()
const echarts = ref(null)

useEventListener(echarts, 'click', (e) => {
    const sysInfo = uni.getSystemInfoSync()
    const {x, y} = e
    const [width, height] = [120, 60]
    const rect = {x: (sysInfo.windowWidth - width) / 2, y: 140, width, height}
    if (x >= rect.x && x <= rect.x + rect.width &&
        y >= rect.y && y <= rect.y + rect.height) {
        transferTo(mxConst.routes.portal)
    }
})

// hooks
onMounted(() => {
    initChart()
})

function initChart() {
    option.value = {
        series: [
            {
                type: 'gauge',
                center: ['50%', '50%'],
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 100,
                splitNumber: 2,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color: theme.value.colors['primary-deep']
                        }, {
                            offset: 1, color: theme.value.colors['primary-light']
                        }]
                    }
                },
                progress: {
                    show: true,
                    roundCap: true,
                    width: 15,
                },
                pointer: {
                    showAbove: true,
                    icon: 'arrow',
                    width: 12,
                    length: 18,
                    offsetCenter: [0, '-70%']
                },
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                        width: 15
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    distance: -40,
                    fontSize: 14,
                    color: theme.value.colors.content,
                    fontWeight: 'lighter',
                    formatter: v => ({0: '冲', 50: '稳', 100: '保'})[v]
                },
                detail: {
                    show: true,
                    formatter: v => '点击查看',
                    color: theme.value.colors.tips,
                    fontSize: 16,
                    fontWeight: 'lighter',
                    offsetCenter: [0, '10%']
                },
                title: {
                    show: true,
                    color: theme.value.brands.primary,
                    offsetCenter: [0, '-20%']
                },
                data: [
                    {
                        value: 100,
                        name: '测院校录取率'
                    }
                ]
            }
        ]
    }
}

</script>

<style scoped>

</style>