<template >
    <div :id="props.chartId" class="line-chart" :style="{ height: props.height, width: props.width }"></div>
</template>

<script setup name="LineChart">
import { Line } from '@antv/g2plot';
let line = null

const props = defineProps({
    chartId: {
        type: String,
        default: 'line-chart'
    },
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '400px'
    },
    options: {
        type: Object,
        default: {}
    },
    chartData: {
        type: Array,
        default: []
    }
})

watch(() => props.chartData, (val) => {
    line.changeData(val)
}, { deep: true })

onMounted(() => {
    line = new Line(props.chartId, {
        data: props.chartData,
        ...props.options
    });

    line.render();
})

</script>

<style lang="scss" scoped>
//...
</style>