2021-10-20

升级echarts5.2.1后突然resize 不管用，经过一番折腾，又OK了，这感觉倍棒

主要是碰到了这个错误 resize should not be called during main process

原因还没理解透彻，急于完成工作任务，先记下来解决方法，后面再来回顾，
我猜又很多人也跟我一样在这浪费了不少时间

// An highlighted block
<!--
 * @Author: vince
 * @Date: 2020-07-24 10:19:05
 * @LastEditors: vince 273187189@qq.com
 * @LastEditTime: 2021-10-20 15:49:01
 * @Description: 
-->
<template>
	<div class="fit" ref="charts"></div>
</template>

<script>
import { shallowRef, onMounted, watch, ref, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
require("echarts-liquidfill");
export default {
	props: {
		option: {
			type: Object,
		},
	},
	setup(props, context) {
		const timeOut = ref(null);
		const charts = ref(null);
		const myChart = shallowRef(null);

		onMounted(() => {
			myChart.value = echarts.init(charts.value, "chalk");
			myChart.value.setOption(props.option, { notMerge: true });
			const resizeObserver = new ResizeObserver((entries) => {
				if (timeOut.value != null) {
					clearTimeout(timeOut.value);
				}
				timeOut.value = setTimeout(() => {
					myChart.value.resize({
						width: null,
						height: null,
					});
				}, 350);
			});
			resizeObserver.observe(charts.value.parentNode);
		});

		onBeforeUnmount(() => {
			myChart.value.dispose();
		});

		watch(
			() => props.option,
			(newVal) => {
				myChart.value.setOption(newVal, { notMerge: true });
			},
			{ deep: true }
		);

		return {
			charts,
			myChart,
		};
	},
};
</script>