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

server/2024/9/23 18:16:51/

为什么我们宽度设置了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.ppmy.cn/server/120907.html

相关文章

电脑串口和手机蓝牙BLE串口数据包通信调试工具

1&#xff0c;支持HEX收发 2&#xff0c;支持文本收发 3&#xff0c;支持自定义按钮发送自定义命令和数据包 4&#xff0c;支持自定义解析包内任意位置1~4字节转int并显示 5&#xff0c;自定义json举例说明 [ {"name":"1234命令","type":"b…

基于微信小程序的健身房管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 基于微信小程序JavaSpringBootVueMySQL的健…

骨传导耳机哪个品牌好用?五大高销骨传导耳机真实测评

在当今快节奏的生活中&#xff0c;音乐和运动已成为许多人生活中不可或缺的一部分。骨传导耳机因其独特的开放式设计和对听力的保护&#xff0c;正逐渐成为运动爱好者和音乐发烧友的新宠。 &#xff08;上图为部分我测试过的骨传导耳机&#xff09; 然而&#xff0c;市场上骨传…

flink 批量压缩redis集群 sink

idea maven依赖 <dependency> <groupId>org.apache.bahir</groupId> <artifactId>flink-connector-redis_2.11</artifactId> <version>1.0</version> </dependency> <dependency> <groupId>redis.clients</gr…

Flink Task 日志文件隔离

Flink Task 日志文件隔离 任务在启动时会先通过 MdcUtils 启动一个 slf4j 的 MDC 环境&#xff0c;然后将 jobId 添加到 slf4j 的 MDC 容器中&#xff0c;随后任务输出的日志都将附带 joid。 MDC 介绍如下&#xff1a; MDC ( Mapped Diagnostic Contexts )&#xff0c;它是一个…

提升晶振电路抗扰性:优化方案解析

在现代电子设备中&#xff0c;晶振作为提供稳定时钟信号的核心组件&#xff0c;其稳定性对整个系统的运行至关重要。然而&#xff0c;电路抗扰性不良往往会导致晶振失效&#xff0c;进而影响设备的整体性能。晶发电子针对这一问题&#xff0c;提出了以下关于晶振电路抗扰性及优…

7.搭建个人金融数据库之快速获取股票列表和基本信息!

前边我们提过&#xff0c;免费的数据一般来自于爬虫&#xff0c;获取难度和维护成本都比较高&#xff0c;其实不太适合小白用户。所以非必要情况下&#xff0c;我们尽量不用这种方式来获取数据。 我自己用的比较多的是tushare&#xff0c;一般来说有它也就够了&#xff0c;大…

ABAP 学习t-code DWDM

ABAP 学习t-code DWDM &#xff0c;里面有很多例子展示&#xff0c;且能看到源代码