<template>
  <VChart
    v-if="renderChart"
    :option="option"
    autoresize
    :style="{ width, height }"
  />
</template>

<script lang="ts" setup>
import type { EChartsOption } from 'echarts';
import { nextTick, ref } from 'vue';
import VChart from 'vue-echarts';

defineProps({
  option: {
    type: Object as () => EChartsOption,
    default: () => ({}),
  },
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '100%',
  },
});

const renderChart = ref(false);
nextTick(() => {
  renderChart.value = true;
});
</script>

<style scoped lang="less"></style>
