在vue中使用v-show显示echarts,设置宽度为100%,但显示出来为100排序
效果图:
百度了下解决如下:
- resize() 个人看着有点麻烦
- 将v-show改为v-if(我用了下报错)
将v-show改成使用v-if即可。原因是v-show 本身是结构已经存在,当数据发生变化时,结构并未重新渲染
- 使用this.$nextTick(() => {})
用 Vue.nextTick(function () { // DOM 更新了 }) 主动触发一下图表,使之强制渲染就可以正常显示了
最后,图表正常渲染出来了。