<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);

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

onMounted(() => {
  init();
});

defineExpose({
  chart,
});
</script>
<template>
  <div :id="id" :class="class"  class="border p-3"></div>
</template>

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