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

解决Echarts:宽度100%,渲染的宽度却是100px

为什么我们宽度设置了100%,结果变为了100px?

源码这里没有获取到clientWidth,会将设置的width:100%转换称100px 

解决办法:

<div ref="numberPieRef"></div>


let numberPieRef = ref(null);
let myChart = null;

function initChart() {
  if (numberPieRef.value) {
    numberPieRef.value.style.width = window.innerWidth - 300 + "px";
    numberPieRef.value.style.height = "500px";
    myChart = $eCharts.init(numberPieRef.value);
    myChart.showLoading();

    .....
    
    myChart.hideLoading();
    myChart.setOption({
      
        .........
      
    });

    window.addEventListener("resize", () => {
      myChart.resize();
    });
  }
}

 


http://www.kler.cn/news/316589.html

相关文章:

  • Vue3快速入门+axios的异步请求(基础使用)
  • 基于SpringBoot的旅游网站系统
  • 硬盘数据能否自己在家恢复?探索数据恢复的可行性与方法
  • 信息技术引领的智能化未来
  • 滚雪球学SpringCloud[5.3讲]: 配置管理中的高可用与容错
  • How can I stream a response from LangChain‘s OpenAI using Flask API?
  • 认识知识产权——商标
  • postgresql gcc编译选项解释
  • JAVA执行引擎详细介绍
  • Qt Creator 集成开发环境 常见问题
  • 【代码随想录Day25】回溯算法Part04
  • CPU使用率较高排查和解决思路
  • vue + leaflet + 天地图实现搜索省份后高亮
  • Linux bash脚本本地开发环境(Git Bash)配置
  • 干货满满:嵌入式电阻的重要作用全知晓
  • 实验——完全使用Ansible部署多台服务器的服务
  • CTF 技能树 LOG -GIT泄露 笔记
  • 【磨皮美白】基于Matlab的人像磨皮美白处理算法,Matlab处理
  • react hooks--useContext
  • 【Nginx】在 Docker 上安装 Nginx 的详细指南
  • CVE-2024-46103
  • 无源蜂鸣器简介
  • 【百日算法计划】:每日一题,见证成长(017)
  • Python 类class的用法详解
  • 渗透测试综合靶场 DC-2 通关详解
  • comfyui中报错 Cmd(‘git‘) failed due to: exit code(128) 如何解决
  • 【医疗大数据】医疗保健领域的大数据管理:采用挑战和影响
  • 【2025】中医药健康管理小程序(安卓原生开发+用户+管理员)
  • 计算机毕业设计推荐-基于python的白酒销售数据可视化分析
  • 828华为云征文 | 构建高效搜索解决方案,Elasticsearch Kibana的完美结合