您现在的位置是：网站首页> 编程资料编程资料

vue中Echarts图表宽度没占满的问题_vue.js_

2023-05-24 379人已围观

简介 vue中Echarts图表宽度没占满的问题_vue.js_

vue Echarts图表宽度没占满

显示效果：

在这里插入图片描述

经过测试，当把宽度写成固定px的时候，就能正确渲染。

解决方法

1、宽高写成固定px，针对宽度不需要自适应的大屏。

2、当宽度需要自适应，父元素需要设置宽高，可以使用$nextTick 当元素宽度发生改变，只需要等待DOM渲染完成在渲染图表，这样就不会出现问题了。

相似案例：

当点击按钮使用v-if进行图表切换，同样会使出现宽高不占满情况。

mounted() { this.$nextTick( () => { this.drawBar(); }) }

vue Echarts图表宽度自适应，亲测有效

实现宽度自适应语句

//实现自适应部分  window.onresize = () => {      // 基于准备好的dom，初始化echarts实例     let myChart = this.$echarts.init(document.getElementById('newEcharts'));     myChart.resize(); };

代码使用如下：

效果如下：

 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：vue结合echarts绘制一个支持切换的折线图实例_vue.js_

下一篇：React Hooks获取数据实现方法介绍_React_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网