处理多个echarts图表在窗体变化重绘

lin819397746

于 2020-12-14 17:58:05 发布

阅读量623

点赞数

分类专栏： JavaScript 文章标签： vue

本文链接：https://blog.csdn.net/lin819397746/article/details/111181369

版权

本文介绍了如何在Vue应用中利用window.onresize事件和防抖技术处理窗体尺寸变化时Echarts图表的重绘问题。通过修改Vuex store中的参数并利用混入mixin的方式，确保所有相关组件都能接收到更新通知，实现Echarts实例的正确调整。

摘要由CSDN通过智能技术生成

思路

利用window.onsize = ()=>{} 监听窗体变化
利用防抖降低触发的频率
修改store里面参数，利用store里面的值变化通知所有混入mixin的组件
echarts实例将自己的id 和 resize函数，存入到mixin的cbList里面

代码：

mixin 代码：

export default {
   
    data() {
   
        return {
   
            cbList: new Map() // 存放需要重绘的图例, key 和 函数
        }
    },
    watch: {
   
        '$store.getters.getRedraw':  function () {
   
            this.cbList.forEach((cb