大屏联动竟如此简单???

在迅猛发展的信息时代,大屏展示已经广泛应用于通讯、电力、军队指挥机构, 在提供共享信息、决策支持、态势显示等方面发挥着重要作用。在这些光鲜、绚丽、庞大的解决方案背后,其实是由一个个小而又实用的技术细节实现来支撑的,比如:大屏组件间的联动

对的,你是不是已经知道接下来小编要介绍些什么了,那我们就开始吧

小编今天就是要带大家 get 一下【润乾报表】中怎样轻松搞定大屏组件间的联动效果。实例效果图如下所示:

当我们点击地图中某个的地区时,右侧仪表盘和柱形图随之对应显示该地区的数据值。

小伙伴们,注意啦…..

要实现这个大屏的效果,我们只需要如下 1,2,3 步:

首先(第一步),定义好各组件,如下图所示,分别采用 echart 的地图、仪表盘、柱线图实现。

其次(第二步),报表组件进行大屏布局。

  1. 报表工具中【文件】–【新建报表组】;
  2. 引入报表组件如下图所示

3. 进行报表组件布局如下图所示

Ps: 此处布局的时候需要根据需要控制合并单元格,组件自适应方式,及各个组件模块宽高等。

然后(第三步),设置组件间的联动。

也就是前面说的“点击地图中对应的地区,右侧仪表盘和柱形图随之对应显示该地区的数据值”。

1. 打开地图组件报表,在 js 代码末尾部分添加超链接钻取操作代码,如下图所示

注:此实例中该处传递的是城市。

2. 打开仪表盘组件报表,添加参数,接收地图组件传递的参数值并根据参数值对数据进行筛选。

此步需做两处修改分别是:

2.1 定义报表参数,如下图所示:

其中

参数 arg1 为普通参数,负责接收地图组件传递过来的城市。

参数 arg2 为动态参数,负责根据 arg1 的城市匹配对应的地区,供后续数据过滤使用,表达式为:

if(@arg1==“山东” || @arg1==“江苏” || @arg1==“安徽” || @arg1==“浙江” || @arg1==“福建” || @arg1==“上海”,“华东”,@arg1==“广东” || @arg1==“广西” || @arg1==“海南”,“华南”,@arg1==“湖北” || @arg1==“湖南” || @arg1==“河南” || @arg1==“江西”,“华中”,@arg1==“北京” || @arg1==“天津” || @arg1==“河北” || @arg1==“山西” || @arg1==“内蒙古”,“华北”,@arg1==“宁夏” || @arg1==“新疆” || @arg1==“青海” || @arg1==“陕西” || @arg1==“甘肃”,“西北”,@arg1==“四川” || @arg1==“云南” || @arg1==“贵州” || @arg1==“西藏” || @arg1==“重庆”,“西南”,@arg1==“辽宁” || @arg1==“吉林” || @arg1==“黑龙江”,“东北”,@arg1==“台湾” || @arg1==“香港” || @arg1==“澳门”,“台港澳”)

2.2 定义数据集参数,如下图所示:

这些操作完成后,保存,发布,大屏联动完美实现!

注:柱形图与地图的链接设置同上。

【技术要点】

大屏组件间的联动实现方法:

myChart.on(‘click’,function(param){dashboardLink(‘board.jsp?board= 联动组件报表.rpx& 参数名 =’+ 参数值 +‘‘,‘item2’); });

至此,小编自 (嘚) 豪(瑟)地说大屏报表联动已经完美实现了,是不是 so easy? 没想到令人头疼的大屏各区块间联动能这么轻轻松松搞定吧,惊不惊喜?意不意外?是不是很想动手试试?那就抓紧吧 come on!

作者:IBelieve

链接:http://c.raqsoft.com.cn/article/1535422080292?r=IBelieve

来源:乾学院

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文地址:https://www.cnblogs.com/IBelieve002/p/9706536.html

时间: 2024-10-12 01:02:47

大屏联动竟如此简单???的相关文章

如何做大屏数据可视化设计?

文章结构及思维导图: 一.基础概念 1. 什么是数据可视化 把相对复杂.抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应用. 在当前新技术支持下,数据可视化除了"可视",还可有可交流.可互动的特点.数据可视化的本质是数据空间到图形空间的映射,是抽象数据的具象表达. 数据可视化作品<launchit> 作者:Shane Mielke 作者写了本书,地图上显示了世界各地读者的

简单几步教你如何将手机投屏到电视,1秒小屏变大屏

不知道大家有没有一种手机看电影,看视频,屏幕限制太大,总觉得好像少了点东西? 修姐,就是!总是赶紧我好像少看了一些画面,让你瞬间体会满屏的效果! 简单几步教你如何将手机投屏到电视,1秒小屏变大屏!高中之前一直看的电视,投影电影等:大学也是躺在宿舍用电脑刷剧:演变到现在基本上都是手机刷,电影院也是很少跑.可是手机屏幕还是太小了,很多画面看着总感觉不够震撼,少点感官需求! 但是把手机上的画面投到电视上,不论是看剧还是打游戏,那个体验一定是很爽!既享受到了手机的丰富资源和便利,又可以享受电视高清大屏的

开源|Davinci用户体验:你离数据可视精美大屏只差一个Davinci!

导读:同比和环比是衡量企业某个数据周期性增长速度变化的重要指标,但是一味的看数据,我们很难对增长率的大小做出比较,这个时候就需要可视化工具来帮助我们.小编这次又"编造"了另外一组数据,利用Moonbox写出SQL求同比环比增长率,最后借用Davinci展示出来.具体请看正文~ Davinci介绍:Davinci是一个DVAAS(Data Visualization as a Service)平台解决方案.Davinci面向业务人员/数据工程师/数据分析师/数据科学家,致力于提供一站式数

Bootstrap基础7(标签、徽章、大屏展播、页面标题、缩略图、进度条、面板、折叠效果)

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>标签.徽章.

高端硬件+大屏运营,乐视超级电视如何成为终端流量入口?

近期,中国电子视像行业协会与奥维云网(AVC)联合发布2017年一季度中国彩电市场总结报告,报告显示,2017年彩电需求已从数量增长阶段进入质量提升阶段,市场呈现尺寸升级.功能升级.高端需求三大趋势,其中,智能化大尺寸超轻薄电视更受消费者追捧. 据奥维云网(AVC)数据显示,一季度中小尺寸(50英寸以下)产品的市场占有率较去年同期下降了8.7个百分点:大尺寸(55英寸以上)产品的市场占有率高达36.4%,较去年同期上升了9.7个百分点,其中55寸上升了6.8个百分点,且2017年第一季度智能电视

【前端优化之渲染优化】大屏android手机动画丢帧的背后

前言 上周我与阿里的宇果有一次技术的交流,然后对天猫H5站点做了一些浅层次的分析,后面点时间基本天天都会有联系,中途聊了一些技术细节.聊了双方团队在干什么,最后聊到了前端优化.因为我本身参与了几次携程H5站点的优化,在这方面有一些心得,但是与宇果交流的过程中发现我们在优化的时候忽略了一些细节. 携程做优化的时候整个重心基本放到了尺寸的缩减,和宇果的交流过程中他提出了渲染优化,其实渲染优化无非是减少回流,对于减少回流我们也有一些概念,我一直认为这个事情应该业务开发关注而不是框架关注(事实上框架也无

非常复杂,上双11数据大屏背后的秘密:大规模流式增量计算及应用

回顾大数据技术领域大事件,最早可追溯到06年Hadoop的正式启动,而环顾四下,围绕着数据库及数据处理引擎,业内充斥着各种各样的大数据技术.这是个技术人的好时代,仅数据库领域热门DB就有300+,围绕着Hadoop生态圈的大数据处理技术更是繁花似锦.在云栖社区2017在线技术峰会大数据技术峰会上,阿里云大数据计算平台架构师钱正平做了题为<大规模流式增量计算及应用>的分享,钱正平结合阿里巴巴真实的业务场景为大家分享了流式增量计算编程方面的挑战和当前的解决方案. 首先从理解什么是数据流开始今天的分

第六章 大数据,6.3 突破传统,4k大屏的沉浸式体验(作者: 彦川、小丛)

6.3 突破传统,4k大屏的沉浸式体验 前言 能够在 4K 的页面上表演,对设计师和前端开发来说,即是机会也是挑战,我们可以有更大的空间设计宏观的场景,炫酷的转场,让观众感受影院式视觉体验,但是,又必须面对因为画布变大带来的性能问题,以及绞尽脑汁实现很多天马行空的的想法.下面是这次双11媒体大屏开发中我们的一些设计和思路. 1. 3D动感跑道 当逍遥子零点倒数5,4,3,2,1,0!激昂音乐奏起,媒体中心大屏幕跳跃出一个动感十足的页面,黄橙橙的 GMV 数字蹭蹭往上长,跳跃的翻牌器下有个不断向前

iPhone6/6 Plus兩款大屏智能機

蘋果終於順應時代潮流,於今年推出了iPhone6/6 Plus兩款大屏智能機.但很快就有人開始懷念老款iPhone的“一手掌控”,畢竟不是所有人都有一雙大手.不過近期就有傳言稱,蘋果將於明年重新推出一款4寸螢幕的新品,以迎合小手用戶的需求. 據國外科技媒體PC Mag報導女子泰拳,著名金融服務公司柯文(Cowen & Company)本周向投資者提交的報告中顯示,蘋果在即將到來的2015年可能會發佈三款新品,包括4.7寸螢幕的iPhone6S.5.5英寸的iPhone6S Plus和一部新的4寸