<template>
    <div ref="chartDom" class="charts"></div>
</template>

<script setup>
import { onMounted, ref,watch } from "vue";
import * as echarts from "echarts";
import { lineOption } from "./options/lineOption";
import { deepClone } from "@/common/commonFun";

const props = defineProps({
    styleName: {
        type: String,
        default: "styleName1",
    },
    xData: {
        type: Array,
        default: () => [],
    },
    yData: {
        type: Array,
        default: () => [],
    },
});

const chartDom = ref(null);
const myChart = ref(null);
const options = ref(null);

const initData = () =>{
    const lineOptionValue = deepClone(lineOption)

    lineOptionValue[props.styleName].xAxis.data = props.xData
    lineOptionValue[props.styleName].series[0].data = props.yData

    options.value = lineOptionValue[props.styleName];

    myChart.value.setOption(options.value);
}

onMounted(() => {
    myChart.value = echarts.init(chartDom.value);
});

watch(()=>props.yData,(newValue,oldValue) =>{
    if(newValue){
        initData();
    }
})
</script>

<style lang="scss" scoped>
.charts {
    width: 100%;
    height: 100%;
}
</style>
