echarts显示问题

一般我们在做项目的时候，都会自定义一些组件，为了复用，只要传一下prop就可以了。

这个prop的值，一般都是由服务器端api接口返回。

 

测试的时候发现数据正常显示，但是从服务器返回数据后，就不显示了。

应该是时间差的问题，导致的不显示，也就是说喧染的时候在前面，然后赋值在后面。

 

解决：

<LineECharts v-if="flag" :xdata="xdata" :series="series"></LineECharts>

加上一个flag标志，从服务器返回数据后，再将flag=true，这样有数据的时候，再让它去喧染就可以了。

那么问题又来了，如果再次通过查询条件，再次刷新数据，又应该咱办呢？

this.flag=false;

...

this.flag=true;

上面可以想想，但肯定没有效果。

 

解决：

name: 'LineECharts',
    props: ['xdata', 'series'],
    data() {
        return {
            line: null

        };
    },
    watch: {
        xdata: {
            handler: function (newVal, oldVal) {
                if (newVal) {
                    this.drawLine();
                }
            }
        }
    },

上面是通过vue提供的watch来监听数据的改变，如果一有改变，就重新调用drawLine()方法去重画。

注：

其实有了watch方法，前面的也可以不加flag, 但是一般服务器返回数据，然后再喧染比较好。

其实加不加，都会执行。也就是说flag多余。

最好总结：

如果只是加载的时候，显示直接flag就可以，如果要实时的查询，然后刷新就要用watch了。

 

参考：

https://www.cnblogs.com/goloving/p/9114236.html