运筹帷幄，快捷搭建企业经营数据大屏

创建云数据库RDS MySQL

1. 登录云数据库RDS MySQL控制台。

2. 创建云数据库RDS MySQL版实例。

   1. 在概览页面，单击创建实例。

   2. 在购买页面顶部，单击快捷创建，购买1个云数据库RDS MySQL版实例，参数配置如下。

   参数	本方案示例	说明
   付费类型	按量付费	更多创建实例的配置介绍，请参见快速创建RDS MySQL实例。
   地域	华东1（杭州）
   引擎	MySQL 8.0
   实例规格	基础系列 通用云盘
   存储空间	40GB
   网络	使用平台自动创建的专有网络及交换机。 说明 专有网络及交换机选择后将不能更改。您也可根据业务需要新建专有网络VPC和交换机。详情请参见创建专有网络、创建交换机。
   更多配置（选填）	使用默认值。

   3. 在页面右侧确认购买信息，勾选服务协议，单击确认下单，完成支付，实例创建成功。

3. 创建数据库账号。

   1. 访问RDS实例列表，在界面上方切换至华东1（杭州）地域。

   2. 单击已创建的实例ID，进入实例详情页。

   3. 在左侧导航栏单击账号管理。

   4. 单击创建账号，配置账号信息。

      核心参数配置如下：

      • 数据库账号：user_test。

      • 账号类型：高权限账号。

      • 密码：自定义密码。

      更多创建账号的介绍，请参见创建数据库账号。

4. 创建数据库。

   1. 在左侧导航栏单击数据库管理。

   2. 单击创建数据库，配置数据库信息。

      核心参数配置如下：

      • 数据库（DB）名称：mysqltest。

      • 支持字符集：utf8。

      更多创建数据库的介绍，请参见创建数据库。

5. 设置白名单。

   您需将RDS MySQL数据库所在地域的白名单IP地址，添加至您的实例白名单中，以确保后续在DataV创建数据源时能正常访问您的RDS MySQL实例。

   1. 获取白名单地址。

      您可参考配置数据库白名单，查看各地域白名单地址。本文示例数据库部署在华东1（杭州）地域，且使用内网VPC网络，因此需要添加的白名单为100.104.70.0/24。

   2. 在RDS MySQL实例详情页，单击左侧导航栏的白名单与安全组，按下图步骤添加白名单。

      说明

      • 多个IP地址，需使用英文逗号（,）隔开。

      • 更多添加白名单的介绍，请参见设置IP白名单。

      

连接数据库并准备测试数据

1. 连接数据库。

   1. 在目标RDS MySQL实例详情页，单击登录数据库。

   2. 在登录实例对话框，输入数据库账号（即user_test）及密码，单击登录。

      说明

      • 其他参数均使用默认配置。

      • 登录后需切换使用本方案示例的mysqltest数据库进行后续操作。

2. 创建表并导入数据。

   在已创建的数据库中创建如下测试表并导入数据。

   示例创建一个账单表Bill，并生成100条模拟账单数据，日期范围设定在2023年1月1号~2023年1月10号之间，语句如下。

   CREATE TABLE IF NOT EXISTS Bill (
       `id` INT AUTO_INCREMENT PRIMARY KEY,
       `bill_date` DATE NOT NULL COMMENT '账单日期',
       `amount` DECIMAL(10, 2) NOT NULL COMMENT '金额'
   ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='账单信息表';
   
   DELIMITER ;;
   CREATE PROCEDURE GenerateBillData()
   BEGIN
       DECLARE v_counter INT DEFAULT 1;
       DECLARE v_random_date DATE;
       DECLARE v_random_amount DECIMAL(10, 2);
       
       WHILE v_counter <= 100 DO
           SET v_random_date = DATE_ADD('2023-01-01', INTERVAL FLOOR(RAND() * 10) DAY);
           SET v_random_amount = ROUND(RAND() * 1000, 2);
           
           INSERT INTO Bill (bill_date, amount)
           VALUES (v_random_date, v_random_amount);
           
           SET v_counter = v_counter + 1;
       END WHILE;
   END;;
   DELIMITER ;
   
   -- 调用存储过程生成数据
   CALL GenerateBillData();

开通DataV服务

1. 进入DataV购买页面。

2. 选择试用版本 > 专业版试用。

3. 单击立即购买，完成支付，成功开通试用版DataV服务。

创建RDS MySQL数据源

您需要将RDS MySQL数据库创建为DataV的数据源，以便DataV通过该数据源访问数据库的数据。

1. 登录DataV控制台，在左侧导航栏单击功能导航 > 数据准备 > 数据源。

2. 单击新建数据源。

3. 在添加数据源对话框，配置数据源信息。

   参数	描述
   类型	选择RDS for MySQL，并且网络类型选择内网的华东1（即杭州地域）。
   名称	自定义数据源名称。本文示例为mysql_data。
   VPC ID及VPC实例ID	VPC ID：RDS MySQL实例所绑定的专有网络ID。 VPC实例ID：RDS MySQL实例ID。 您可进入RDS实例列表查看。
   域名及端口	域名：RDS MySQL实例所绑定专有网络的内网地址。 端口：RDS MySQL实例所绑定专有网络的内网端口。 您可在RDS实例列表，单击目标实例名称，进入实例详情页，按下图步骤查看。
   用户名及密码	数据库登录账号及密码。本文示例数据库账号为user_test，密码为您自定义的数据库密码。
   数据库	单击获取数据列表，在下拉框选择已创建的数据库。本文示例为mysqltest。

使用折线图接入数据

折线图可按需查看指定条件下的数据增长趋势。示例：查看Bill表中2023年01月03日相较2023年01月02日总账单金额的趋势。

1. 选择待编辑组件。

   您需先确定接入数据的组件，后续会通过该组件样式展示您的数据，示例将数据接入看板的折线图。

   双击画布中的折线图，即可在右侧组件编辑区域按需调整组件的样式、数据源等信息。

2. 查看组件代码配置。

   您可通过静态数据（即模板内置的默认固定值）了解组件所需的数据格式，包括字段数量、字段名称等。通过下图步骤可获取折线图的字段详情及代码格式。

   

   折线图代码格式如下。

   [
     {
       "x": "23:00",
       "y": 20,
       "colorField": "标签A"
     },
     {
       "x": "23:00",
       "y": 12,
       "colorField": "标签B"
     },
     {
       "x": "24:00",
       "y": 10,
       "colorField": "标签B"
     }
   ]

3. 接入数据源数据。

   1. 接入数据源并查看数据。

      在数据源区域，选择已创建的数据源，并通过查询语句查看数据表的字段情况。示例配置如下：

      • 数据源类型：RDS for MySQL

      • 数据源名称：mysql_data

      • 查询语句：查看Bill表中2023年01月02日~2023年01月03日每天的总账单金额。

        SELECT
            DATE(bill_date) AS 日期,
            SUM(amount) AS 日总金额
        FROM
            Bill
        WHERE
            bill_date BETWEEN '2023-01-02' AND '2023-01-03'
        GROUP BY
            DATE(bill_date)
        ORDER BY
            日期;

      

   2. 使用过滤器适配数据源数据。

      若您的数据表字段与组件字段不一致，需使用过滤器自定义过滤代码，将数据源数据适配至组件中。

      勾选过滤器，即可通过手动新建或智能推荐方式自定义过滤代码。

      

      本文示例的过滤代码如下。

      var result = [];
      for (var i = 0; i < data.length; i++) {
        result.push({
          x: data[i].日期,
          y: data[i].日总金额,
          colorField: "type1"
        });
      }
      return result;

      • X轴：展示购买日期。

      • Y轴：展示日总金额。

      • 字段颜色：定义为固定颜色type1。

4. 查看最新组件数据。

   配置完成后，您即可看到看板中折线图组件已接入您的数据。

使用轮播列表接入数据

轮播列表可动态展示数据表中的所有信息。示例：轮播Bill表中所有账单记录。

1. 选择待编辑组件。

   您需先确定接入数据的组件，后续会通过该组件样式展示您的数据，示例将数据接入看板的轮播列表。

   双击画布中的轮播列表，即可在右侧组件编辑区域按需调整组件的样式、数据源等信息。

   

2. 适配组件样式。

   由于RDS MySQL表仅需展示三个字段（id、bill_date、amount）数据，轮播组件模板的列数（除第一列排序列，还剩4列）大于表的字段数，因此我们需在组件样式中删除冗余列，并依次更改列标题为“序号、用户ID、消费日期、金额”，操作方法如下。

3. 查看组件代码配置。

   您可通过静态数据（即模板内置的默认固定值）了解组件所需的数据格式，包括字段数量、字段名称等。通过下图步骤可获取轮播列表的字段详情及代码格式。

   

   轮播列表代码格式如下。

   [
     {
       "1": "列表项描述",
       "2": 12,
       "3": 9,
       "4": "https://cdn-upload.datav.aliyun.com/upload/download/1673857716919-VA3XG6Od.png"
     },
     {
       "1": "列表项描述",
       "2": 5,
       "3": 11.8,
       "4": "https://cdn-upload.datav.aliyun.com/upload/download/1673857716297-0o1s9KWZ.png"
     },
     {
       "1": "列表项描述",
       "2": 5,
       "3": 8,
       "4": "https://cdn-upload.datav.aliyun.com/upload/download/1673857715630-Z9jHcw74.png"
     },
     {
       "1": "列表项描述",
       "2": 8,
       "3": 16,
       "4": "https://cdn-upload.datav.aliyun.com/upload/download/1673857715630-Z9jHcw74.png"
     },
     {
       "1": "列表项描述",
       "2": 3,
       "3": 12,
       "4": "https://cdn-upload.datav.aliyun.com/upload/download/1673857715630-Z9jHcw74.png"
     },
     {
       "1": "列表项描述",
       "2": 6,
       "3": 7,
       "4": "https://cdn-upload.datav.aliyun.com/upload/download/1673857715630-Z9jHcw74.png"
     }
   ]

4. 接入数据源数据。

   1. 接入数据源并查看数据。

      在数据源区域，选择已创建的数据源，并通过查询语句查看数据表的字段情况。示例配置如下：

      • 数据源类型：RDS for MySQL

      • 数据源名称：mysql_data

      • 查询语句：查看Bill表中所有账单记录，语句如下。

        select * from Bill;

      

   2. 使用过滤器适配数据源数据。

      若您的数据表字段与组件字段不一致，需使用过滤器自定义过滤代码，将数据源数据适配至组件中。

      勾选过滤器，即可通过手动新建或智能推荐方式自定义过滤代码。

      

      本文示例的过滤代码如下。

      var result = [];
      for (var i = 0; i < data.length; i++) {
        result.push({
          1: data[i].id,
          2: data[i].bill_date,
          3: data[i].amount
        });
      }
      return result;

      • 1（用户ID列）：展示购买用户ID。

      • 2（消费日期列）：展示购买日期。

      • 3（金额列）：展示购买金额。

5. 查看最新组件数据。

   配置完成后，您即可看到看板中轮播列表已接入您的数据。