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) {

    //进行操作

})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容