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

最新推荐文章于 2024-04-27 14:59:16 发布

Lucy-

最新推荐文章于 2024-04-27 14:59:16 发布

阅读量3.4k

点赞数 4

分类专栏： # ECharts 可视化图表库文章标签： echarts 前端

本文链接：https://blog.csdn.net/lm1022/article/details/127049381

版权

ECharts 可视化图表库专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在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 更新了 }) 主动触发一下图表，使之强制渲染就可以正常显示了