全部產品
Search
文件中心

DataV:空白畫布搭建資料看板

更新時間:Dec 25, 2024

本文樣本將雲資料庫RDS MySQL儲存的使用者資料接入DataV-Board 7.0(資料看板),通過空白畫布建立PC端資料看板,使用折線圖、輪播列表、通用標題等組件進行資料適配及可視化展示分析,實現企業經營大屏的搭建。

概述

說明

樣本資料僅用於展示及體驗產品功能,實際業務使用時,請以您的真實資料為準。

架構說明

按照本文提供的配置完成部署後,搭建的運行環境將與下圖的架構相似。實際部署時,您也可根據具體的資源規劃調整配置。

效果展示

按照本文提供的配置完成部署後,將產生如下效果的資料看板。image

說明

資料看板涉及的配置較多,不同配置最終產生的看板存在差異,本文僅用於瞭解相關功能及操作流程,實際效果請以您的操作為準。

準備工作

雲資料庫RDS MySQL側

  1. 建立RDS MySQL執行個體

    樣本在華東1(杭州)地區建立執行個體,且使用平台自動建立的專用網路及交換器。

  2. 在執行個體中建立所需資料庫帳號資料庫,並準備樣本資料。

    本文樣本建立內容如下:

    • 資料庫帳號:user_test

    • 資料庫名稱:mysqltest

    • 樣本資料:在mysqltest資料庫建立一個賬單表Bill,並產生100條類比賬單資料,日期範圍設定在2023年1月1號~2023年1月10號之間。

      SQL語句如下。

      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();
  3. 配置白名單。

    為確保在DataV-Board 7.0建立資料來源時能正常訪問RDS MySQL執行個體,您需將RDS MySQL資料庫所在地區的白名單IP地址,添加至執行個體白名單中。

    本文樣本資料庫部署在華東1(杭州)地區,且使用內網VPC網路,因此需添加的白名單為100.104.70.0/24

您也可根據業務需要配置執行個體及資料庫資訊。

DataV-Board 7.0側

  1. 開通DataV-Board服務

  2. 建立RDS MySQL資料來源

    資料來源的核心參數配置如下。

    參數

    描述

    類型

    選擇RDS MySQL,網路類型選擇內網華東1(即杭州地區)。

    名稱

    自訂資料來源名稱。本文樣本為mysql_data

    VPC IDVPC執行個體ID

    • VPC ID:RDS MySQL執行個體所綁定的專用網路ID。

    • VPC執行個體ID:RDS MySQL執行個體ID。

    您可進入RDS執行個體列表查看。image

    網域名稱連接埠

    • 網域名稱:RDS MySQL執行個體所綁定專用網路的內網地址。

    • 連接埠:RDS MySQL執行個體所綁定專用網路的內網連接埠。

    您可在RDS執行個體列表,單擊目標執行個體名稱,進入執行個體詳情頁,按下圖步驟查看。image

    使用者名稱密碼

    資料庫登入帳號及密碼。本樣本資料庫帳號為user_test,密碼為您自訂的資料庫密碼。

    資料庫

    單擊擷取資料列表,在下拉框選擇已建立的資料庫。本樣本為mysqltest

步驟一:建立資料看板

  1. 登入DataV-Board 7.0控制台

  2. 建立資料看板。

    1. 單擊全部應用 > 建立PC端看板

    2. 在空白看板上單擊建立看板

    3. 輸入看板名稱,使用預設的專案分組,單擊建立看板

      本樣本看板名稱為mysql_display

看板建立後,將自動跳轉至畫布編輯器頁面,您可按需接入資料來源並配置畫布資訊。

說明

畫布尺寸預設為1920*1080,您可在畫布編輯器右側的頁面配置地區按需調整。

步驟二:添加並配置組件

您需先確定接入資料的組件,後續會通過該組件適配資料並配置展示樣式。本文以折線圖、輪播列表、通用標題組件為例,展示如何接入資料,具體操作如下。

使用折線圖接入資料

折線圖可按需查看指定條件下的資料增長趨勢。樣本:查看Bill表中2023年01月03日相較2023年01月02日總賬單金額的趨勢。

  1. 添加折線圖至畫布。

    在看板編輯頁面,按下圖步驟,添加折線圖。

    image

    單擊折線圖,即可在右側組件編輯地區按需調整組件的樣式、資料來源等資訊。image

  2. 接入資料來源資料。

    1. 接入資料來源並查看資料。

      資料來源地區,選擇已建立的資料來源,並通過查詢語句查看資料表的欄位情況。樣本配置如下:

      • 資料來源類型:RDS for MySQL

      • 資料來源名稱:mysql_data

      • 查詢語句:查看Bill表中2023年01月01日~2023年01月08日每天的總賬單金額。

        說明

        假設當天的賬單金額會在後一天統計,因此查看2023年01月01日~2023年01月08日的賬單,實際顯示為2022年12月31日~2023年01月07日的賬單。

        SQL語句如下。

        SELECT
            DATE(bill_date) AS 日期,
            SUM(amount) AS 日總金額
        FROM
            Bill
        WHERE
            bill_date BETWEEN '2023-01-01' AND '2023-01-08'
        GROUP BY
            DATE(bill_date)
        ORDER BY
            日期;

      image

    2. 使用過濾器適配資料來源資料。

      若您的資料表欄位與組件欄位不一致,需使用過濾器自訂過濾代碼,將資料來源資料適配至組件中。

      勾選過濾器,即可通過手動建立智能推薦方式自訂過濾代碼,配置完成後單擊儲存

      image

      本文樣本的過濾代碼如下。

      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

  3. 修改組件樣式。

    配置組件X、Y軸字型為15px;並在折線圖上顯示Y軸對應的數值。

    image

使用輪播列表接入資料

輪播列表可動態展示資料表中的所有資訊。樣本:輪播Bill表中所有賬單記錄。

  1. 添加輪播列表至畫布。

    在看板編輯頁面,按下圖步驟,添加輪播列表。image

    單擊輪播列表,即可在右側組件編輯地區按需調整組件的樣式、資料來源等資訊。

    image

  2. 接入資料來源資料。

    資料來源地區,選擇已建立的資料來源,並通過查詢語句查看資料表的欄位情況。樣本配置如下:

    • 資料來源類型:RDS for MySQL

    • 資料來源名稱:mysql_data

    • 查詢語句:查看Bill表中所有賬單記錄,語句如下。

      select * from Bill;

    image

  3. 修改組件樣式。

    由於RDS MySQL表需展示三個欄位(id、bill_date、amount)資料,因此我們需在組件樣式中更改欄位標題,操作方法如下。

    • 欄欄位名:RDS MySQL資料表的欄位名稱,需將相應欄位接入對應列。三個標籤依次更改為”id、bill_date、amount“。

    • 列顯示名稱:輪播列表展示的列名稱。三個標籤依次更改為“使用者ID、消費日期、金額”。

    image

使用通用標題

本文樣本將通用標題作為資料看板的標題列展示。

  1. 在看板編輯頁面,按下圖步驟添加通用標題至畫布。image

  2. 單擊通用標題,即可在右側組件編輯地區按需調整組件的樣式、資料來源等資訊。image

    樣本配置樣式如下。image

步驟三:預覽資料看板

組件配置完成後,單擊看板編輯頁面右上方的預覽,即可預覽資料看板的效果。您也可在看板編輯頁面,按需拖動組件,調整組件在資料看板中的位置、大小等布局資訊。

樣本產生的看板如下。image

步驟:發布及部署資料看板

資料看板建立完成後,需將其發布上線,部署至相關裝置使用。

  1. 單擊看板編輯頁面右上方的發布,選擇發布大屏

  2. 擷取看板訪問資訊並配置訪問限制。

    發布後,您可在看板編輯頁面右上方單擊發行,擷取訪問資訊並配置存取權限。

    image

    • 支援通過二維碼、連結地址等方式訪問。

    • 可按需配置存取權限(例如,密碼驗證、通過Token驗證)。通常,如需與其他系統整合并控制存取權限,可開啟Token驗證。

    • 可在發布快照地區,查詢看板發布版本,也可執行新增版本、復原至歷史版本等管理操作。

  3. 擷取看板訪問資訊後(例如,訪問地址),您可將其投放至渲染主機、PC、手機等裝置進行訪問。

步驟五:投屏展示資料看板

資料看板發布後,您可進入可視化應用中心,投屏展示看板。

  1. 進入可視化應用中心。

    1. 登入DataV-Board 7.0控制台

    2. 在介面頂部導覽列,單擊右側的可視化應用中心

  2. 按下圖操作建立示範預案並投屏展示。image

相關文檔