<template>
  <div ref="myChart" class="chart-panel"></div>
</template>

<script setup>
import * as echarts from 'echarts';

const props = defineProps({
  option: {
    type: Object,
    default: () => {}
  }
});

const myChart = ref(null);
watch(
  () => props.option,
  async (val) => {
    if (!val) return;
    await nextTick();
    initChart();
  },
  { deep: true, immediate: true }
);

const chartInstance = shallowRef(); // 不能用ref，不然tooltip无法显示
function initChart() {
  chartInstance.value = echarts.init(myChart.value);
  chartInstance.value.setOption(props.option);
  window.onresize = function () {
    chartInstance.value.resize();
  };
}
const changeChart = () => {
  chartInstance.value.setOption(props.option);
};
defineExpose({ changeChart });
</script>

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