echarts柱状图使用v-show切换显隐时容器宽高变小

Posted 2023-03-09

参考技术A 使用css的display属性控制图表的显隐时，如果父容器没有给出宽高图表的宽度会变成0，父容器的宽度设置为100%时，图表的宽度会变成100px；这个时候切换显隐图表会变小，想要图表自适应可以使用vue-echarts的autoresize属性。

我的项目问题在于，x轴文字过长所以加了，文字滚动，这时候在切换显隐的时候会出现两行x轴，

解决办法使用element-resize-detector插件监听容器的宽高变化，再手动隐藏掉原本的x轴

element-resize-detector使用方法

npm install element-resize-detector

import elementResizeDetectorMaker from 'element-resize-detector';

let erd = elementResizeDetectorMaker();

erd.listenTo(‘要监听的元素’, function(element) 

    //进行操作

)