echarts柱状使用v-show切换显隐时容器宽高变小
使用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)?{
//进行操作
})