<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: Object,
        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: ['1月', '2月', '3月', '4月, 5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                name: '计划投资',
                type: 'line',
                data: data?.a,
            },
            {
                name: '实际完成投资',
                type: 'line',
                data: data?.b,
            },
            {
                name: '未完成投资',
                type: 'line',
                data: data?.c,
            },
        ],
    }
}
</script>
