vue与echarts的坑

项目场景：

项目场景：vue2项目,在keep-alive标签中使用echarts绘制折线图

---

问题描述

问题如下：

1. 折线图显示错误
2. 数据更新时,折线图不重新渲染

原因分析：

1.使用keep-alive缓存页面,当切换至页面时,页面不会重新加载,所以写在mounted中的渲染函数不会再执行。
2.Vue的DOM更新是异步执行的,即修改数据时,视图不会立即更新,当数据变化,Vue将开启一个队列,对同一事件循环中发生的数据变更进行批处理(例如react一样,多次变更,只会推入队列一次,节省性能) 存疑

---

解决方案：

1. 在activated生命周期中渲染echarts

activated(){
  console.log("页面激活")
  this.initChart()
}

2. 使用this.$nextTick(),重新渲染echarts

this.$nextTick(() => {
  console.log("重新渲染echarts")
  this.$refs.radarchart.updateChart()
}