<template>
    <div ref="LChartRef" class="cc"></div>
</template>

<script setup lang='ts'>
import { ref, getCurrentInstance, onMounted, watch } from 'vue'
import { useI18n } from 'vue-i18n'
let { t } = useI18n();

const prop = defineProps({
    xData: {
        type: Array,
        default: ['1050910', '1050269']
    },
    seriesData: {
        type: Array,
        default: []
    }
})

let LChartRef = ref(null);
const { proxy } = getCurrentInstance() as any;
let charts = null;
const setCharts = () => {
    charts = proxy.$echarts.init(LChartRef.value, 'dark')
    let option = {
        // title: {
        //     text: '工作时间'
        // },
        backgroundColor: '#0E0E0E',
        legend: {
            data: [t('default.计划产量'), t('default.实际产量')],
            textStyle: {
                fontSize: 14
            },

        },
        textStyle: {
            fontSize:14

        },
        grid:{
            left:'80',
            right:'10',
            bottom:'40',
        },
        color:['#2FC5D4','#FEDA81'],
        xAxis: {
            type: 'category',
            data: prop.xData,
            // axisLabel: {
            //     interval: 0, //控制X轴刻度全部显示
            //     rotate: 45, //倾斜角度
            // },
        },
        yAxis: [
            {
                type: 'value',
                name: t('default.日产量'),
                axisLabel:{
                    fontSize:14
                }
            }
        ],
        series: prop.seriesData
    };

    
    charts.setOption(option);
}

watch(() => prop.seriesData, (newVal, oldVal) => {
    charts.setOption({
        series: newVal
    });
    
}, { deep: true })
watch(() => prop.xData, (newVal, oldVal) => {
    charts.setOption({

        xAxis: {
            type: 'category',
            data: prop.xData,
            // axisLabel: {
            //     interval: 0, //控制X轴刻度全部显示
            //     rotate: 45, //倾斜角度
            // },
        },
    });
}, { deep: true })
onMounted(() => {
    setCharts()
})
</script>

<style scoped>
.cc {
    width: 100%;
    height: 100%;
}
</style>
