echarts图表宽度设置100%,结果echarts宽度只有100px,解决图表自适应宽度问题

2023-11-02

问题

我的echarts在tab选项卡中显示,为了自适应,用来渲染图表的div的宽度为100%,但是charts渲染出来以后默认设置为了100px。

原因

图表的父容器  li  是隐藏的,我默认设置 display:none,图表在执行js初始化的时候找不到这个元素,所以自动将“100%”转成了“100”,最后计算出来的图表就成了100px

 

 

解决方法有两种(一种是切换tab以后,li显示以后再初始化图表,二是给li中渲染图表的div提前设置好width 宽度)

  1. 第一种可以把图表的实例化写到tab的点击事件中  li 显示之后。
  2. 第二种可以给  li   中的 渲染图表的div 提前设置好宽度。因为  li  的宽度100%;h-chart的宽度 赋值为 li的父元素的宽度就好了


 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

echarts图表宽度设置100%,结果echarts宽度只有100px,解决图表自适应宽度问题 的相关文章

随机推荐

  • C++ primer plus 第六版课后作业和题——第二章第三题

    题目 编写一个C 程序 它要求使用3个自定义函数 包括main 函数 并生成下面的输出 Three blind mice Three blind mice See how they run See how they run 其中一个函数要调
  • 3. redis cluster集群运维与核心原理剖析

    分布式缓存技术Redis 1 Redis集群方案比较 2 Redis高可用集群搭建 3 Java操作redis集群 4 Redis集群原理分析 5 Reid高可用集群之水平扩展 本文是按照自己的理解进行笔记总结 如有不正确的地方 还望大佬多
  • Sublime Text 使用介绍、全套快捷键及插件推荐

    开篇 如果说Notepad 是一款不错Code神器 那么Sublime Text应当称得上是神器滴哥 Sublime Text最大的优点就是跨平台 Mac和Windows均可完美使用 其次是强大的插件支持 几乎无所不能 开始使用Sublim
  • stm32毕设 STM32的环境质量监测系统(源码+原理图+论文)

    文章目录 0 前言 1 设计架构 功能设计 2 原理图 3 软件设计 4 实现效果 5 相关代码 6 最后 0 前言 这两年开始毕业设计和毕业答辩的要求和难度不断提升 传统的毕设题目缺少创新和亮点 往往达不到毕业答辩的要求 这两年不断有学弟
  • 计算机视觉与机器学习之学习记录一(环境配置与安装+笔记分享)

    一 Pytorch及CUDA安装注意事项 依据参考资料 3 通过NVIDA控制面板查看计算机使用的GPU驱动程序版本 依据参考资料 2 及计算机GPU驱动程序版本 查阅显卡驱动对应的CUDA版本 依据参考资料 3 分别下载对应版本的CUDA
  • python中prompt的意思_python中的prompt是什么意思,怎么用

    查看 5468 回复 9 已解决 python中的prompt是什么意思 怎么用 当前离线UID日志 相册 贡献 荣誉 积分 电梯直达 发表于 2019 5 26 22 08 12
  • 高性能、高适配,SSD 孪生兄弟出场即 C 位

    内容导读 PyTorch 1 9 同步更新了一些库 包括 TorchVision 中新增的 SSD 和 SSDlite 模型 与 SSD 相比 SSDlite 更适用于移动端 APP 开发 SSD 全称 Single Shot MultiB
  • 分库分表个人思路

    一 两种方案分库分表和自研方案 一般业界 对订单数据的分库分表 有两类思路 按照订单号来切分 按照用户id来切分 方案一 按照订单号来做 hash分散订单数据 把订单号看作是一个字符串 做 hash 分散到多个服务器去 具体到哪个库 哪个表
  • 牛逼!程序员给鸿星尔克写了一个720°全景看鞋展厅

    最近因为鸿星尔克给河南捐了5000万物资 真的是看哭了很多的网友 普通一家公司捐款5000万可能不会有这样的共情 但是看了鸿星尔克的背景之后 发现真的是令人心酸 鸿星尔克2020年的营收是28亿 但是利润却是亏损2个亿 甚至连微博的官方账号
  • php威盾解密的例子分享

    例子 批量解密 代码如下 复制代码
  • LM2596电路简析

    LM2596这款芯片是非常常用的 通常用在24V 12V转5V电路中 在网上也可以搜到很多相关的资料 内部框图 下面是规格书里面给出的参考电路 输出3 3V 输出5V 电气特性 输出3 3V电气特性 输出5V电气特性 输出12V电气特性 输
  • ext系列文件系统的LVM逻辑卷管理(外加扩容操作)

    此处我们准备两张盘 一张 dev sdb 一张 dev sdc 两张的所有储存都放在一个池子里 我们需要有个流程 一 将这两张盘变成物理卷 这里我们要注意 我们是可以分完区再将分区变成物理卷 不建议 原因就是脱裤子放屁 我们看下一步就知道了
  • linux杀死进程方法总结

    方法一 Terminal终端输入 gnome system monitor 就可以打开system monitor 然后找到相应进程 右击选择kill process就可以了 方法二 通过kill 进程id的方式可以实现 首先需要知道进程i
  • IDEA中使用Jacoco统计单元测试的代码覆盖率

    一 使用IDEA自带的代码覆盖率工具 1 查看配置 因为都是默认的 所以不用修改 点击Edit Configurations 点击上方的设置图标用以修改整个Junit的配置 或者也可以点击具体的单元测试文件来修改该文件的配置 默认方式是In
  • 别丢了那个在乎你的人

    任何一段关系里 一个人心里有你 zui 直接 zui 纯粹的表现 就是在乎 比遇见一个合适的人更重要 更幸运的 便是遇见一个打从心底里在乎你的人 那个人 不一定非要财富无数 也不一定非得长相出众 但他一定会把你放在心尖儿上 你的喜怒哀乐 他
  • CSR867x — TWS模式音量调节的交互流程

    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XX 作 者 文化人 XX 联系方式 XX 版权声明 原创文章 欢迎评论和转载 转载时能告诉我一声就最好了 XX 要说的话 作者水
  • 【uni-app】 动态设置 tabBar

    uni setTabBarItem OBJECT 动态设置 tabBar 某一项的内容 不支持的平台有钉钉小程序 字节跳动小程序 setTabBar uni setTabBarItem index 0 title Home uni setT
  • SpringBoot常用配置類大全

    SpringBoot常用配置類大全 结合源码看注解 Target ElementType TYPE Retention RetentionPolicy RUNTIME Documented Inherited SpringBootConfi
  • Gradle添加依赖及使用注解(添加插件)

    一 基于Gradle可以构建很多项目 下面以Kotlin项目为例 package com reflections import sun management Agent author wangdong description 反射 定义一个
  • echarts图表宽度设置100%,结果echarts宽度只有100px,解决图表自适应宽度问题

    问题 我的echarts在tab选项卡中显示 为了自适应 用来渲染图表的div的宽度为100 但是charts渲染出来以后默认设置为了100px 原因 图表的父容器 li 是隐藏的 我默认设置 display none 图表在执行js初始化