
<template>
    <view class="content">
        <LEchart class="rate-echart" @finished="initChart" ref="chartRef"></LEchart>
    </view>
</template>

<script setup>
import { reactive, shallowRef, onMounted, nextTick } from "vue";
import LEchart from "@/components/l-echart/l-echart.vue";
import * as echarts from "echarts";

const props = defineProps({
    data: {
        type: Number,
        required: true,
        default: 1,
    },
});

let chartRef = ref(null)

onMounted(() => {
	nextTick(() => {
		initChart()
	});
});

// 初始化
const initChart = async () => {
	if(!chartRef.value) return
    const myChart = await chartRef.value.init(echarts)
	
    let options = {
        title: [
            {
                text: "完成率",
                y: "70%",
                x: "center",
                textStyle: {
                    fontWeight: "bold",
                    fontSize: 12,
                    color: "#7D7D80",
                },
            },
        ],
        angleAxis: {
            show: false,
            max: (100 * 360) / 180, //-45度到225度，二者偏移值是270度除360度
            type: "value",
            startAngle: 180, //极坐标初始角度
            splitLine: {
                show: false,
            },
        },
        barMaxWidth: 12, //圆环宽度
        radiusAxis: {
            show: false,
            type: "category",
        },
        //圆环位置和大小
        polar: {
            center: ["50%", "70%"],
            radius: "230%",
        },
        series: [
            {
                type: "bar",
                data: [
                    {
                        //上层圆环，显示数据
                        value: props.data,
                        itemStyle: {
                            color: "#5EC5C8",
                        },
                    },
                ],
                barGap: "-100%", //柱间距离,上下两层圆环重合
                coordinateSystem: "polar",
                roundCap: true, //顶端圆角
                z: 3, //圆环层级，同zindex
            },
            {
                //下层圆环，显示最大值
                type: "bar",
                data: [
                    {
                        value: 100,
                        itemStyle: {
                            color: "#fff",
                            borderWidth: 0,
                        },
                    },
                ],
                barGap: "-100%",
                coordinateSystem: "polar",
                roundCap: true,
                z: 1,
            },
            //仪表盘
            {
                type: "gauge",
                startAngle: 225, //起始角度，同极坐标
                endAngle: -45, //终止角度，同极坐标
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                splitLabel: {
                    show: false,
                },
                pointer: {
                    // 分隔线
                    show: false, //是否显示指针
                    shadowColor: "auto", //默认透明
                    shadowBlur: 5,
                    length: "50%",
                    width: "2",
                },

                itemStyle: {
                    color: "#52555A",
                    borderColor: "#1598FF",
                    borderWidth: 3,
                },
                detail: {
                    formatter: function (params) {
                        return props.data + "%";
                    },
                    color: "#52555A",
                    fontSize: 18,
                    offsetCenter: [0, 10],
                },
                title: {
                    show: false,
                },
                data: [
                    {
                        value: props.data,
                    },
                ],
            },
        ],
	};
	
	options && myChart.setOption(options);

	window.addEventListener('resize', () => {
		setTimeout(() => {
			myChart.resize();
		}, 500)
	})
};
</script>

<style lang="scss" scoped>
.rate-echart {
	width: 100%;
	height: 140rpx;
}
</style>