解决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;
}
相关推荐
小小鸟0084 分钟前
移动端适配总结
前端
LYFlied12 分钟前
CSR与SSR:前端渲染方式详解
前端·性能优化·ssr·csr·首屏渲染·前端页面渲染
天天扭码14 分钟前
京东前端开发实习生 一面
前端·网络协议·面试
董世昌4116 分钟前
JavaScript 变量声明终极指南:var/let/const 深度解析(2025 版)
java·服务器·前端
sorryhc41 分钟前
Vite开发环境按需编译是怎么实现的?
前端·javascript·vite
nnnnna1 小时前
props 、emits 、组件上的v-model(详细版)
前端·javascript
三年三月1 小时前
Tailwind CSS 入门介绍
前端
余生H1 小时前
前端技术新闻(WTN-1):React.js & Next.js 爆出 CVSS 10.0 级严重漏洞,历史风险回顾与代码级深度分析
前端·javascript·react.js
1024肥宅1 小时前
JavaScript 原生方法实现:数学与数字处理全解析
前端·javascript·ecmascript 6
烟袅1 小时前
深入理解 JavaScript 内存机制与闭包原理
前端·javascript