<template>
    <hc-charts ref="charts" :option="chartsOption" dark />
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { getNumber, getRandom } from 'js-fast-way'

const props = defineProps({
    datas: {
        type: Array,
        default: () => ([]),
    },
})

//渲染完成
onMounted(() => {
    setClassifyChartsOption(props.datas)
})

//监听值变化
watch(() => props.datas, (val) => {
    setClassifyChartsOption(val)
})

//处理数据
const charts = ref(null)
const chartsOption = ref({})
const setClassifyChartsOption = (data) => {
    const colors = ['#BE8368', '#08818E', '#C1484A']
    chartsOption.value = {
        backgroundColor: '',
        color: colors,
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            top: '6',
            data: ['超进度项目', '常规项目', '滞后项目'],
        },
        grid: {
            top: '50',
            left: '10',
            right: '20',
            bottom: '5',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['一季度', '二季度', '三季度', '四季度'],
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                name: '超进度项目',
                type: 'line',
                data: [getNumber(3), getNumber(3), getNumber(3), getNumber(3)],
            },
            {
                name: '常规项目',
                type: 'line',
                data: [getNumber(3), getNumber(3), getNumber(3), getNumber(3)],
            },
            {
                name: '滞后项目',
                type: 'line',
                data: [getNumber(3), getNumber(3), getNumber(3), getNumber(3)],
            },
        ],
    }
}
</script>
