echarts v-show大小剩100px
时间: 2024-01-31 09:09:17 浏览: 138
vue tab切换,解决echartst图表宽度只有100px的问题
5星 · 资源好评率100%
为了解决echarts图表使用v-show控制图表显示不全的问题,可以在updated()函数中使用resize()方法来调整图表大小。具体实现方法如下所示:
```javascript
updated() {
this.chart.resize();
},
/*项目echarts部分代码*/
this.chart = echarts.init(document.getElementById('chart'));
this.chart.setOption(option);
// 根据屏幕大小调图表,最好使用防抖方法
window.addEventListener("resize", () => {
this.chart.resize();
})
```
在这段代码中,updated()函数会在组件更新后被调用,我们可以在这个函数中使用resize()方法来调整图表大小。同时,我们还需要在window对象上添加一个resize事件监听器,以便在窗口大小发生变化时自动调整图表大小。
如果你想让echarts图表在v-show为false时仍然能够正常显示,可以使用v-if代替v-show。因为v-if会在条件为true时才渲染DOM元素,所以即使图表被隐藏了,也不会出现无法初始化的问题。
阅读全文