大屏展现

可视化大屏展示,灵活自定义,为管理提供预测和决策支持

开发大屏,我们通常借助mashup功能进行页面整体框架结构的搭建,将观数台可视化图形嵌入到我们的大屏页面中,最后对整个大屏进行自适应调整,以适应不同设备屏幕。

构建页面框架

  • 1、登录观数台 (以单机版为例)
  • 2、选择右上角符号,选择Dev-hub,开发者页面进入
  • 3、选择页面中央的mashup菜单栏下的加号,创建一个mashup大屏页面框架
  • 4、选择Basic模版,创建一个最基本的大屏模板

基础页面搭建

在框架中,可以看到有几个文件。其中后缀名为.html的文件就是页面结构文件,在这里可以书写基本的html代码,从而搭建需要的大屏页面。后缀名为.css的文件,则是页面中所需要用到的CSS样式表,在这里可以书写一些相关的样式配置,对页面进行美化。后缀名为.js的文件,则是页面中所需要用的js功能文件。在嵌入观数台的可视化图形的时候,是需要使用到这个文件的。

  • 1、html
    在html文件中,需要为可视化图形添加一个承载图形的父盒子。盒子主要有两个属性,id和class。id是每一个可视化图形在页面中的唯一标识,class则是承载图形的盒子的样式类名,默认class类名是“qvplaceholde”;只有这个类名下,在进行拖拽可视化图形的时候,才会有拖拽区域的显示。
  • 2、CSS
    CSS文件,可根据具体需求,去定义一些相关的样式。在修改sense官方样式的时候需要注意css选择器层级的问题
  • 3、JS
    JS文件,可根据具体需求,去写一些关于页面交互的执行方法,在创建mashup模板时会自动创建js文件的配置项,只需要在里边写具体的callback函数按需求加载执行

可视化图形嵌入

  • 1、选择preview选项,可以对搭建的HTML页面进行预览,同时,对页面中需要嵌入可视化图形进行拖拽准备。
  • 2、在右上角有一个select an app下拉框选项。在这里,可以选择观数台已经做好的,需要放在大屏页面中展示的相关报表。
  • 3、选择报表后,Sheets and objects下面会显示出报表中具体的可视化图形。
  • 4、点击之后,进行可视化图形的查看。
  • 5、将需要展示在大屏页面的可视化图形,以拖拽的方式,拖放到可拖拽区域中。
  • 6、此时,页面中会出现我们的可视化图形。
  • 7、打开js文件,其中自动添加了几行代码。其中openAPP方法,是页面加载时,对需要展示的报表进行读取操作。app.getObject(domId, objId)方法,则是读取具体的可视化图形API。其有两个参数。第一个参数是可视化图形在HTML页面中的盒子ID,第二个参数是可视化图形在报表中的ID。
  • 8、选择右下角的View选项,则可以对大屏页面进行预览。其中地址栏中的地址,可以作为大屏页面的入口地址。

大屏页面自适应处理

通常会对整个页面采用百分比布局,让整个页面的布局可以适配多种设备。可以在CSS文件中写相关html结构样式;对html页面中的字体大小,则采用根节点的字体大小计算单位rem来做页面字体的自适应。通过对根节点html标签的字体大小进行设置,不同屏幕计算不同字体大小,使页面中的字体大小随着根节点html的字体大小的改变而改变。