<template>
    <echart :options="optionsjindu" id="center-total-gauge"></echart>
</template>

<script>
export default {
    props: {
        chartData: {
            type: Object,
            default: {}
        }
    },

    data() {
        return {
            optionsjindu: {}
        }
    },

    methods: {
        chartOption() {
            const data = this.chartData;

            const gaugeData = [
                {
                    value: data.jihualeijiwancheng,
                    name: "计划",
                    title: {
                        offsetCenter: ["-40%", "80%"],
                    },
                    detail: {
                        offsetCenter: ["-50%", "50%"],
                    },
                },
                {
                    value: data.shijileijiwancheng,
                    name: "实际",
                    title: {
                        offsetCenter: ["40%", "60%"],
                    },
                    detail: {
                        offsetCenter: ["40%", "50%"],
                    },
                },
            ];
            this.optionsjindu = {
                series: [
                    {
                        type: "gauge",
                        startAngle: 180,
                        endAngle: 0,
                        min: 0,
                        max: 100,
                        splitNumber: 10,
                        radius: "180%",
                        center: ["50%", "90%"],
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 18,
                            itemStyle: {
                                color: "#FAC858",
                            },
                        },
                        pointer: {
                            icon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
                            width: 8,
                            length: "50%",
                            offsetCenter: [0, "5%"],
                        },
                        progress: {
                            show: true,
                            overlap: true,
                            roundCap: true,
                        },
                        axisLine: {
                            roundCap: true,
                        },
						axisTick: {
							splitNumber: 1
						},
                        data: gaugeData
                    },
                ]
            };
        }
    },

    mounted() {
        this.chartOption()
    }
}
</script>