Vue3 echarts 组件化以及使用 hook 进行resize

 hook 本质是一个函数，把setup函数中使用的 Composition API 进行了封装

封装echarts组件基底

<template>
	<div :style="{ height, width }"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import useResize from '@/hooks/useResize'; // hook
const { proxy } = getCurrentInstance(); // 获取实例中的proxy

let echartInstance;

const props = defineProps({
	// 数据
	option: {
		type: Object,
		default: () => ({
			xAxis: {
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					data: [150, 230, 224, 218, 135, 147, 260],
					type: 'line'
				}
			]
		})
	},
	// 高度
	height: {
		type: [Number, String],
		default: '300px'
	},
	// 宽度
	width: {
		type: [Number, String],
		default: '100%'
	}
});

const { option, height, width } = toRefs(props);

// 观察 option ，重新绘制
watch(
	option,
	(newValue) => {
		//	console.log(newValue)
		//	console.log(height.value)
		// resize();
		nextTick(() => {
			echartInstance.setOption(
				{
					...newValue,
					backgroundColor: 'rgba(0,0,0,0)'
				},
				true
			);
			resize();
		});
	},
	{
		deep: true
	}
);

watch(height, (newValue) => {
	//	console.log(newValue)
	resize();
});

watch(
	() => proxy.$store.state.settings.sideTheme.split('-')[1],
	(newValue) => {
		//	console.log(newValue)
		// 释放资源
		echartInstance.dispose();
		// 重新渲染图表
		echartInstance = echarts.init(proxy.$el, newValue, { renderer: 'svg' });
		echartInstance.setOption(
			{
				...option.value,
				backgroundColor: 'rgba(0,0,0,0)'
				// darkMode: newValue === "dark",
			},
			true
		);
	}
);

onMounted(() => {
	//	console.log(option.value)
	nextTick(() => {
		echartInstance = echarts.init(proxy.$el, proxy.$store.state.settings.sideTheme.split('-')[1], { renderer: 'svg' });
		echartInstance.setOption(option.value, true);
		echartInstance.on('click', (params) => {
			console.log(params)
			proxy.$emit('clicked', params);
		});
		// resize();
	});
});

onUnmounted(() => {
	// 释放资源
	echartInstance && echartInstance.dispose();
});

function resize() {
	echartInstance.resize();
}

// 暴露函数 （供hook调用）
defineExpose({
	resize
});

useResize();
</script>

hook （useResize）

export default function () {
    let proxy

    onMounted(() => {
        proxy = getCurrentInstance(); // 获取实例中的proxy
        window.addEventListener('resize', resize)
    })

    onBeforeUnmount(() => {
        window.removeEventListener('resize', resize)
    })

    function resize() {
        proxy.exposed.resize()
    }
}

二次封装调用

<template>
	<Echart :option="option" :height="props.height" @clicked="clicked" />
</template>

<script setup>
	import Echart from "@/components/Echarts/index" // 导入上面的echarts组件基底
	const {
		proxy
	} = getCurrentInstance(); // 获取实例中的proxy

	const props = defineProps({ // 数据
		data: {
			type: Object,
			default: () => ({
				max: 3000,
				value: 0,
				name: "name",
				show: false,
				unit: "",
				radius: "90%"
			})
		},
		title: {
			type: Object,
			default: () => ({
				text: null,
				left: 'center'
			})
		},
		legend: {
			type: Object,
			default: () => ({
				left: 'center',
				bottom: '10',
			})
		},
		// 高度
		height: {
			type: [Number, String],
			default: "300px",
		},
	});

	const option = computed(() => ({
		title: props.title,
		tooltip: {
			trigger: 'item',
			formatter: '{b} : {c} ({d}%)'
		},
		legend: props.legend,
		series: [{
			// name: null,
			type: 'pie',
			radius: '50%',
			data: props.data,
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}]
	}));

	const handleGetColorByTheme = () => proxy.$store.state.settings.sideTheme.indexOf("dark") != -1 ? "#fff" : "#000"
	
	const clicked = (event)=>{
		proxy.$emit('clicked', event);
	}
</script>
```

# 最外层调用
```html
<PieChart :data="data" height="100%" @clicked="handlePieChartClicked" />

<script setup>
	import PieChart from '@/components/Echarts/pieChart/index';// 导入上面的二次封装pie组件
</script>
```