解决Ruoyi单体版本集成Echarts多图表时在Tab模式下不展示问题

这篇具有很好参考价值的文章主要介绍了解决Ruoyi单体版本集成Echarts多图表时在Tab模式下不展示问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

背景

一、Tab拆分后无法展示

1、环境简介

 2、原始报表功能说明

 3、tab切分遇到的问题

 二、问题分析及解决

1、问题分析

2、问题解决

3、初始化时图表渲染

4、Tab切换时重渲

 总结


背景

        最近在使用ruoyi的单体化版本进行Echarts多图表展示时遇到一个问题,ruoyi单体化版本默认提供的Demo是所有图表都在一个页面中进行展示。如果实际项目中,您也只需要处理这种需求就不会有问题了。但是,我们的业主对于整体报表的展示数量达到了30个,摆放在一个页面进行集中展示,显然会令界面杂乱无章。因此为了区分不同主题的报表,选用Tab的方式进行页面展示。然后进行页面设计和布局后发现,采用tab后,echarts的图表在切换时不能正常展示了。

        本文重点讲解在Ruoyi的单体化版本中,将echarts图表放置到tab中后,界面进行tab切换时,图表无法正常展示的问题,以及如何去解决这些问题。希望本文可以帮助同样在使用Ruoyi单体架构开发Echarts的应用的朋友们来避免这些问题,提供一种解决思路。如果更好的解决办法,欢迎大家在评论区留言告知,十分感谢。

一、Tab拆分后无法展示

1、环境简介

        这里简单介绍一下Ruoyi的单体框架,感兴趣的朋友可以在ruoyi的官网上进行下载,clone代码到本地进行调试。Ruoyi单体化架构采用的前后端集中式开发的模式,并没有采用前后端分离模式,这种模式虽然没有分离前后端,在一般的后台管理应用和开发人员欠缺的情况下,是一种很好的开发架构。适合企业发展的架构才是好架构,关于架构这里不过多叙述。

        Ruoyi的前端(有关于界面展示这一端姑且都叫前端吧),采用的主要技术有:Thymeleaf、Jquery、Bootstrap、Ztree、Layui、JsonView等等。在图表展示这块,采用的Echarts,具体的版本是4.2.,主要采用的前端组件如下所示:

echarts不显示,工作拾遗,echarts,Ruoyi集成echarts

 2、原始报表功能说明

echarts不显示,工作拾遗,echarts,Ruoyi集成echarts

         通过以上的界面可以看到,界面中所有的图表都是采用一个界面进行展示的。为了满足在背景中提到的tab展示情况,我们期待变成下面的界面,通过tab页面对功能进行主题拆分。

echarts不显示,工作拾遗,echarts,Ruoyi集成echarts

 3、tab切分遇到的问题

        首先我们在原来的echarts.html页面中引入tab组件,进行标签页改造扩展。关键代码如下:

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 第一个选项卡</a>
  </li>
  <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">第二个选项卡</a>
  </li>
  <li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false">第三个选项卡</a>
  </li>
</ul>
<div class="tab-content">
     <div id="tab-1" class="tab-pane active">
     </div>
     <div id="tab-2" class="tab-pane">
     </div>
     <div id="tab-3" class="tab-pane">
     </div>
</div>

        在此基础上将Echarts相应的报表进行合理的拆分,似乎一切都在往其中中的美好进一步发展。可现实会让人意想不到。先来看一下第一个Tab效果:

echarts不显示,工作拾遗,echarts,Ruoyi集成echarts

         这个效果看起来也还不错,先别急,点击到第二个tab页的时候,会惊奇的发现,图表居然不见了,是不是很奇怪,同样点击第三个选项卡也同样存在这个问题。

echarts不显示,工作拾遗,echarts,Ruoyi集成echarts

 二、问题分析及解决

1、问题分析

        通常如果页面空白,我们的第一反应就是打开开发者模式,看一下界面是否有报错信息。根据报错信息,我们可以进行按图索骥。这里我们依然采用这种模式。打开Chrome浏览器的调试模式,观察控制台。

echarts不显示,工作拾遗,echarts,Ruoyi集成echarts

         您会发现,控制台真的没有一点错误提示,甚至连警告都没有。这是不是要崩溃了,图表究竟去哪了。

        此时,如果各位朋友将浏览器窗口放大或者缩小,或者将控制台窗口的高度变高,会发现,图表居然出来了,细心的朋友一定发现了什么,在窗口大小发生变化后,图表出来了。

echarts不显示,工作拾遗,echarts,Ruoyi集成echarts

         当我们知道了页面发生变化可以进行图表重渲时,就大致明白了问题的所在,图表的渲染问题。由于bootstrap的响应式设计,tab页在切换时,并没有直接给图表所在的div设置了高度,在tab切换后才进行高度设置,但图表没有高度因此不能正常展示。

2、问题解决

        知道了问题的根源所在,就好解决问题了。只需要在两个地方进行改造,在页面加载时对所有的图表进行resize重绘,在tab页切换时也进行图表resize重绘即可。要想实现图表重绘,需要将所有的图表实例都注册到数组中,通过数组循环遍历的方式,实现重绘。如果从性能考虑,也可以不必遍历所有,只将对应的Tab页的图表进行重绘即可(本文暂且不讲这种模式,有兴趣的朋友可以进行独立扩展)。要想实现遍历所有,首先必须要定义一个集合,用于保存图表对象。

var charts = new Array();

在初始化图表后,将具体的图表对象添加到数组中,

lineChart.setOption(lineoption);
$(window).resize(lineChart.resize);
charts.push(lineChart);

3、初始化时图表渲染

$(window).resize(function() {
	for(var i = 0; i < charts.length; i++) {
	    charts[i].resize();
	 }
});
	        

4、Tab切换时重渲

        上面的例子中定义页面加载时图表渲染,在tab切换时依然需要重渲,因此还需要定义切换是事件。

//解决tab切换不显示问题 在加载窗口后重新渲染。
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
	for(var i = 0; i < charts.length; i++) {
	    charts[i].resize();
    }
});

        参考的Javascript代码如下:

<script type="text/javascript">
    
    	var charts = new Array();
    
	    $(function () {
	        var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
	        var lineoption = {
	            title : {
	                text: '未来一周气温变化'
	            },
	            tooltip : {
	                trigger: 'axis'
	            },
	            legend: {
	                data:['最高气温','最低气温']
	            },
	            grid:{
	                x:40,
	                x2:40,
	                y2:24
	            },
	            calculable : true,
	            xAxis : [
	                {
	                    type : 'category',
	                    boundaryGap : false,
	                    data : ['周一','周二','周三','周四','周五','周六','周日']
	                }
	            ],
	            yAxis : [
	                {
	                    type : 'value',
	                    axisLabel : {
	                        formatter: '{value} °C'
	                    }
	                }
	            ],
	            series : [
	                {
	                    name:'最高气温',
	                    type:'line',
	                    data:[11, 11, 15, 13, 12, 13, 10],
	                    markPoint : {
	                        data : [
	                            {type : 'max', name: '最大值'},
	                            {type : 'min', name: '最小值'}
	                        ]
	                    },
	                    markLine : {
	                        data : [
	                            {type : 'average', name: '平均值'}
	                        ]
	                    }
	                },
	                {
	                    name:'最低气温',
	                    type:'line',
	                    data:[1, -2, 2, 5, 3, 2, 0],
	                    markPoint : {
	                        data : [
	                            {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
	                        ]
	                    },
	                    markLine : {
	                        data : [
	                            {type : 'average', name : '平均值'}
	                        ]
	                    }
	                }
	            ]
	        };
	        lineChart.setOption(lineoption);
	        $(window).resize(lineChart.resize);
	        charts.push(lineChart);
	        
	      //console.log(charts);//打印显示是否添加进去
	        $(window).resize(function() {
	            for(var i = 0; i < charts.length; i++) {
	                charts[i].resize();
	            }
	        });
	        
	        //data-toggle="pill还是data-toggle="tab" 根据前面所用标签页的不同来选择。我使用的是data-toggle="tab"。
	        //解决tab切换不显示问题 在加载窗口后重新渲染。
	        $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
	            for(var i = 0; i < charts.length; i++) {
	                charts[i].resize();
	            }
	        });
	
	    });
    </script>

        经过以上代码改造可以发现,在界面中使用tab切换变得非常顺畅,没有出现图表信息不能展示,功能一切正常。

echarts不显示,工作拾遗,echarts,Ruoyi集成echarts

 总结

        至此,本文的问题得到解决。本文重点讲解在Ruoyi的单体化版本中,将echarts图表放置到tab中后,界面进行tab切换时,图表无法正常展示的问题,以及如何去解决这些问题。希望本文可以帮助同样在使用Ruoyi单体架构开发Echarts的应用的朋友们来避免这些问题,提供一种解决思路。

参考资料链接:Bootstrap标签页(Tab)插件切换echarts不显示问题的解决文章来源地址https://www.toymoban.com/news/detail-550016.html

到了这里,关于解决Ruoyi单体版本集成Echarts多图表时在Tab模式下不展示问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【React】版本正确安装echarts-liquidfill(水球图表)包引入不成功问题

    目标效果图: 安装: npm install echarts npm install echarts-liquidfill 引入: 需要 注意 (版本问题): echarts5.x 版本 适用于 echarts-liquidfill3 echarts4.x 版本 适用于 echarts-liquidfill2 报错: 1. 2. 错误原因: 1. echarts 与 echarts-liquidfill 版本不兼容 2. echarts-liquidfill 插件安装成功,需重启项目(看

    2024年02月15日
    浏览(35)
  • 【ECharts系列】ECharts 图表渲染问题&解决方案

    echats 渲染,第一次的时候只出现Y轴数值,不出现X轴数值,切换下页面,X轴数值就能出现。  如果在使用ECharts渲染时,X轴数值只在切换页面后才出现,可能是因为ECharts在初始化时没有正确计算X轴的尺寸。 以下是可能的原因和解决方法: 数据格式不正确 没有设置X轴的类型

    2024年02月12日
    浏览(47)
  • 解决Echarts图表未占满容器的问题

    第一种情况: canva画布本身就比容器小 原因:div还没有创建出来echarts就已经加载了 解决方法:加延迟 第二种情况: canva画布与容器大小一致 通过grid调整

    2024年02月11日
    浏览(42)
  • echarts清空数据不能使用clear,完美解决清空图表

    提示:这里描述具体问题: 在每次显示的echarts图表时,有时候需要将之前的数据删除,在这个时候不能用clear,用这个删除会导致整个图表都删掉了,还得重新初始化。 提示:这里填写问题的分析:clear是将整个图表清除,而不是清除数据。 提示:这里填写该问题的具体解

    2024年02月14日
    浏览(43)
  • 解决微信小程序Echarts图表层级过高的方案

    在微信小程序中使用Echarts图表时,有时会遇到图表层级过高的问题。这可能导致图表无法正常显示或部分内容被遮挡。本文将介绍一种解决方案,通过修改Echarts图表的样式和配置,可以有效解决这个问题。 解决方案如下: 检查图表容器的样式 首先,我们需要检查图表容器

    2024年02月03日
    浏览(49)
  • Angular-集成-Typescript-版本-Echarts-(附代码),字节跳动Android面试全套真题解析在互联网火了

    作者:老夏 来源:知乎https://zhuanlan.zhihu.com/p/139971649 关注我的专栏,定期分享更多技术,工作经验还有面试真题等资料。近日更新的资料,需要的自取《Android架构视频+BATJ面试专题PDF+学习笔记》 由于本人之前在开发数据分析,机器学习类产品的时候经常用到百度开源的 ec

    2024年04月10日
    浏览(47)
  • uniapp - 微信小程序端引入 Echarts 图表及使用详细教程,简单快速的解决方案(拒绝复杂的过程,附带详细的使用示例保姆级教程)

    现在各种平台的文章都太乱了,基本上实测无效。。。 帮你在uniapp开发中,微信小程序平台端使用 echats 图表的详细教程,快速并且简单轻松搞定。 下面是最后的运行结果,随便用的一个图表进行展示,图表更多用法详见文档!

    2024年02月10日
    浏览(50)
  • 解决多模块内核心模块有接口打包成jar后被依赖并调用遇到的问题(springcloud集成ruoyi.quartz)

    项目准备开发个新功能,刚好很喜欢ruoyi写的任务调度,因此想到了集成ruoyi.quartz模块 ,遇到了很多问题: 首先因为 ruoyi.quartz模块依赖了ruoyi.common模块,因此第一步我需要把common模块一部分依赖项复制到了quartz模块内(复制的内容就是common文件夹内的,未用到的部门被我剔除

    2024年02月12日
    浏览(47)
  • vue-echarts踩坑,本地开发可以渲染echarts图表,线上环境图表渲染不出来

    main.js 全局注册v-chart组件 在页面中使用 如上图,我开始写的静态数据,在data中定义了chartOption1:{…配置项…}, 在接口数据返回之后,更新了配置项,在本地开发环境可以正常渲染。但是线上环境出不来,也不报错,接口数据一切正常。 解决办法: 无奈最后没有使用‘vue-e

    2024年01月18日
    浏览(51)
  • Echarts实现3d图表

    注意:在使用一些3d类的echart的时候会发现报下面的错误  这个是因为echarts引用3d图形需要引入echarts和echarts-gl (这里我们可能会遗漏掉引入echarts-gl) 要注意不同版本echarts对应不同版本echarts-gl 【如果版本不匹配就重新安装对应版版本】

    2024年02月16日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包