<template>
  <div ref="elChart" style="width: 100%; height: 100%" />
</template>
<script lang="ts" setup>
import { ref, onMounted, onUpdated, onUnmounted } from "vue";
import * as echarts from "echarts";

const props = defineProps({
  option: {
    type: Object
  },
  data: {
    type: Object
  }
});
const elChart = ref();
let chart: any = null;

function clear() {
  chart && chart.dispose();
}

function draw() {
  if (chart) {
    chart.setOption(props.option);
  } else {
    clear();
    chart = echarts.init(elChart.value);
    chart.setOption(props.option);
  }
}

onMounted(draw);
onUpdated(draw);
onUnmounted(clear);
</script>
