当前位置: 首页 > 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/a/316589.html

相关文章:

  • 基于springboot+小程序的鲜花管理系统(鲜花1)
  • 使用 wxPython 开发 Python 桌面应用程序的完整教程
  • 数据集划分
  • c语言-教零基础/新手入门
  • 信息安全工程师(79)网络安全测评概况
  • npm常用函数定义手册(持续更新)
  • 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 的详细指南