Echarts图表二次封装所遇到的坑

坑点1：

父组件发起请求，获取datalist，传给子组件bar，子组件内部watch监听datalist，设置了immediate:true,导致报错。

原因：

immediate：true不能乱用。因为DOM可能还未创建，seriesData也可能为空。如果是父组件请求得到的值，自然会修改一次，触发watch侦听。如果一定要添加immediate：true，那么就在初始化bar的时候，判断DOM元素是否获取到

        init() {
            let bar = document.getElementById(this.id)
            if (!bar) return
            if (!this.bar) {
                this.bar = echarts.init(bar)
            }
            this.defaultOptions.series[0].data = this.seriesData
            this.bar.setOption(this.defaultOptions)
        },
            watch: {
        seriesData: {
            handler(newValue, oldValue) {
                console.log('seriesData', newValue)
                this.init()
            },
            deep: true,
			immediate:true
        },
    },

坑2：

父组件没请求，直接传入了个默认值给bar组件。这会导致两个问题：因为没有修改过datalist，因此bar中watch如果未开启immediate:true，是无法获取到传递的值的。即使开启了，只会调用一次init方法，且该init方法中DOM实例未获取到，无法创建图表。

解决思路：

父组件不要直接传递默认值，初始化都设置为空，通过方法模拟异步请求，进行赋值。注意，必须是异步。因为vue的视图更新也是异步的，如果对一个数据修改多次，它会放入缓冲队列，只修改一次。

总结：不需要使用immediate:true!!!只需要父组件模拟请求即可

echarts所遇坑

Echarts图表二次封装所遇到的坑

坑点1：

坑2：