企业数据可视化大屏用什么工具去实现?

发布网友 发布时间：2022-04-23 06:06

我来回答

共4个回答

懂视网 时间：2022-05-15 18:21

一、屏幕自适应

我这边只拿到设计师给到的1920*1080的设计图，但是说不一定是这个尺寸，目前不知道展示这个数据大屏的屏幕尺寸是多少，因此，只能做出自适应效果！如何做到自适应效果呢。想了几种方案，目前我用的方案是采用vh和vw单位来进行页面布局。关于这两个单位的一些介绍，我之前有篇文章写过，http://www.haorooms.com/post/css_unit_calc 。 这样就可以实现自适应布局了。

用vh和vw单位的好处

1、可以实现滚动轴出现，页面不闪动效果，代码如下：

@media screen and (min-width: 960px) { //之所以进行宽度判断，是因为移动端滚动轴不占宽度
 html {
 margin-left: calc(100vw - 100%);
 margin-right: 0;
 }}

自此，我们就不用再苦逼的计算滚动轴的宽度了，关于计算滚动轴的宽度，请点击

2、因为我是全屏的，不需要出现滚动轴，但是不同的缩放屏幕，有可能会出现滚动轴，可以用如下代码，取消滚动轴显示。

html {
 width:100vw;
 height:100vh;
 overflow:hidden;}

坏处

1、计算起来相对麻烦

2、在父级元素是定位的情况下，完全可以用百分比替代，百分比比VH和VW兼容性好。（我的数据大屏不需要很好的兼容性，因此选用了vh和vw）

二、数字和百分比滚动效果

关于数字滚动效果，我很久之前用过一个插件，但是这个使用图片进行的滚动，因为我很麻烦，我们目前完全可以用css3来进行数字滚动！

三、setTimeout每执行一次，时间增加一秒

这个应用比较多的是每隔一个随机数字，执行一段代码，相隔时间是不一样的！

我一开始用setInterval，但是发现每次执行的时间都是第一次执行的时间，那是因为setInterval被调用后，就会被加入到定时器执行队列中，等待绑定的函数被执行，也就是说设置的interval时间只会有效一次。那就改用了setTimeout，关于setTimeout，我之前文章也提及过！

执行一个随机数代码如下：

function runRandom(obj){
 var timeout=Math.round(Math.random()*1000+1000);
 clearTimeout(obj.randomTime);
 obj.randomTime=setTimeout(function timeoutFun(){
 //执行你的逻辑
 timeout=Math.round(Math.random()*1000+1000);
 obj.randomTime=setTimeout(timeoutFun,timeout);
 },timeout);}

我的部分代码如下：

flip:function(obj){
 var _this =this;
 clearTimeout(obj.flip);
 obj.flip=setTimeout(function timeoutFun(){
  if(_this.SwithIndex<5){
  $("#dataUpadteSwitch").find("li").eq(_this.SwithIndex).addClass("current").siblings().removeClass("current");
  _this.SwithIndex++;
  _this.initTime+=1000;//每执行一次增加1000毫秒
  // console.log(_this.initTime)
  //右上角百分比,速度快慢可以调整
  _this.baifenbiAnimate("loadingDatabfb",0,1,100,10+_this.SwithIndex*10);
  //右上角旋转动画，快慢可以调整-调整旋转速度变慢-推迟0.5s
  _this.routedSpeed((1+_this.SwithIndex/2)+"s");
  }else{
  _this.SwithIndex=0;//循环执行，执行5次之后从头开始执行
  _this.initTime=3000;//一开始是3000毫秒
  }
  obj.flip=setTimeout(timeoutFun,_this.initTime);
 },_this.initTime);}

四、echart 自动触发tooltip

数据大屏中很多都是自动触发的，没有鼠标交互，每隔几秒执行一次，我们用到了一个类似中国地图的表格，但是tooltip是自动触发的，每隔几秒更新一下数据，触发一次！

首先把tooltip下面的triggerOn设置为none,然后通过dispatchAction来触发，官方API解释比较模糊，其实很简单，代码如下：

myChart.dispatchAction({
 type: 'showTip',
 // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
 name: (convertData(obj.mapData.sort(function(a, b) {
  return b.value - a.value;
 }).slice(0, 1)))[0].name //获取最多数据的名字});

这样就可以自动触发了

五、用svg制作动态时钟

数据大屏上面需要有一个动态的时间，时间是跳动的，还需要一个时钟。我在这里共享一下我的代码：

html代码如下：

 <div id="nowtimes">
  <div class="parent">
   <svg height="200" width="200" viewBox="0 0 1000 1000">
   <path d="M978,500c0,263.99-214.01,478-478,478s-478-214.01-478-478,214.01-478,478-478,478,214.01,478,478zm-888.93,237.25,20.179-11.65m779.16-449.85l22.517-13m-8.18,8.18,11.65-20.18m449.85-779.16l13-22.517m-711.75,410.93h23.305m9.7,0h26m-885.43-237.25,20.179,11.65m779.16,449.85,22.517,13m-8.18-8.18l11.652,20.183m449.85,779.16,13,22.517m-237.25-885.43v23.305m0,9.7,0,26"/>
   <path d="M500,500,500,236" id="hour"/>
   <path d="M500,500,500,120" id="min" />
   <path d="M500,500,500,90" id="sec" />
   </svg>
  </div>
  <div class="tdtimes" id="tdtimes"></div>
  </div>

css代码如下：

/* 钟表样式*/svg {position: absolute;top: 10%; width: 100%; height: 80%;}path { stroke: #fff;stroke-linecap:round; stroke-width: 35;fill:none;}#sec { stroke: #fff; stroke-width: 20;}#min {stroke: #fff;stroke-width: 30;}#hour { stroke: #fff;stroke-width: 30;}#nowtimes{margin-top:7px;}#nowtimes .parent{width:30px;position:relative;height:30px;display: inline-block;vertical-align: middle;}.tdtimes{display: inline-block;font-size:.7vw;color:#979798;vertical-align: middle;}

js代码如下：

 setInterval(function() {
 function r(el, deg) {
 el.setAttribute('transform', 'rotate('+ deg +' 500 500)')
 }
 var d = new Date();
 r(sec, 6*d.getSeconds());
 r(min, 6*d.getMinutes());
 r(hour, 30*(d.getHours()%12) + d.getMinutes()/2);
 $("#tdtimes").html(d.getHours() +":" +d.getMinutes() +":" +d.getSeconds());
 }, 1000)

这样就完成了小时钟及右侧跳动时间的效果！

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

相关阅读：

怎样用css3做出图标效果

怎么用CSS3做出灯光照射显示文字动画

css3点击显示涟漪特效

热心网友 时间：2022-05-15 15:29

思迈特软件Smartbi的的分析工具就可以实现，全面的需求满足能力
。

大数据分析平台拥有全面的需求满足能力，无论你是哪种用户，在BI的哪个阶段流程，有什么需求场景都能得到满足。
1、全阶段：融合传统BI、自助BI、智能BI，满足BI定义所有阶段的需求。

2、全流程：提供数据连接、数据准备、数据分析、数据应用等全流程功能

3、全场景：提供复杂报表、数据可视化、自助探索分析、机器学习建模、预测分析、自然语言分析等全需求场景。

4、全用户：为数据角色提供数据处理、数据准备等功能，为分析角色提供数据分析相关功能，为管理决策人员提供资源发布、管理协同、社交协同、系统监控、权限管理等功能，实现“人尽其才”！

数据可视化大屏展示有没有用，来试试Smartbi就知道了,Smartbi产品功能设计全面，涵盖数据提取、数据管理、数据分析、数据共享四个环节，帮助客户从数据的角度描述业务现状，分析业务原因，预测业务趋势，推动业务变革。

思迈特软件Smartbi个人用户全功能模块长期免费试用
马上免费体验:Smartbi一站式大数据分析平台

热心网友 时间：2022-05-15 16:47

大屏数据可视化是以大屏为主要展示载体进行数据的可视化呈现。“大面积、炫酷动效、丰富色彩”，大屏易在观感上给人留下震撼印象，便于营造某些独特氛围。

可以选择 Hightopo，其自主研发了强大的基于 HTML5 的 2D、3D 渲染引擎，能为可视化提供丰富的展示效果。采用特有的设计，并沿用HT的响应式布局来进行划分排版，在无限放大和缩小图片的情况下依然能保持一致的精准度，可以适应不同分辨率的屏幕都不会模糊，实现完美的跨平台操控。拥有独特的主题风格设计，在各种比例下不失真，加上布局机制，解决了不同屏幕比例下的展示问题。

下方图片为搭建的国际会议中心数据可视化

数据可视化以直观、高度视觉冲击力的方式向受众揭示数据背后隐藏的规律，传达数据价值。大屏数据可视化在人口空间规划、土地规划等领域发挥了积极的作用，更宏观、直观的展示业务场景。

不同的动画会添加更多有趣的交互体验，一个舒适的面板交互，也必然离不开动画的实现。通过面板搭载数据的呈现，一方面数据的变动驱使动画交互来体现，另一方面动画交互依附在悬浮、点击以及双击等用户体验上来表现，从而达到用户视觉和体验的最大限度提升。

动画效果上的实现，可以匹配自己的需求在 Hightopo 原有的动画函数上进行封装，例如实现淡入淡出、裁剪、摇晃、旋转以及数值的跳动等实现效果，我们可以在动画的函数封装上下功夫。

而这些动画主要是通过封装了一个 setValue() 方法来设定动画效果实现的时候，通过属性参数变化的值设定动画运作的效果。其中通过一些参数值的传入，并且根据对 data 节点的类型判断来对应地去设定属性值：

请点击输入图片描述

data：动画执行的节点；

accessType：动画所涉及的属性类型；

name：属性名称；

value：数值的设定；

通过设定动画属性值的封装后，我们可以封装一些动画效果来调用以上 setValue() 的方法来实现许多动画效果。

系统整合打造了多种业务场景模板，覆盖各域各专业，全面支撑各行业业务运营分析、网络质量监控、重保运维等场景。


Hightopo可用于快速创建和部署，高度可定制化，并具有强大交互功能的拓扑图形及表盘图表等应用。

轻松构建现代化的，跨桌面和移动终端的企业应用，无需担忧跨平台兼容性，及触屏手势交互等棘手问题。

更关注于业务逻辑功能，不必将精力投入复杂 3D 渲染和数学等非业务核心的技术细节。

热心网友 时间：2022-05-15 18:22

数据可视化现市面上有非常成熟的图表控件，例Highstock、Highmapst等，有的显示屏公司本身就有自带的可视化功能。
以上希望能帮助到你