<template>
  <div ref="chartRef" class="base-chart" :style="{ height: height ? height + 'px' : '100%' }" />
</template>

<script setup lang="ts">
import { ref, toRef } from 'vue'
import * as echarts from 'echarts'
import { useSafeChart } from '@/hooks/useSafeChart'

defineOptions({ name: 'BaseChart' })

const props = defineProps<{
  option: echarts.EChartsOption
  height?: number
}>()

const chartRef = ref<HTMLDivElement | null>(null)
const optionRef = toRef(props, 'option')

useSafeChart(chartRef, optionRef)
</script>

<style scoped lang="less">
.base-chart {
  width: 100%;
  height: 100%;
  min-height: 150px;
  min-width: 100px;
}
</style>
