<template>
  <div ref="childChart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

export default {
  name: 'ChildComponent',
  setup() {
    const childChart = ref(null);
    let childChartInstance = null;

    const initChart = () => {
      childChartInstance = echarts.init(childChart.value);
      const option = {
        title: {
          text: 'Child Chart',
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        dataZoom: [
        {
          type: 'inside',
        },
      ],
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [220, 182, 191, 234, 290, 330, 310],
            type: 'line',
          },
        ],
      };
      childChartInstance.setOption(option);
    };

    const destroyChart = () => {
      if (childChartInstance) {
        childChartInstance.dispose();
      }
    };

    onMounted(() => {
      initChart();
    });

    onBeforeUnmount(() => {
      destroyChart();
    });

    // Expose a method to get the chart instance
    const getChartInstance = () => {
      return childChartInstance;
    };

    return {
      childChart,
      getChartInstance,
    };
  },
};
</script>

<style scoped>
/* Add your styles here */
</style>