<template>
    <v-chart
        ref="chartRef"
        :option="option"
        :autoresize="true"
        class="base-chart"
    />
</template>

<script setup>
    import { ref, toRefs } from 'vue';
    import VChart from 'vue-echarts';
    import { useEcharts } from '@/utils/use-echarts';
    import { use } from 'echarts/core';
    import { CanvasRenderer } from 'echarts/renderers';
    import { BarChart, PieChart, LineChart } from 'echarts/charts';
    import {
        GridComponent,
        TooltipComponent,
        LegendComponent,
        DataZoomComponent,
        GraphicComponent
    } from 'echarts/components';

    use([
        CanvasRenderer,
        BarChart,
        PieChart,
        LineChart,
        GridComponent,
        TooltipComponent,
        LegendComponent,
        DataZoomComponent,
        GraphicComponent
    ]);

    const props = defineProps({
        option: {
            type: Object,
            required: true,
            default: () => ({})
        }
    });

    const { option } = toRefs(props);
    const chartRef = ref(null);

    useEcharts([chartRef]);

    defineExpose({
        chartRef
    });
</script>

<style scoped>
    .base-chart {
        width: 100%;
        height: 100%;
        min-height: 300px;
    }
</style>
