vue3使用composition抽离echart缩放逻辑

写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以后第一次尝试逻辑抽离，如果你有更好的见解，欢迎指教哦。

我是鸭子，祝你幸福。