<script lang="ts" setup name="Echart">
import type { Ref } from 'vue'
import { onMounted, ref } from 'vue'
import type { ECharts } from 'echarts'
import { EChartsOption, init } from 'echarts'
import tdTheme from './theme.json' // 引入默认主题
const props = defineProps({
  className: {
    type: String,
    default: 'chart',
  },
  id: {
    type: String,
    default: 'chart',
  },
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '100%',
  },
  options: {
    type: Object,
    default: () => ({}),
  },
})

// 图表对象
let chart: ECharts
const chartRef: Ref<HTMLElement | null> = ref(null)

watch(props.options, (newVal) => {
  chart.setOption(newVal, true)
}, { deep: true })

// 初始化
function initChart() {
  chart.setOption(props.options, true)
}

onMounted(() => {
  chart = init(chartRef.value as HTMLElement, tdTheme)
  initChart()
})
</script>

<template>
  <div :id="id" ref="chartRef" :class="className" :style="{ height, width }" />
</template>

<style lang="scss" scoped>
// 样式
</style>