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

    </div>
    <!-- <v-chart class="chart" :option="option" /> -->
</template>

<script setup lang="ts" name="chart">
import * as echarts from 'echarts';

const myChart: any = ref(null)
const chartMax: any = ref(0)
const chartValues: any = ref(0)
const chartRate: any = ref(0)

onMounted(() => {
    //   window.addEventListener('resize',()=>{this.resize();getRem(1920,100)})
    // init()
    var chartDom = document.getElementById('chart');
    myChart.value = echarts.init(chartDom);
})
onBeforeUnmount(() => {
    //   window.removeEventListener('resize',this.resize)

})
const resize = () => {
    myChart.resize();
}
const init = (max: any, value: any) => {
    chartMax.value = max ? max : 0;
    chartValues.value = value ? value : 0;
    // chartMax.value = 50
    // chartValues.value = 5
    chartRate.value = 0

    if (chartMax && chartValues) {
        chartRate.value = (chartValues.value / chartMax.value * 100).toFixed(1)
    }
    if (chartRate.value === "100.0") {
        chartRate.value = "100"; // 如果百分比等于100，则更新为整数形式
    }
    if (isNaN(chartRate.value)) {
        chartRate.value = "0";
    }
    console.log('打印', chartValues.value, chartMax.value);

    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: 2,
                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 }],
                // data: { name: "预报到填写总数", value: chartMax.value },
                z: 1,
                // silent: true,
                coordinateSystem: 'polar',
                barMaxWidth: 35,
                roundCap: 1,
                color: '#00214d',
                barGap: '-100%',
            },
            {
                type: 'bar',
                data: [100],
                z: 0,
                silent: true,
                coordinateSystem: 'polar',
                barMaxWidth: 35,
                roundCap: true,
                color: '#00214d',
                barGap: '-100%',
            },
        ],
    }
    myChart.value.setOption(option);
}

defineExpose({ init })

</script>

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