数据可视化大屏如何获取数据

当需要展示自家业务数据或者其他数据到可视化大屏上的时候，我们需要一些php的开发。

登录上云主机后，先创建目录

  1. mkdir -p /data/urlos/dev-mounts/master/plugin/admin/user/bigData/v0_1_0

然后在这创建的目录下，创建两个文件：hookLoader.php、_info.json

hookLoader.php

  1. <?php
  2. namespace plugin\admin\user\bigData\v0_1_0;
  4.    use _common\lib\BaseHook as parentHook;
  6.    class hookLoader extends parentHook {
  7.      /**
  8.       * 大屏合并所需数据
  9.       * @param  [type] $plugin 格式为“插件名:插件版本”或者“插件类型:插件名:插件版本”，如：pluginName:v0_1_0, system:phpWebsites:v0_1_0
  10.       * @param  [type] $hook 插件钩子名称
  11.       * @param  [type] $vars  传入到钩子文件的变量
  12.       * @param string $pluginType 插件类型，共有以下3种插件类型：
  13.       *    system（系统插件目录）
  14.       *    official（官方插件目录）
  15.       *    user（用户插件目录，一般用于调试）
  16.       *    db（用户插件目录，稳定后的用户插件请移至数据库中）
  17.       * @param string $moduleName 模块名，如：admin
  18.       * @return array
  19.    */
  20.     public function bigDataMergeArrHandle($plugin, $hook, $vars, $pluginType, $moduleName) {
  21.       $bigDataArr = $vars['bigDataArr'];
  23.       #可对大数据进行修改后，再展示到大屏之上
  24.        #echo json_encode($bigDataArr);
  26.       $bigDataArr['leftRow1'] = $this->leftRow1DataFilter($bigDataArr['leftRow1']);
  28.       return $bigDataArr;
  29.     }
  31.      /**
  32.       * 左边第一行数据处理
  33.       * @param [type] $subDataArr
  34.       * @return array
  35.       */
  36.     public function leftRow1DataFilter($subDataArr) {
  37.       # do something...
  38.       return $subDataArr;
  39.  }
  40. }

hookLoader.php为插件模版，在此模版中进行数据接口的请求和返回的数据处理。

bigDataMergeArrHandle负责集中中处理数据接口返回的数据，重新赋值，然后返回新的$bigDataArr。

leftRow1DataFilter处理可视化大屏左边第一行图表组件的数据，返回给bigDataMergeArrHandle。

左边第一行图表组件的数据JSON格式：

  1. "leftRow1": [
  2.     {
  3.       //组件数据
  4.     },
  5.     {
  6.       // 组件数据
  7.     }
  8. ]

所以你可以像leftRow1DataFilter这样分开请求处理每一行图表组件的数据

整个数据可视化大屏默认图表组件数据JSON格式为（屏幕比例为32:9）：

  1. {
  2.   // 左边第一行
  3.   "leftRow1": [
  4.     {
  5.       //图表组件数据
  6.     },
  7.     {
  8.       // 图表组件数据
  9.     }
  10.   ],
  11.   // 左边第二行
  12.   "leftRow2": [
  13.     {
  14.       //图表组件数据
  15.     },
  16.     {
  17.       // 图表组件数据
  18.     }
  19.   ],
  20.   // 左边第三行
  21.   "leftRow3": [
  22.     {
  23.       //图表组件数据
  24.     },
  25.     {
  26.       // 图表组件数据
  27.     }
  28.   ],
  29.   // 中间
  30.   "middleArr": [
  31.     {
  32.       //图表组件数据
  33.     },
  34.     {
  35.       // 图表组件数据
  36.     }
  37.   ],
  38.   // 右边第一行
  39.   "rightRow1": [
  40.     {
  41.       //图表组件数据
  42.     },
  43.     {
  44.       // 图表组件数据
  45.     }
  46.   ],
  47.   // 右边第二行
  48.   "rightRow2": [
  49.     {
  50.       //图表组件数据
  51.     },
  52.     {
  53.       // 图表组件数据
  54.     }
  55.   ],
  56.   // 右边第三行
  57.   "rightRow3": [
  58.     {
  59.       //图表组件数据
  60.     }
  61.   ]
  62. }

这里的图表组件数据分为官方默认图表组件数据和扩展图表组件数据，

  • 官方默认图表组件数据格式，打开数据可视化大屏的链接，浏览器里查看开发者工具，切换到Network，查看ajax请求返回的数据： image-20200724163512028

  • 扩展图表组件数据请参考：http://demo.urlos.com:9968/?m=admin&c=bigData&a=componentList

    这里以饼图组件为例讲解：

    image-20200724164049250

    1. // 图表组件数据
    2. {
    3. // mark的值为组件名称
    4. "mark": "urlosPieChart",
    6. // 标题
    7. "title": "饼图", 
    9. // 饼图的私有数据
    10. "dataArr": [
    11. {
    12.  "arr": [
    13.    {
    14.      "value": 2320,
    15.      "legend": "手表",
    16.      "key": 0
    17.    },
    18.    {
    19.      "value": 1832,
    20.      "legend": "手镯",
    21.      "key": 1
    22.    },
    23.    {
    24.      "value": 1920,
    25.      "legend": "耳环",
    26.      "key": 2
    27.    }
    28.  ]
    29. }
    30. ],
    31. "unit": "件"
    32. }

其中“mark”、“title”是每个图表组件都有的。这里的“dataArr”是饼图的私有数据，可能在别的组件就没有此字段，其他组件请参考：http://demo.urlos.com:9968/?m=admin&c=bigData&a=componentList

_info.json

此文件为描述文件

  1. {
  2.   "description": "大数数展示插件",
  3.   "author": "URLOS Team",
  4.   "email": "service@urlos.com"
  5. }