解决echarts图宽度自适应问题,设置100%宽度显示100px

1、原因:这里是因为你的echarts图表的盒子使用了v-show或class隐藏样式引起的图表在执行js初始化的时候找不到这个元素,所以自动将"100%"转成了"100",最后计算出来的图表就成了100px。

2、解决方法:既然要保证初始化时DOM元素已经渲染,那么我们可以使用v-if,并搭配nextTick()实现echarts图表异步加载,让其走在DOM渲染之后。

3、代码

TypeScript 复制代码
<div class="chart_position">
  <!-- 柱状图 -->
  <div id="mainThree" class="chartBar_box" v-if="showFlag"> </div>
</div>
const showFlag = ref(false);

if (progressDataArray.value.length > 0) {
   showFlag.value = true;
   nextTick(() => {
     onEchartsThree();
   });
} else {
   showFlag.value = false;
}

.chartBar_box {
    width: 100%;
    height: 240px;
}
相关推荐
摆烂工程师8 分钟前
今天 Cloudflare 全球事故,连 GPT 和你的网站都一起“掉线”了
前端·后端·程序员
拉不动的猪11 分钟前
一文搞懂:localhost和局域网 IP 的核心区别与使用场景
前端·javascript·面试
亿元程序员38 分钟前
你支持游戏内显示电量、信号或时间吗?
前端
阿珊和她的猫1 小时前
HTTP:Web 世界的基石协议详解
前端·网络协议·http
未来之窗软件服务1 小时前
自建开发工具IDE(二)文件托拽读取——东方仙盟炼气期
开发语言·前端·javascript·仙盟创梦ide·东方仙盟
conkl1 小时前
构建健壮的前端请求体系:从 HTTP 状态码到 Axios 实战
前端·网络协议·http
g***B7381 小时前
前端组件设计模式,复用与扩展
前端·设计模式
chxii1 小时前
第六章:MySQL DQL 表之间的关系 自连接 一对一、一对多、多对一、多对多
java·前端·mysql
U***49831 小时前
前端性能优化插件,图片压缩与WebP转换
前端
GISer_Jing2 小时前
OpenCV头文件路径配置终极修复指南
javascript·opencv·webpack