当前位置: 首页 > article >正文

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

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

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

3、代码

<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;
}


http://www.kler.cn/a/443822.html

相关文章:

  • 【CVE-2024-56145】PHP 漏洞导致 Craft CMS 出现 RCE
  • flink实现复杂kafka数据读取
  • html <a>设置发送邮件链接、打电话链接 <a href=“mailto:></a> <a href=“tel:></a>
  • 《Qt Creator 4.11.1 教程》
  • Go 语言常量
  • React系列(八)——React进阶知识点拓展
  • UDP网络编程套接
  • Java.10--IO流
  • 修改openjdk17 java/lang/String.java 类源码,增加一个native本地方法打印固定字符串功能
  • 图书馆管理系统(一)基于jquery、ajax
  • Linux 显示系统活动进程状态命令 ps 详细介绍
  • 如何有效修复ffmpeg.dll错误:一站式解决方案指南
  • Linux dd 命令详解:工作原理与实用指南(C/C++代码实现)
  • 单节点calico性能优化
  • springboot444新冠物资管理系统的设计与实现(论文+源码)_kaic
  • Databend 产品月报(2024年11月)
  • 【深度学习之三】FPN与PAN网络详解
  • 为SSH2协议服务器的用户设置密钥
  • “视觉革命:走进可视化AI识别系统的智能世界
  • 深度学习项目的 Python 实现复现指南
  • Day27 - 大模型微调,LLaMA搭建
  • 初学stm32 ——— 串口通信
  • elementui在任意页面点击消息,弹出消息对应页面处理弹窗
  • 2.metagpt中的软件公司智能体 (ProductManager 角色)
  • @Resource与@Autowire
  • VGGNet:深度学习中的卷积神经网络经典之作