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

news2024/9/23 18:14:45

为什么我们宽度设置了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.coloradmin.cn/o/2158159.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

鸿蒙OpenHarmony【轻量系统内核(异常调测)】子系统开发

异常调测 基本概念 OpenHarmony LiteOS-M提供异常接管调测手段&#xff0c;帮助开发者定位分析问题。异常接管是操作系统对运行期间发生的异常情况进行处理的一系列动作&#xff0c;例如打印异常发生时异常类型、发生异常时的系统状态、当前函数的调用栈信息、CPU现场信息、任…

SD教程:一键将真人照片转成插画风格头像,秒变二次元动漫主角~

大家好&#xff0c;我是灵魂画师向阳 如今AI技术日益成熟&#xff0c;今天给大家分享一个用AI绘画工具StableDiffusion制作真实头像转插画的教程&#xff0c;废话不多说&#xff0c;上操作。 本期教程我们将以SD为作图工具&#xff0c;如果你还没有安装使用过AI绘画工具Stable…

非root安装Augustus报错解决

git clone https://github.com/Gaius-Augustus/Augustus.git cd Augustus make augustus报错&#xff1a; 解决&#xff1a; wget -O boost_1_76_0.tar.gz https://sourceforge.net/projects/boost/files/boost/1.76.0/boost_1_76_0.tar.gz/downloadtar xzf boost_1_76_0.tar.…

寄大件快递用什么物流更便宜,寄20-200公斤大件价格对比

大件货物&#xff0c;大件行李&#xff0c;大件电器用什么物流快递更便宜呢&#xff1f; 新生入学&#xff0c;放寒暑假&#xff0c;新单位入职&#xff0c;搬家换工作的时候&#xff0c;都会遇到大件行李货物要邮寄的情况。这些都属于物流中的寄大件服务&#xff0c;在快递费…

【博弈强化学习】——多智能体博弈强化学习研究综述

【论文】&#xff1a;多智能体博弈强化学习研究综述 【引用】&#xff1a;王军, 曹雷, 陈希亮, 等. 多智能体博弈强化学习研究综述[J]. 计算机工程与应用, 2021, 57(21): 1-13.

开关电源自动测试系统的测试设备与特色

突破传统测试系统的操作维护困难等限制&#xff0c;NSAT-8000开关电源自动测试系统以其开放式架构和0代码模式&#xff0c;带来了不一样的开关电源自动化测试体验。 开关电源自动测试系统的测试设备 开关电源自动测试系统核心硬件包括&#xff1a;可编程交直流电源、电子负载、…

Qt --- 常用控件的介绍 --- 其他控件

一、QPushButton QWidget中设计到的各种属性/函数/使用方法&#xff0c;针对接下来要介绍的Qt的各种控件都是有效的。 使用QPushButton表示一个按钮&#xff0c;这也是当前我们最熟悉的一个控件了。这个类继承了QAbstractButton&#xff0c;这个类是一个抽象类&#xff0c;是…

包装器(C++11)

1. 三种可调用对象 在学习包装器之前&#xff0c;先回顾一下C中三种用于定义可调用对象的方式&#xff1a;函数指针、仿函数&#xff08;即函数对象&#xff09;和 lambda 表达式。它们各有优缺点&#xff0c;适用于不同的场景。 a. 函数指针 函数指针是指向函数的指针&…

Gitlab学习(008 gitlab开发工作流GitFlow)

尚硅谷2024最新Git企业实战教程&#xff0c;全方位学习git与gitlab 总时长 5:42:00 共40P 此文章包含第27p-第p29的内容 文章目录 工作流分类集中式工作流功能开发工作流GitFlow工作流Forking工作流 各个分支的功能模拟工作环境创建分支登录领导&#xff08;项目管理者&#…

【网络安全】TCP和UDP

一、TCP/UDP对比 1.共同点&#xff1a; 都是工作在TCP/IP体系结构的传输层的协议 工作主要都是把端口号往原始数据封装 在 TCP 协议中&#xff0c;原始数据指的是应用程序产生的需要通过网络进行传输的数据。这些数据可以是各种类型的信息&#xff0c;例如文本、图像、音频、…

STM32 通过软件模拟 I2C 驱动 24Cxx 系列存储器

目录 一、AT24CXXX 系列存储器介绍1、基本信息2、寻址方式3、页地址与页内单元地址4、I2C 地址5、AT24CXX 的数据读写5.1 写操作5.1.1 按字节写5.1.2 按页写 5.2 读操作5.2.1 当前地址读取5.2.2 随机地址读取5.2.3 顺序读取 二、代码实现1、ctl_i2c2、at24c3、测试程序 I2C 相关…

c++难点核心笔记(一)

文章目录 前言C的应用领域 核心编程内存分区模型1.程序运行前2.程序运行后3.new操作符引用 函数1.概述和函数原型2.函数的定义和参数3.使用函数处理不同类型的数据4.微处理器如何处理函数调用函数的分文件编写 指针和引用什么是指针动态内存分配使用指针时常犯的编程错误指针编…

为你介绍五款超实用免费报表工具,一文说清优缺点

1. 山海鲸可视化 山海鲸可视化是一款完全免费的报表工具&#xff0c;不仅能够处理各式复杂报表&#xff0c;而且提供了非常丰富的组件和模板&#xff0c;软件操作方式为零代码的拖拽式操作&#xff0c;新手用户也能快速上手。同时&#xff0c;它附送一个免费的网站后台&#x…

JVM java主流的追踪式垃圾收集器

目录 前言 分代垃圾收集理论 标记清除算法 标记复制算法 标记整理法 前言 从对象消亡的角度出发, 垃圾回收器可以分为引用计数式垃圾收集和追踪式垃圾收集两大类, 但是java主流的一般是追踪式的垃圾收集器, 因此我们重点讲解. 分代垃圾收集理论 分代收集这种理…

腾讯云负载均衡ssl漏洞(CVE-201602183)解决

绿盟漏洞扫描腾讯云应用&#xff0c;提示有1个高危、1个中危。 看IP是应用服务器前端的负载均衡。 漏洞详细信息如下&#xff1a; 根据腾讯云文档&#xff0c;可以通过设置负载均衡加密算法设置&#xff0c;来缓解漏洞风险。 登录 负载均衡控制台&#xff0c;在左侧导航栏单击…

宸励投资专注高新技术投资,助推中小企业快速发展

宸励投资&#xff0c;作为一家新兴的互联网式新轻创型投行公司&#xff0c;专注在人工智能、专精特新及数字化美业三大板块领域&#xff0c;展现了其深厚的专业背景和卓越的引领能力。这家公司不仅在各自的领域内深耕细作&#xff0c;更通过其前瞻性的视角和独到的战略布局&…

Windows X86 远线程注入问题解惑

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…

ProtoBuf介绍及安装

文章目录 序列反序列化ProtoBuf特点安装ProtoBufwindowsUbuntuCentos 序列反序列化 在网络传输过程当中&#xff0c;可以理解为&#xff1a; 发送方接收方 它们彼此要通信&#xff0c;先要定好一个规则&#xff0c;也就是协议&#xff0c;双方都能认识的结构化数据&#xff…

Linux C——网络编程

本案例运行环境&#xff1a;Ubuntu 12.04.1 LTS 1、基本概念 网络的七层模型&#xff1a; 物理层 数据链路层 网络层 传输层 会话层 表示层 应用层 其中&#xff1a;1、2、3层主要面向通过网络端到端的数据流&#xff0c; 4、5、6、7层定义了程序的功能 …

静态链接和动态链接的Golang二进制文件

关注TechLead&#xff0c;复旦博士&#xff0c;分享云服务领域全维度开发技术。拥有10年互联网服务架构、AI产品研发经验、团队管理经验&#xff0c;复旦机器人智能实验室成员&#xff0c;国家级大学生赛事评审专家&#xff0c;发表多篇SCI核心期刊学术论文&#xff0c;阿里云认…