解决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;
}
相关推荐
明月_清风3 分钟前
开发者写PPT自救指南:4类对接场景,把技术讲清楚
前端·后端·面试
探索前端4 分钟前
3dtiles加载时被地形遮挡问题研究及处理思路
前端·3d·cesium
Htr_12 分钟前
Vercel 使用指南:框架、工作流与基础设施一体化的现代 Web 部署平台
前端
一颗烂土豆25 分钟前
ECharts 太平面?试试这款 Vue 3D 图表库
前端·vue.js·echarts
anyup34 分钟前
迁移uni-app x,我是如何让 AI 把我一步步搞崩溃的...
前端·uni-app·trae
用户9210802628641 分钟前
从读框架到搭项目:基于 Ant Design X Vue 和 RICH 范式搭建 AI 前端工作台
前端
Hilaku43 分钟前
为什么同一段代码在 Safari 上永远有 Bug?
前端·javascript·程序员
半仙er1 小时前
第二周06天 Vue3 + TypeScript 实战与本周复盘
前端
heyCHEEMS1 小时前
切页回来组件消失了?一个浏览器渲染机制引起的容器高度坍塌 bug
前端·浏览器
张元清1 小时前
React scrollIntoView + useRef:滚动到指定元素 (2026)
javascript·react.js