VUE中echarts切换无法正常渲染

问题复现

首先echarts是正常生成的，只是在vue框架中前一个（折线图）echarts没有被销毁

原因分析

两个echarts组件是显示在同一个div上的，在切换的时候vue无法识别数据（js数组对象）被改变了

解决办法

在渲染对象上添加key属性
:key=“Math.random()”
这里使用Math.random()是生成的随机数，大家可以绑定自定义变量，只要点击事件发生时自定义变量值改变即可

vue框架默认监听data中的数据变化，如果发生改变则重新渲染页面。但是部分对象类型监听会失效，比如数组对象。所以vue提供了key属性，若果元素的key值发生变化，vue就会刷新页面。

处理后