<template>
  <n-spin :show="loading">
    <div ref="eChartContainer" style="height: 600px; width: 100%"> </div>
  </n-spin>
</template>

<script lang="ts">
  import useEcharts from '@/hooks/useEcharts';
  import { defineComponent, onMounted, ref, toRef } from '@vue/runtime-core';
  import { EChartsCoreOption } from 'echarts';
  import { watch } from 'vue';
  import { bool } from 'vue-types';
  export default defineComponent({
    name: 'LineChart',
    props: {
      id: {
        type: Number,
        default: 0,
      },
      options: {
        type: Object,
        default: () => ({}),
      },
      loading: {
        type: bool,
        default: () => false,
      },
    },
    setup(prop) {
      const eChartContainer = ref<HTMLDivElement | null>(null);

      function load() {
        const options = toRef(prop, 'options');
        const instance = useEcharts(eChartContainer.value as HTMLDivElement);
        instance.setOption(options.value as EChartsCoreOption);
        instance.resize();
      }

      watch(toRef(prop, 'options'), (_newVal, _oldVal) => {
        load();
      });
      onMounted(() => {
        load();
      });
      return {
        eChartContainer,
      };
    },
  });
</script>

<style></style>
