Echarts+Vue

   最近遇到一个问题,将Echarts抽离后,点击导航栏,不进行页面跳转对Echarts的数据进行更新(简单来说就是不同的数据,一个页面),数据已经传入到Echarts中,但是只有在Echatrs第一次熏染时才有数据,进行跳转之后数据始终无法出来。在经过无数次尝试之后,数据出来了但是新问题就是点击导航栏第一个没有数据,第二个的数据是第一个,而且数据是在累加,这个问题网上说将 myChart.setOption(option,true)在这里加这个true,发现还是不行。

     然后我尝试将在Echarts之前,我遍历数组之前将X、Y分别对应的数组进行清空,但是还是不可以 ,原因就是父组件的数据没有和Echarts中的数据同步。

我的解决办法:

在Echarts中监听存放数据数组

deep:true;是一定需要的;this.drawChart()是Echarts的初始化函数;

到这里所有的数据都可以出来了,但是他是在一个图上一直在加,我不想要这样的效果所以我在Echarts初始化的函数中对X、Y数组赋值为空;

(Echarts数据处理的部分代码)

这样就实现了数据的同步更新!第一次使用Echarts也是第一次使用Vue做项目,很多不足请指教!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。