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

    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: 'pieChart',

    data() {
        return {
            myChart: null,
        };
    },

    mounted() {
        //   window.addEventListener('resize',()=>{this.resize();getRem(1920,100)})
        this.init()
    },
    beforeDestroy() {
        //   window.removeEventListener('resize',this.resize)
    },
    methods: {
        //    resize(){
        //     this.myChart.resize();
        //   },
        init(max, value) {
            var max = max?max:100;
            var value = value?value:0;

            var rate = 0

            if (max && value) {
                rate = (value / max * 100).toFixed(1)
            }
            if (rate === "100.0") {
                rate = "100"; // 如果百分比等于100，则更新为整数形式
            }
            var chartDom = document.getElementById('pieChart');
            this.myChart = echarts.init(chartDom);
            // window.onresize = this.myChart.resize;
            var option;

            option = {
                title: {
                    text: (rate || '0.0') + '%',
                    x: 'center',
                    y: '20%',
                    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: max,
                    startAngle: 60,
                },
                radiusAxis: {
                    type: 'category',
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                    },
                    data: [],
                },
                polar: {
                    radius: ['40%', '65%'],
                    center: ['50%', '30%'],
                },
                series: [
                    {
                        type: 'bar',
                        data: [{ name: '预报到填写人数', value: 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: [max],
                        z: 0,
                        silent: true,
                        coordinateSystem: 'polar',
                        barMaxWidth: 35,
                        roundCap: true,
                        color: '#00214d',
                        barGap: '-100%',
                    },
                ],
            };
            option && this.myChart.setOption(option);
        }
    },
};
</script>

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