<script setup>
import * as echarts from "echarts";
import { onMounted, ref, markRaw } from "vue";

const props = defineProps({
  option: Object,
  class: String,
  id: String,
});

let chart = ref(null);
let dom = ref(null);

function init() {
  let echart = echarts;
  chart.value = markRaw(echart.init(dom.value));
  chart.value.setOption(props.option);
}

onMounted(() => {
  if (!chart.value && dom.value) {
    init();
  }
});

defineExpose({
  chart,
});
</script>
<template>
  <div :id="id" :class="class" ref="dom"></div>
</template>

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