Echarts子组件封装以及多个Echarts子组件随窗口变化而变化!

1、目标效果

        源码在下方，复制并npm install echarts 便可运行

        将echarts封装成子组件，传入对应的option即可展示数据报表！

        

        随着窗口大小变化而改变数据报表大小！

                                                                        全屏

 ​

                                                            缩小窗口情况下 

  

2、封装echarts子组件

echarts使用三部曲：

（1）容器实例：        echart.init(document.getElementById(this.id));

（2）容器宽高                

（3）option配置         echart.setOption()

 

因此这三个就可以是父组件传给子组件的值，

 props: {
        id: {
            type: String,
            default: ''
        },
        options: {
            type: Object,
            default: {}
        },
        height: {
            type: Number,
            default: 300
        }
    },

        在mounted中创建实例

mounted() {
 // 创建echarts实例并设置配置
 this.echarts = echart.init(document.getElementById(this.id));
 this.echarts.setOption(this.options);
}

        在beforeDestroy中销毁实例

    beforeDestroy() {
        // 销毁echarts实例
        this.echarts = null
    },

3、多个echarts子组件随窗口变化而变化

（1）窗口大小变化触发事件 

window.addEventListener('resize', () => {
     // 调用子组件resetEcharts()
})

（2）echarts自身携带resize()实现自适应窗口大小变化

  子组件

import * as echart from 'echarts';
export default {
    methods: {
        // 重置echarts
        resetEcharts() {
            echart.init(document.getElementById(this.id)).resize();
        }
    }
}

4、源码

   /components/Echarts.vue

App.vue