import * as echarts from 'echarts'
|
|
|
/**
|
* ECharts自适应容器大小Hook
|
*
|
* @param {Object} domRef - DOM元素引用对象，需包含value属性指向要挂载的DOM节点
|
* @returns {Object} chart - 包含value属性的对象，value保存ECharts实例引用
|
*/
|
const useEchartsResize = (domRef) => {
|
// 图表实例容器，用对象包装便于保持引用地址
|
const chart = {value: null}
|
|
// 窗口大小变化处理函数
|
const resizeChart = () => {
|
chart.value?.resize()
|
}
|
|
// 组件挂载后初始化逻辑
|
onMounted(() => {
|
if (!domRef.value) return
|
// 初始化ECharts实例并注册resize监听
|
chart.value = echarts.init(domRef.value)
|
window.addEventListener('resize', resizeChart)
|
})
|
|
// 组件卸载前清理逻辑
|
onBeforeUnmount(() => {
|
// 移除监听并清理图表实例
|
window.removeEventListener('resize', resizeChart)
|
chart.value?.dispose()
|
chart.value = null
|
})
|
|
return {chart}
|
}
|
|
export default useEchartsResize
|
