解决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;
}
相关推荐
怕浪猫29 分钟前
第一章 JSX 增强特性与函数组件入门
前端·javascript·react.js
铅笔侠_小龙虾41 分钟前
Emmet 常用用法指南
前端·vue
钦拆大仁1 小时前
跨站脚本攻击XSS
前端·xss
前端小L1 小时前
贪心算法专题(十):维度权衡的艺术——「根据身高重建队列」
javascript·算法·贪心算法
VX:Fegn08952 小时前
计算机毕业设计|基于springboot + vue校园社团管理系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·后端·课程设计
Fortunate Chen2 小时前
类与对象(下)
java·javascript·jvm
ChangYan.3 小时前
直接下载源码但是执行npm run compile后报错
前端·npm·node.js
skywalk81633 小时前
在 FreeBSD 上可以使用的虚拟主机(Web‑Hosting)面板
前端·主机·webmin
ohyeah4 小时前
深入理解 React 中的 useRef:不只是获取 DOM 元素
前端·react.js