写echarts的时候基本都要对窗口缩放作监听，然后对echart进行缩放，正常情况每个图表组件都要写一遍，那么每个图表组件都会有下面这样的代码：
let myChart: echarts.ECharts | null = null // echart实例
function resizeChart () {
if (myChart) {
myChart.resize()
}
}
onMounted(() => {
window.addEventListener('resize', resizeChart)
})
onUnmounted(() => {
window.removeEventListener('resize', resizeChart)
})
如果你的onMounted和onUnmounted还有其他需要处理的事件的话，那就会稍显混乱，而且每个组件都要这样写会很烦。
这时候就可以用vue3的composition api来抽离这块的逻辑：
import { onMounted, onUnmounted } from 'vue'
import echarts from 'echarts'
export default function useChartResize (getChartInstance: () => echarts.ECharts | null): void {
function resizeChart () {
const chart = getChartInstance()
if (chart) {
chart.resize()
}
}
onMounted(() => {
window.addEventListener('resize', resizeChart)
})
onUnmounted(() => {
window.removeEventListener('resize', resizeChart)
})
}
然后在我们的图表组件中只需要引入，然后把图表实例传递进去就行，剩下的可以不用管了：
import useChartResize from '@/hook/useChartResize'
在setup里面：
...
useChartResize(() => myChart)
...
因为保存图表实例的变量一开始是null，要经过echarts.init()后才是一个echart实例，所以不能直接传递一个静态的变量进去，需要传递一个获取保存图表实例变量的方法进去，实现在useChartResize方法中拿到的变量是动态的。
这种composition api来抽离逻辑的方式类似于vue2的mixin，但不会出现来源不清晰的情况。
本次也是我使用vue3以后第一次尝试逻辑抽离，如果你有更好的见解，欢迎指教哦。
我是鸭子，祝你幸福。
