echarts 使用v-if或v-show不显示

在updated()钩子函数中重新resize()

updated() {
   this.myChart.resize();
 },

mounted() {
let echarts = require("echarts");
// 基于准备好的dom，初始化echarts实例
// div #mychart必须要设置高度。
this.myChart=echarts.init(document.getElementById('mychart'));
this.myChart.setOption(option);
window.addEventListener("resize",()=>{
      this.myChart.resize();
})
}

1. 使用v-if的时候，当条件为false时，会出错，因为此时div是不存在的，所以无法对图表进行初始化。

2. 在vue项目中，使用v-show控制div元素的显示，div标签中是echarts图表，自定义的echarts CSS样式是width为100%，但实际显示时图表宽度确为100px

• 将v-show改成使用v-if即可。原因是v-show 本身是结构已经存在，当数据发生变化时，结构并未重新渲染
• 当数据请求出来后res.code==0后，调用绘制ehcarts时图表的时候，用 Vue.nextTick(function () { // DOM 更新了 }) 主动触发一下图表，使之强制渲染就可以正常显示了