echarts使用v-if或v-show图表宽度100px

灵壹Eli

已于 2023-04-19 12:09:48 修改

阅读量444

点赞数

分类专栏：前端技术笔记文章标签：前端 vue echarts

于 2023-04-18 22:00:34 首次发布

本文链接：https://blog.csdn.net/icjs_cc/article/details/130232348

版权

前端技术笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在Vue项目中使用v-if或v-show控制柱状图显示时，可能出现柱图显示不全或无法初始化的错误。当v-if为false时，图表的div不存在导致初始化失败；v-show则可能因元素尺寸未更新导致显示一半。解决方法是在updated生命周期钩子中调用chart.resize()，并监听窗口resize事件以适应屏幕变化。

摘要由CSDN通过智能技术生成

实现柱状图使用了v-if或v-show做判断时，柱图要么显示一半要么不显示，使用v-if的时候，当条件为false时，会出错，因为此时div是不存在的，所以无法对图表进行初始化。v-show结构已经存在，当数据发生变化时，结构并未重新渲染，会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况

解决方法

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

/*项目echarts部分代码*/
this.chart=echarts.init(document.getElementById('chart'));
this.chart.setOption(option);

// 根据屏幕大小调节图表，最好使用防抖方法
window.addEventListener("resize", ()=>{
  this.chart.resize();
})