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

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { oneLine } from "./options/oneLineOption";
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);

onMounted(() => {
    myChart.value = echarts.init(chartDom.value);
    const options = deepClone(oneLine);

    myChart.value.setOption(options);
});
</script>

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