layui-tab加载echarts宽度丢失

主要是设置div的样式为:width:100%;height:100%;display: block;

<style>.layui-tab-item{width:100%;height:480px;}
</style><div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief"><ul class="layui-tab-title"><li class="layui-this">硫磺固体出入库</li><li  onclick="clickYeti()">硫磺液体出入库</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show" style=""><!--  固体硫磺 出入库,曲线图  --><div id="sufulrSolidChart" style="width:100%;height:100%;display: block; " lay-ignore></div></div><div class="layui-tab-item" style=""><!-- 硫磺液体出入库,曲线图  --><div id="liquidSufulrChart" style=" width:100%;height:100%;display: block; " lay-ignore></div></div></div></div>
  <script src="~/echarts/echarts.min.js"></script><script type="text/javascript">var pageConfig = {urls: { //  固体硫磺曲线图sulfur: "/Home/SulftDataByDay"//液体硫磺曲线图, sulfurLiquid: "/Home/LiquitSulftDataByDay"}};layui.use(['laydate','form'], function () {var $ = layui.$, form = layui.form, laydate = layui.laydate;// 渲染laydate.render({elem: '#start'});laydate.render({elem: '#end'});});!function () {//固体硫磺曲线function loadDataSulfur() {var start = $("#start").val();var end = $("#end").val();$.ajax({url: pageConfig.urls.sulfur,type: "post",data: {start: start, end: end},success: function (r) {suflurByDayLines(r.inData, r.outData);}});}//固体硫磺每天出库、入库,function suflurByDayLines(inData, outData) {//document.getElementById('sufulrSolidChart').removeAttribute("_echarts_instance_");var chartDom = document.getElementById('sufulrSolidChart');var myChart = echarts.init(chartDom);var option = {//grid: {//    width: '1000px' //设置宽度为父容器宽度的90%//},//  width: containerWidth+"px", //设置宽度为父容器宽度的90%//width:'1000px',title: {text: '固体硫磺每天出库、入库(吨)'},tooltip: {trigger: 'axis'},xAxis: {type: 'category',nameLocation: 'middle'},yAxis: {name: '硫磺库存数量'},series: [{name: '硫磺出库',type: 'line',data: outData,showSymbol: false,},{name: '硫磺入库',type: 'line',data: inData,showSymbol: false,}]};myChart.setOption(option);}//液体硫磺,每天出入库function suflurLiquidByDayLines(inData2, outData2) {//$("#liquidSufulrChart").html("");//解决echarts 无法渲染问题document.getElementById('liquidSufulrChart').removeAttribute("_echarts_instance_");var chartDom2 = document.getElementById('liquidSufulrChart');var myChart2 = echarts.init(chartDom2);console.log(778, '------------');console.log(inData2);console.log(outData2);var option = {title: {text: '液体硫磺每天出库、入库(吨)'},tooltip: {trigger: 'axis'},xAxis: {type: 'category',nameLocation: 'middle'},yAxis: {name: '硫磺库存数量'},series: [{name: '硫磺出库',type: 'line',data: outData2,showSymbol: false,},{name: '硫磺入库',type: 'line',data: inData2,showSymbol: false,}]};myChart2.setOption(option);}//液体硫磺function loadLiquidSulfur() {var start = $("#start").val();var end = $("#end").val();$.ajax({url: pageConfig.urls.sulfurLiquid,type: "post",data: {start: start, end: end},success: function (r) {suflurLiquidByDayLines(r.inData, r.outData);}});}loadDataSulfur();//点击查询window.loadChart = function () {//液体硫磺,是否隐藏var isHide = $("#liquidSufulrChart").is(":hidden");if (isHide) {loadDataSulfur();} else {loadLiquidSulfur();}}//点击液体硫磺,var isClickedYeti = false;window.clickYeti = function () {if (isClickedYeti == false) {loadLiquidSulfur();}isClickedYeti = true;}}();</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/689871.shtml

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

相关文章

C语言系列12——多线程与并发编程

目录 写在开头1 多线程的基本概念与应用场景1.1 什么是多线程&#xff1f;1.2 多线程的优势1.3 应用场景详解1.3.1 并行计算1.3.2 高响应性应用程序1.3.3 网络编程1.3.4 实时处理 1.4 多线程编程的挑战 2 POSIX线程库的使用与实际案例2.1 基础概念2.2 创建和管理线程2.3 线程同…

HTML 入门指南

简述 参考&#xff1a;HTML 教程- (HTML5 标准) HTML 语言的介绍、特点 HTML&#xff1a;超级文本标记语言&#xff08;HyperText Markup Language&#xff09; “超文本” 就是指页面内可以包含图片、链接等非文字内容。“标记” 就是使用标签的方法将需要的内容包括起来。…

116 C++ 可变参数函数,initializer_list (初始化列表), 省略号形参

一 可变参数函数 有时候我们传递的参数是不固定的。 这种能接受非固定个数参数的函数就是可变参数函数 怎么实现呢&#xff1f;就要用到 initializer_list 标准库类型 该类型能够使用的前提条件是&#xff1a;所有的实参类型相同。 二&#xff0c;initializer_list(初始化列…

电阻(二):希尔伯特(Hilbert)曲线

1、Hilbert简介 希尔伯特曲线是一种能在 2D平面完美填充正方形的曲线&#xff0c;连续且稳定&#xff08;当细分足够小时&#xff0c;线构成面&#xff09;而又不可导的曲线。只要恰当选择函数&#xff0c;画出一条连续的参数曲线&#xff0c;当参数 t 在 [0、1 ] 区间取值时&a…

ESP32-Cam学习(2)——PC实时显示摄像头画面

具体代码和操作过程见&#xff1a; 3. 实时显示摄像头画面 (itprojects.cn)https://doc.itprojects.cn/0006.zhishi.esp32/02.doc/index.html#/e03.showvideo我主要记录一下我在复现的过程中&#xff0c;遇到的问题以及解决方法。 1.安装第三方库 首先电脑端的代码需要用pych…

备战蓝桥杯---动态规划(入门3之子串问题)

本专题再介绍几种经典的字串问题。 这是一个两个不重叠字串和的问题&#xff0c;我们只要去枚举分界点c即可&#xff0c;我们不妨让c作为右区间的左边界&#xff0c;然后求[1,c)上的单个字串和并用max数组维护。对于右边&#xff0c;我们只要反向求单个字串和然后选左边界为c的…

到底什么是哈希值,哈希值到底是怎么生成的,有什么用?

哈希值&#xff0c;即HASH值&#xff0c;通常用一个短的随机字母和数位组成的字串来代表&#xff0c;是一组任意长度的输入信息通过哈希算法得到的“数据指纹”&#xff0c;即进行加密运算得到的一组二进制值。因为电脑在底层机器码是采用二进位的模式&#xff0c;因此通过哈希…

java中x++和++x的区别,执行后x的值是多少

在Java和C等编程语言中&#xff0c;x 和 x 都是用来对变量 x 进行自增操作的表达式&#xff0c;它们的主要区别在于自增操作发生的时机以及返回值&#xff1a; 后置递增运算符 x&#xff1a; 先使用当前 x 的值进行表达式计算&#xff0c;然后将 x 的值加 1。 执行后的 x 值为…

django连接本地数据库并执行增删改查

1&#xff0c;首先需要将本地数据库的表同步到django的models.py文件 py manage.py inspectdb tb_books tb_heros > demo001/models.py 2&#xff0c;同步成功后models.py会根据每张表映射出不同的类 models.py文件根据数据库表映射出对应的类 3&#xff0c;然后根据不同…

初识 Rust 语言

目录 前言一、Rust 的背景二、Rust的特性三、部署开发环境&#xff0c;编写一个简单demo1、在ubuntu 20.04部署环境2、编写demo测试 四、如何看待Linux内核引入Rust 前言 自Linux 6.1起&#xff0c;初始的Rust基础设施被添加到Linux内核中。此后为了使内核驱动程序能够用Rust编…

应如何看待用AI写论文一事? AI写论文有助科研还是助长作弊?

自大语言模型问世后&#xff0c;许多高校学生都在悄悄利用ChatGPT等AI&#xff08;人工智能&#xff09;写作软件代写论文&#xff0c;或者用AI辅助论文写作&#xff0c;如罗列提纲、润色语言、降低重复率等。 国内类似ChatGPT的AI写作软件并不少见。在各大等网站上&#xff0…

SpringBoot 打成jar包后如何获取jar包Resouces下的文件

获取resouces下的文件使用以下代码即可读取&#xff0c;如果需要变成file传入其他的方法中&#xff0c;需要创建临时文件将输入流文件 复制到 临时文件中&#xff0c;并传入相关方法&#xff0c;最后删除临时文件即可。不能通过ClassPathResouce对象直接获取 文件File ClassPa…

管理员分级管控三大模式,提高企业内部管理效率

随着公司规模的不断扩大和部门的持续增加&#xff0c;权限管理问题日益凸显。每当新员工入职&#xff0c;都需要经过一系列繁琐的步骤来为其匹配相应的权限。然而&#xff0c;这种传统的、基于手动更新的管理方式不仅效率低下、安全风险大&#xff0c;给企业带来了巨大的数据安…

echats 时间直方图示例

需求背景 某订单有N个定时任务&#xff0c;每个任务的执行时间已经确定&#xff0c;希望直观的查看该订单的任务执行趋势 查询SQL&#xff1a; select UNIX_TIMESTAMP(DATE_FORMAT(exec_time,%Y-%m-%d %H:%i)) execTime, count(*) from order_detail_task where order_no 2…

LeetCode--2388. 将表中的空值更改为前一个值

文章目录 1 题目描述2 测试用例3 解题思路 1 题目描述 表: CoffeeShop ---------------------- | Column Name | Type | ---------------------- | id | int | | drink | varchar | ----------------------id 是该表的主键&#xff08;具有唯一值的列&…

Jmeter教程-JMeter 环境安装及配置

Jmeter教程 JMeter 环境安装及配置 在使用 JMeter 之前&#xff0c;需要配置相应的环境&#xff0c;包括安装 JDK 和获取 JMeter ZIP 包。 安装JDK 1.JDK下载 示例环境为Windows11环境&#xff0c;读者应根据实际环境下载JDK的安装包。 JDK下载地址&#xff1a; Java21 下载 …

【Linux】软件包管理器 yum | vim编辑器

前言: 软件包管理器 yum和vim编辑器讲解 文章目录 软件包管理器 yum编辑器-vim四种模式普通模式批量化注释和批量化去注释末行模式临时文件 软件包管理器 yum yum&#xff08;Yellowdog Updater, Modified&#xff09;是一个在基于 RPM&#xff08;管理软件包的格式和工具集合&…

如何将多张图片变成一张?一个工具在线分享

如何将多张图片变成一张gif动图&#xff1f;现在gif动图非常受大家的欢迎我们想要将自己手中的多张图片变成一张gif动图时应该怎么制作呢&#xff1f;通过使用在线图片合成&#xff08;https://www.gif.cn/&#xff09;工具&#xff0c;不需要下载软件&#xff0c;手机、pc均可…

(01)Hive的相关概念——架构、数据存储、读写文件机制

目录 一、架构及组件介绍 1.1 Hive整体架构 1.2 Hive组件 1.3 Hive数据模型&#xff08;Data Model&#xff09; 1.3.1 Databases 1.3.2 Tables 1.3.3 Partitions 1.3.4 Buckets 二、Hive读写文件机制 2.1 SerDe 作用 2.2 Hive读写文件流程 2.2.1 读取文件的过程 …

Pinia 官网速通

前言&#xff1a;参考 Pinia 中文文档&#xff0c;在 Vue3 配合 ts 中的使用。 一&#xff1a;介绍 1. 什么是 Pinia Pinia 是 Vue 的存储库&#xff0c;允许跨组件/页面共享状态。 1.1. 为什么要使用 Pinia&#xff1f; 热模块更换、保持任何现有状态、使用插件扩展 Pinia …