数据管理DMS提供灵活布局和丰富的自定义样式能力，并提供大量可视化组件和内置辅助图形，帮助您快速实现可视化大屏。

准备工作

本示例已提前创建student_courses表，并插入部分测试数据，SQL语句如下：
/** 创建表 **/
CREATE TABLE `student_courses` (
  `id` BIGINT(20) UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT '主键',
  `student_id` BIGINT(20) DEFAULT NULL COMMENT '学生ID',
  `course_id` BIGINT(20) DEFAULT NULL COMMENT '课程ID',
  `start_time` DATETIME DEFAULT NULL COMMENT '创建时间',
  `score` int(11) DEFAULT NULL COMMENT '考试成绩',
  KEY `idx_student_course` (`student_id`,`course_id`),
  KEY `idx_student_time` (`student_id`,`start_time`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='数据服务测试表';

/** 插入数据 **/
INSERT INTO `student_courses` VALUES (1,1,1,'2020-11-24 11:19:54',78);
INSERT INTO `student_courses` VALUES (2,1,2,'2020-11-24 05:51:36',68);
INSERT INTO `student_courses` VALUES (3,1,3,'2020-11-24 05:28:08',60);
INSERT INTO `student_courses` VALUES (4,2,1,'2020-11-24 07:21:17',67);
INSERT INTO `student_courses` VALUES (5,2,2,'2020-11-24 02:07:52',91);
INSERT INTO `student_courses` VALUES (6,2,3,'2020-11-24 10:35:35',94);
INSERT INTO `student_courses` VALUES (7,3,1,'2020-11-24 03:19:03',53);
INSERT INTO `student_courses` VALUES (8,3,2,'2020-11-24 08:19:18',94);
INSERT INTO `student_courses` VALUES (9,3,3,'2020-11-24 02:04:17',89);

操作流程

  1. 步骤一：配置数据集：基于指定数据库和SQL查询语句，产生数据集合。
  2. 步骤二：配置图表：基于数据集合，配置图表的样式。
  3. 步骤三：配置大屏：将图表添加至大屏中进行展示。

步骤一：配置数据集

  1. 登录数据管理DMS 5.0。
  2. 在顶部菜单栏中，选择集成与开发（DTS） > 数据应用 > 数据可视化（老）。
  3. 单击数据集页签，在该页面单击右上角的。
  4. 在编写SQL页配置参数，并单击执行。
    本示例仅介绍部分涉及到的参数，更多信息，请参见创建数据集。
    参数名说明
    名称（必填）数据集名称，本示例为POC。
    描述对该数据集的描述。
    数据库（必填）执行数据查询的目标数据库。

    当前账号需要有该数据库的查询权限。

    查询SQL（必填）查询数据的SQL语句。本示例为SELECT * FROM `student_courses`;。
  5. 在执行成功后，单击下一步。
  6. 在编辑数据集模型页，选择字段的数据类型与可视化类型。
    参数名说明
    数据类型支持的选项：
    • 维度：度量的范围、方面、角度等。
    • 度量：被聚合的统计值。

    例如：如需展示学生平均成绩，可以配置student_id（学生ID）字段为维度、score（成绩）字段为度量。更多信息，请参见名词解释。

    可视化类型支持的选项：
    • 数字
    • 字符串
    • 日期
    • 地理：国家
    • 地理：省份
    • 地理：城市
  7. 单击保存。
    即完成数据集的创建并返回到数据集管理界面。

步骤二：配置图表

本示例将配置Students Score（学生成绩）图表与AVG score of each course（各学科平均成绩）图表。本示例仅介绍部分涉及到的参数，更多信息，请参见图表管理。

  1. 登录数据管理DMS 5.0。
  2. 在顶部菜单栏中，选择集成与开发（DTS） > 数据应用 > 数据可视化（老）。
  3. 在页面左侧，单击图表。
  4. 在图表管理页，单击图标。
  5. 配置Students Score（学生成绩）图表。
    1. 在左上角输入图表名称，本示例为Students Score。
    2. 单击选择一个数据集，选择POC数据集。
    3. 将student_id拖入维度框中。
    4. 将score拖入度量框中，并单击拖入后的score，从弹出的列表中选择平均数（默认为求和）。
    5. 在图表驱动页签下，单击柱状图图标（柱状图）。
    6. 将course_id拖入分组框中，在弹窗中，单击确定。
    7. 单击样式，选中显示标签复选框并取消选中显示图例复选框。
    8. 单击保存。
  6. 在图表管理页，单击图标。
  7. 配置AVG score of each course（各学科平均成绩）图表。
    1. 在左上角输入图表名称，本示例为AVG score of each course。
    2. 单击选择一个数据集，选择POC数据集。
    3. 将course_id拖入维度框中。
    4. 将score拖入度量框中，并单击拖入后的score，从弹出的列表中选择平均数。
    5. 在图表驱动页签下，单击折线图图标图标（折线图）。
    6. 单击样式，选中显示标签复选框。
    7. 单击保存。

步骤三：配置大屏

DMS提供仪表盘和大屏功能进行业务信息展示，本实例将介绍配置一个定时进行数据更新的大屏。更多信息，请参见仪表盘集合、大屏。

  1. 登录数据管理DMS 5.0。
  2. 在顶部菜单栏中，选择集成与开发（DTS） > 数据应用 > 数据可视化（老）。
  3. 在页面左侧，单击数据展示。
  4. 单击新增大屏。
  5. 在名称文本框中，输入Students Score（学生成绩）。
  6. 在大屏中添加图表。
    1. 在页面上方，单击添加图表图标。
    2. 选中Students Score与AVG score of each course图表，并单击下一步。
    3. 从数据刷新模式中选择定时刷新，单击保存。
      大屏中的数据将定时进行刷新。
      说明 频率的单位为秒，默认为60。
    4. 在大屏中，调整图表的大小。
  7. 在大屏中添加辅助图形（矩形、标签、视频、时间器等辅助组件）。
    1. 在页面上方，单击辅助图形图标，从列表中选择标签。
    2. 在图层区域，选中上一步添加的标签，在大屏中将该标签移动至Students Score图表下方，并在右侧的文本内容文本框中输入Students Score。
    3. 在页面上方，单击辅助图形图标，从列表中选择标签。
    4. 在图层区域，选中刚添加的标签，在大屏中将该标签移动至AVG score of each course图表下方，并在右侧的文本内容文本框中输入AVG score of each course。
  8. 单击预览图标（预览）。
    效果如下图所示。大屏预览
  9. 开启分享。
    1. 单击分享图标。
    2. 单击开启分享。
    3. 单击复制链接，即可将链接分享给同账号下的其他人员。