Vue ECharts Hook: 实现自适应、动态更新和 ECharts 实例获取

该代码是一个自定义的 Vue Hook，用于在 Vue 组件中使用 ECharts。该 Hook 提供了以下功能：

1. 自适应屏幕大小调整图表大小。
2. 支持动态修改图表配置项，调用 'setOptions' 可以重新渲染图表。
3. 支持暴露 ECharts 实例，方便在组件中直接调用 ECharts API。

该 Hook 中使用了多个 Vue 的 API：

1. 'ref'：用于创建响应式数据。
2. 'computed'：用于创建计算属性。
3. 'watch'：用于监听响应式数据的变化。
4. 'nextTick'：用于在下次 DOM 更新循环结束之后执行回调函数。
5. 'unref'：用于返回一个 'ref' 的值。
6. 'useDebounceFn'：用于创建一个防抖函数。
7. 'useTimeoutFn'：用于创建一个定时器。

Hook 的实现过程中，首先声明了一些变量和函数，其中 'chartInstance' 表示 ECharts 实例对象，'cacheOptions' 保存图表的配置项，'resizeFn' 是一个防抖函数，用于在窗口大小变化时调整图表大小。接着，在 'initCharts' 函数中，通过 'echarts.init' 方法创建 ECharts 实例，并绑定 'resizeFn' 事件，同时使用 'useBreakpoint' 监听屏幕大小的变化，以自适应调整图表大小。在 'setOptions' 函数中，首先判断 'elRef' 是否已经加载完毕，如果未加载完毕，则使用定时器等待其加载完成后再次调用 'setOptions' 函数。在 'setOptions' 函数中，先将传入的 'options' 参数保存到 'cacheOptions' 中，然后使用 'nextTick' 等待下一次 DOM 更新循环结束后执行回调函数，回调函数中判断 'chartInstance' 是否已经创建，如果未创建，则调用 'initCharts' 创建实例并渲染图表。如果已经创建，则调用 'setOption' 方法重新渲染图表。最后，在 'tryOnUnmounted' 函数中，取消 'resizeFn' 的绑定，销毁 'chartInstance' 对象。最终，该 Hook 返回了 'setOptions'、'resize'、'echarts' 和 'getInstance' 四个函数，供组件使用。其中，'setOptions' 和 'resize' 分别用于修改图表配置项和调整图表大小，'echarts' 是 ECharts 库的引用，'getInstance' 则返回 'chartInstance' 对象。