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

<script setup lang='ts'>
import { ref, getCurrentInstance, onMounted, watch } from 'vue'


const prop = defineProps({
    optionData: {
        type: Object,
        default: {}
    },
})

let LChartRef = ref(null);
const { proxy } = getCurrentInstance() as any;
let charts = null;
const setCharts = () => {
    charts = proxy.$echarts.init(LChartRef.value, 'dark')
    let option = prop.optionData

    charts.setOption(option);
}

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

onMounted(() => {
    setCharts()
})
</script>

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