<template>
	<view style="width: 100%;height: 100%;">
		<l-echart ref="chartRef"></l-echart>
	</view>
</template>


<script setup lang="ts">
	import { onMounted, ref, onBeforeUnmount, nextTick, watch } from 'vue';
	import * as echarts from 'echarts';
	const chartRef : any = ref(null)
	const myChart : any = ref(null)
	const props = defineProps({
		options: {
			type: Object,
			default: () => ({})
		},
	});
	// 初始化图表
	const initChart = async () => {
		if (!chartRef.value) return
		// 初始化echart
		myChart.value = await chartRef.value.init(echarts)
		// 默认获取容器尺寸
		myChart.value.resize();
		// 设置true清空echart缓存
		myChart.value?.setOption(props.options, true);
	}
	// 监听图表数据时候变化，重新渲染图表
	watch(
		() => props.options,
		() => {
			nextTick(() => {
				initChart();
			});
		},
		{ deep: true }
	);
	// 页面挂载，开始绘制图表
	onMounted(() => {
		nextTick(() => {
			initChart();
		})
	})
	// 组件销毁时销毁图表实例
	onBeforeUnmount(() => {
		if (myChart.value) {
			echarts.dispose(myChart.value);
		}
	});
</script>