vue3定时+echarts的细节处理

1、如果在当前页面停留时间久了会占满内存导致图表卡顿最后导致崩溃
2、当处理了占满内存之后如果页面切换不去点回去的过程中还是会崩溃
3、如果有多个图表想进行关联处理
4、当封装一个组件使用echarts.getInstanceByDom类型不匹配处理
5、当浏览器窗口改变之后 图表自适应之后会移位的问题
6、折线窗口如果数据数据过大导致起伏不明显问题

// 查询按钮点击事件
const search = () => {
    if (listParams.datePicker) { //如果是时间则取消自动刷新
        clearInterval(time.value)
        getAllList()
        titleBegin.value = '开启自动刷新'
    } else {
        getAllList()
        titleBegin.value = '关闭自动刷新'
    }
}

//监听数据并计时
watch(
    () => chartAvgCostData.value,
    (newVal) => {
        if (!listParams.datePicker) {
            clearInterval(time.value)
            timeOut()
        }
    }
)
//累计计时的方法
const timeOut = () => {
    time.value = setInterval(() => {
        getAllList()
    }, 1000 * 20)
}
//清空定时器效果
onUnmounted(() => {
    clearInterval(time.value)
})


// 需要在切换到其他页面时停止自动刷新，切回来时再开启
document.addEventListener('visibilitychange', () => {
    if (
    !listParams.projectName && 
    Object.keys(chartAvgCostData.value).length > 0
    )
    {
        return
    }
    if (document.hidden) {
        // 清除定时任务
        clearInterval(time.value)
        time.value = null
    } else {
        // 开启定时任务
        getAllList()
    }
})

//数据值大导致起伏不明显问题
yAxis: {
     min: function (value:any) { // 取最小值向下取整为最小刻度
         return 0
     },
            // 设置y轴最大值
    max: function (value:any) { // 取最大值向上取整为最大刻度
        return Math.floor(value.max + (Math.floor(value.max / 4)))
   },
}
series：[
markPoint: {
     data: [
        { type: 'max', name: 'Max' },
        { type: 'min', name: 'Min' }
     ]
},
]
//组件初次进来或者销毁清空图表
onMounted(() => {
    nextTick(() => {
        let myChart = echarts.getInstanceByDom(document.getElementById(myCanvas.value)!)
    
        if (myChart) {
            myChart.clear()
        }
        if (myChart === undefined) {
            myChart = echarts.init(document.getElementById(myCanvas.value) as HTMLElement)
            myChart.group = 'group1'
            myChart.setOption(datas.option)
            echarts.connect('group1')
            window.addEventListener('resize', () => { setTimeout(() => { myChart?.resize() }, 300) }) // 自适应屏幕
        }
    })
})

onBeforeUnmount(() => {
    const myChart = echarts.getInstanceByDom(document.getElementById(myCanvas.value)!)
    if (myChart) {
        myChart.clear()
    }
})