关于echarts 图,在切换tab后,返回时宽度变窄的问题

2023-11-14

项目场景:

提示:这里简述项目相关背景:最近在做一个统计报表的项目,需要插入ECharts 图表和表格做统计,并且可以导出Excel 表格。

问题描述:

提示:这里描述项目中遇到的问题:
在开发过程中,碰到了一个,echarts 图在切换到 tab ,然后导出页面的数据,在初始化echarts图,宽度变窄的问题。

原因分析:

提示:这里填写问题的分析:
通过调试代码发现,每次导出excel 表格后,返回初始的页面,echarts 图的宽度区的都是默认的宽度,而不是我自己设置的宽度,导致切换回来的时候,图表变窄。

解决方案:

提示:这里填写该问题的具体解决方案:
在网上搜索了集中方法试了下:
1、隐藏div下无法获取到div的宽高,点击切换标签初始化echarts,可以实现自适应,但是不改变窗体大小时,echarts图表宽度很窄,如图3,方法:手动调用 echartsInstance.resize() 调整尺寸 官方文档:链接

手动调用:
var shsfECharts = echarts.init(document.getElementById('shsfECharts'));```
shsfECharts.resize();
宽高自适应:
//ecahrts 自适应
    window.onresize = function () {
        shsfECharts.resize();
    }

2、在页面切换来的时候,给你的echarts 图 设置一个固定的宽度

var w = $(window).width()
$("#shsfECharts ").css({ "width": $("#shsfECharts ").width(w - 100), "height": "300px" });
//这里我减了100像素的宽度,因为溢出100个像素,高度分给300像素足以。

注意:使用刚指定的配置项和数据显示图表。

function setOptionsLineECharts(xAxis,shzfValue,swdtfsValue) {
        省略 option
        // 使用刚指定的配置项和数据显示图表。
        shsfECharts.hideLoading();
        shsfECharts.setOption(option);
        shsfECharts.resize(); // 一定要加
    }```

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

关于echarts 图,在切换tab后,返回时宽度变窄的问题 的相关文章

随机推荐

  • js版飞机大战

    div div
  • 用c语言对文件进行加密

    用C语言对文件进行简单加密的操作 这里主要用的加密思路是破坏文件头 使得系统无法识别文件从而进行加密 最初的思路是将用户输入的加密口令转成ASCII码 再与文件头数据循环进行异或操作 从而破坏文件头数据 使得系统无法识别文件 而从安全性上来
  • 最新!Photoshop 2022 (ps2022)中文

    Photoshop 2022拥有超强的图片编辑功能 对图片调整强度 饱和度 亮度 从照片编辑和合成到数字绘画 动画和图形设计 只要能想到 就能在Photoshop中创作出来 包括神经滤镜 天空更换以及增强的云文档等 可以让设计者的工作更加高
  • ORA-01502: 索引或这类索引的分区处于不可用状态

    一 问题描述 插入数据时 出现如下报错 ORA 01502 索引或这类索引的分区处于不可用状态 英文 ora 01502 index schema index name or partition of such index is in un
  • (五)unity shader基础之——————学习shader所需的数学基础:下篇(坐标空间:模型空间、世界空间、观察空间、裁剪空间、屏幕空间、法线变换等)

    一 坐标空间 上篇文章讲述了如何使用矩阵来表示基本的变换 如平移 旋转和缩放 在本节我们将关注如何使用这些变换来对坐标空间进行变换 渲染游戏的过程可以理解成是把一个个顶点经过层层处理最终转换为屏幕上的过程 本节我们就将学习这个转换过程是如何
  • Python类和对象编写一个小游戏【含注释】

    定义一个鱼类和龟类并编写游戏 假设游戏场景为范围 x y 为0 lt x lt 10 0 lt y lt 10 游戏生成1只乌龟和10条鱼 它们的移动方向均随机 乌龟的最大移动能力是2 Ta可以随机选择1还是2移动 鱼儿的最大移动能力是1
  • 集合--10万随机数问题

    1 求十万个数据每个数据出现的次数 import java util ArrayList import java util Random import java util HashMap import java util Iterator
  • torch.optim.SGD()

    其中的SGD就是optim中的一个算法 优化器 随机梯度下降算法 PyTorch 的优化器基本都继承于 class Optimizer 这是所有 optimizer 的 base class torch optim是一个实现了各种优化算法的
  • QT之Excel表格操作

    QT之Excel表格操作 提前准备 打开读取excel文件 写入保存excel文件 提前准备 pro文件中添加 QT axcontainer 在需要使用excel的文件中添加 include
  • GitLab 仓库管理 创建一个仓库详细步骤

    Gitlab 仓库管理 GitLab 是通过组 group 的概念来统一管理仓库 project 和用户 user 通过创建组 在组下再创建仓库 再将用户加入到组 从而实现用户与仓库的权限管理 创建仓库之前先创建组 创建组 New grou
  • 状态空间模型

    一 状态空间模型简述 状态空间模型是动态时域模型 以隐含着的时间为自变量 状态空间模型包括两个模型 一是状态方程模型 反映动态系统在输入变量作用下在某时刻所转移到的状态 二是输出或量测方程模型 它将系统在某时刻的输出和系统的状态及输入变量联
  • html文字下排输入,HTML input text单行文本输入框简介说明

    摘要 下文讲述html代码中input type text 时的相关属性简介说明 如下所示 input type text 简介 当 input标签中 type text 时 代表此标签是一个单行文本输入框 单行文本框还包括一些属性 如下
  • 新项目需求调研

    从三个方面帮你建立起了对这个项目基本认识 概念层面 何谓访客管理系统 产品层面 访客管理系统通常有啥功能 客户层面 什么样的目标客户会产生这种需求 需求调研四个维度 那么 了解了这些基本信息后 我们就可以开展需求调研了吗 显然是不够的 对于
  • 三菱fx2n64mr说明书_三菱PLC模块FX3U-64MR/DS使用手册

    三菱PLC模块FX3U 64MR DS使用手册 FX1N 24MR 001 是三菱PLC FX1N系列 是一种卡片大小的PLC 适合在小型环境中进行控制 它具有的性能 串行通讯功能以及紧凑的尺寸 这使得它们能用在以前常规PLC无法安装的地方
  • 代码随想录--哈希--四数相加II

    给定四个包含整数的数组列表 A B C D 计算有多少个元组 i j k l 使得 A i B j C k D l 0 为了使问题简单化 所有的 A B C D 具有相同的长度 N 且 0 N 500 所有整数的范围在 2 28 到 2 2
  • 用DOS命令合并多个文本文件

    作者 iamlaosong 从总部系统下的干线数据 有30个文本文件 希望变成一个Excel文件 方法是先用copy命令将文本合成一个 再用excel打开 最后保存为Excel文件 步骤如下 1 将所有的文本文档拷贝到同一个文件夹 然后单击
  • 半透明信息显示浮动窗口的实现

    实现目的 在一些画图软件中 经常需要向用户展示鼠标移动到的位置的对象的一些参数信息 此时 完成一个交互性友好的信息显示界面就相当的重要了 因为一个软件的好坏 在用户的眼中 第一感觉甚至是第一重要的就是视觉效果和可操作性 当然 软件本身的稳定
  • 阿里云轻量应用服务器防火墙配置(全网最简单)

    阿里云轻量应用服务器防火墙配置 1 命令行配置 1 开启防火墙 systemctl start firewalld 2 限制端口 firewall cmd zone public add port 5672 tcp permanent 开放
  • 过拟合:所表现的就是模型训练误差很小,但测试误差很大,对于产生这种现象以下说法正确

    过拟合 所表现的就是模型训练误差很小 但测试误差很大 对于产生这种现象以下说法正确 提示 基础知识 1 深度学习机器学习笔试面试知识 正则化 文章目录 过拟合 所表现的就是模型训练误差很小 但测试误差很大 对于产生这种现象以下说法正确 TO
  • 关于echarts 图,在切换tab后,返回时宽度变窄的问题

    项目场景 提示 这里简述项目相关背景 最近在做一个统计报表的项目 需要插入ECharts 图表和表格做统计 并且可以导出Excel 表格 问题描述 提示 这里描述项目中遇到的问题 在开发过程中 碰到了一个 echarts 图在切换到 tab