数据可视化大屏的图表组件布局、样式等的配置

本章节主要讲述大屏的图表布局配置文件，数据大屏的主要布局分为左中右： image-20200724150640261

配置文件为：

  1. {
  2.     // 默认每一个画像的标题描述，在这属性里设置每个图表组件的标题
  3.     // 比如 这里的“swarm”是图表组件的名称
  4.     "defaultTitleArr": {
  5.         "swarm": {
  6.             "title": "集群性能"
  7.         },
  8.         "nodeHealth": {
  9.             "title": "主机健康"
  10.         },
  11.         "swarmNet": {
  12.             "title": "网络吞吐",
  13.             "subTitle": "集群内所有应用网络吞吐量"
  14.         },
  15.         "waf": {
  16.             "title": "网络攻击防护"
  17.         },
  18.         "dockerResource": {
  19.             "title": "资源占用"
  20.         },
  21.         "serviceRunDetail": {
  22.             "otherDetailTitle": "服务运行监控",
  23.             "dbTitle": "数据库监控"
  24.         },
  25.         "visitDetail": {
  26.             "title": "访问趋势"
  27.         },
  28.         "CHregion": {
  29.             "title": "国内区域访问"
  30.         },
  31.         "sepecialWebPv": {
  32.             "title": "热度态势"
  33.         },
  34.         "webAvgRequestTime": {
  35.             "title": "关键请求监控",
  36.             "subTitle": "平均时间"
  37.         },
  38.         "serviceHeal": {
  39.             "title": "健康监控"
  40.         },
  41.         "clientData": {
  42.             "title": "用户画像"
  43.         }
  44.     },
  46.     // 公共数据的缓存时间：120秒 ，0表示不缓存
  47.     "commonDataCacheInterval": 120,
  49.     // 服务的轮播间隔时间：5秒，必须大于0
  50.     "carouselInterval": 5,
  52.     //php为服务名，当前服务的大数据配置
  53.     "php": {
  54.         // 数据类型：值为1使用随机数据，值为2使用模拟数据，值为3使用真实数据
  55.         "dataType": 1,
  57.         // 主题设置
  58.         "theme": "default", //可选主题：'default', 'theme-cyan', 'theme-red', 'theme-green', 'theme-purple'
  60.         // 数据间隔时间：300（单位秒，统计300秒内的数据变化）
  61.         "dataInterval": 300,
  63.         // 数据缓存时间：120秒 ，0表示不缓存
  64.         "dataCacheInterval": 120,
  66.         // 当前服务的各个画像的标题描述，配置跟“defaultTitleArr”一样
  67.         // 这里的配置会覆盖defaultTitleArr中的配置
  68.         "titleArr": {},
  70.         // 企业名称
  71.         "company": "广州市万岁云计算有限公司",
  73.         //服务名
  74.         "systemName": "URLOS大数据平台",
  76.         // 大屏可视化图表组件布局，32：9的默认设置
  77.         // 比如左边第一行的设置为：
  78.         // "leftRow1": ["swarm", "nodeHealth"]
  79.         // "swarm", "nodeHealth"为组件名称，表示左边第一行中第一列和第二列使用的组件
  80.         // 这里所展示的组件是官方默认所有组件，更多组件请查看：http://demo.urlos.com:9968/?m=admin&c=bigData&a=componentList
  81.         "dataLayOutArr": {
  82.             // 左边第一行的组件
  83.             "leftRow1": ["swarm","nodeHealth"],
  84.             // 左边第二行的组件
  85.             "leftRow2": ["swarmNet","waf"],
  86.             // 左边第三行的组件
  87.             "leftRow3": ["dockerResource","serviceRunDetail"],
  88.             // 中间的组件
  89.             "middleArr": ["CHregion","visitDetail"],
  90.             // 右边第一行的组件
  91.             "rightRow1": ["sepecialWebPv"],
  92.             // 右边第二行的组件
  93.             "rightRow2": ["serviceHeal","webAvgRequestTime"],
  94.             // 右边第三行的组件
  95.             "rightRow3": ["clientData"]
  96.         }
  97.     }
  98. }

ssh登录云主机，在安装URLOS并启用数据数据后，在/data/urlos/master-config/中创建bigData.jsonc文件，并填入以上配置。