<template>
    <div ref="chartRef"></div>
</template>

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


//仪表盘进度图表
const chartRef: any = ref(null)
let chart: any = markRaw({ value: null })


const props = defineProps({
    value: {
        type: String,
        default: '0'
    },
    unit: {
        type: String,
        default: ''
    },
    maxValue: {
        type: String,
        default: '100'
    },
    title: {
        type: String,
        default: ''
    },
})



watch(() => props.value, (oldValue: any, newValue: any) => {
    if (chart.value != null) {
        option.series[0].data[0].value = props.value
        option.series[0].max = props.maxValue
        chart.value.setOption(option)
    }
})


onMounted(async () => {
    chart.value = echarts.init(chartRef.value)
    option.series[0].max = props.maxValue
    option.series[0].data[0].value = props.value
    option.series[0].data[0].name = splitLongString(props.title)
    chart.value.setOption(option)

    window.addEventListener('resize', () => {
        chart.value.resize()
    })
})


const splitLongString = (str: any) => {
    const maxLength = 6; // 最大字符串长度
    if (str.length <= maxLength) {
        return str; // 不需要拆分直接返回原始字符串
    } else {
        let result: any = [];
        for (let i = 0; i < str.length; i += maxLength) {
            result.push(str.substring(i, i + maxLength) + "\n"); // 将字符串按指定长度切片并添加到结果数组中
        }
        return result.toString().replaceAll(',', '');
    }
}


let option = {
    series: [
        {
            max: '80',
            radius: '100%',
            type: 'gauge',
            progress: {
                show: true,
                width: 8,
                itemStyle: {
                    color: '#57FDF3'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    width: 8,
                    color: [[1, '#336188']]
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            anchor: {
                show: false
            },
            axisLabel: {
                show: false
            },
            pointer: {
                show: false
            },
            detail: {
                show: true,
                formatter: '{value}' + props.unit
            },
            data: [
                {
                    value: '0',
                    name: '标题',
                    title: {
                        color: "#ffffff",
                        fontSize: 13,
                        offsetCenter: ["0", "50%"],
                    },
                    detail: {
                        color: "rgba(87, 253, 243, 1)",
                        fontSize: 24,
                        offsetCenter: ["0", "-12%"]
                    }
                }
            ]
        }
    ]
};



</script>

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