AIzhushou-screen/src/components/chart/pieChart.vue

<template>
    <div id="pieChart" style="width: 150%;height: 150%;">

    </div>
</template>

<script setup lang="ts" name="pieChart">
import * as echarts from 'echarts';
const myChart = ref(null)
const chartMax = ref(null)
const chartValues = ref(null)
const chartRate = ref(null)

onMounted(() => {
    //   window.addEventListener('resize',()=>{this.resize();getRem(1920,100)})
    var chartDom = document.getElementById('pieChart');
    myChart.value = echarts.init(chartDom);
})
//    resize(){
//     this.myChart.resize();
//   },
const init=(max, value) =>{
    
    chartMax.value = max ? max : 100;
    chartValues.value = value ? value : 0;
    if (chartMax && chartValues) {
        chartRate.value = (chartValues.value / chartMax.value * 100).toFixed(1)
    }
    if (chartRate.value === "100.0") {
        chartRate.value = "100"; // 如果百分比等于100，则更新为整数形式
    }
    
    let option = {
        title: {
            text: (chartRate.value || '0.0') + '%',
            x: 'center',
            y: '25%',
            textStyle: {
                color: '#fff',
                fontSize: '18',
                fontWeight: '600',
                fontFamily: 'YouSheBiaoTiHei'
            },
        },
        tooltip: {
            trigger: 'item'
        },
        angleAxis: {
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            min: 0,
            max: chartMax.value,
            startAngle: 60,
        },
        radiusAxis: {
            type: 'category',
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
            },
            data: [],
        },
        polar: {
            radius: ['40%', '65%'],
            center: ['50%', '35%'],
        },
        series: [
            {
                type: 'bar',
                data: [{ name: '预报到填写报到人数', value: chartValues.value }],
                startAngle: 225,
                z: 1,
                coordinateSystem: 'polar',
                barMaxWidth: 35,
                roundCap: 1,
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: '#5E7DCD'
                },
                {
                    offset: 0.5,
                    color: '#d81e48'
                },
                {
                    offset: 1,
                    color: '#db4238'
                }
                ])
            },
            {
                type: 'bar',
                data: [{ name: "新生总人数", value: chartMax.value }],
                startAngle: 0,
                z: 1,
                coordinateSystem: 'polar',
                barMaxWidth: 35,
                roundCap: 1,
                color: '#00214d',
                barGap: '-100%',
            },
            {
                type: 'bar',
                data: [{ name: "新生总人数", value: chartMax.value }],
                z: 0,
                silent: true,
                coordinateSystem: 'polar',
                barMaxWidth: 35,
                roundCap: true,
                color: '#00214d',
                barGap: '-100%',
            },
        ],
    }
    option && myChart.value.setOption(option);
}
defineExpose({init})
</script>

<style lang="scss" scoped></style>