可視化平台項目

本文轉載自查看原文 2020-03-04 11:37 713

1. 案例介紹

本案例要基於MySQL數據庫，使用Kettle、Apache Superset實現數據可視化。案例使用MySQL作為數據分析的存儲以及查詢引擎、以Kettle作為數據處理腳本執行工具、以及Apache Superset實現數據可視化展示。讓我們將來能夠歐快速實現數據分析、以及可視化開發。

2.系統架構

3.ETL概念

kettle 是一款大數據中用於實現數據的ETL工作的工具, 同時也是從事ETL工程師必備項。

ETL是將業務系統的數據經過抽取、清洗轉換之后加載到數據倉庫的過程，目的是將企業中的分散、零亂、標准不統一的數據整合到一起，為企業的決策提供分析依據， ETL是BI（商業智能）項目重要的一個環節。

ETL 的流程可以用任何的編程語言去開發完成，由於ETL是極為復雜的過程，而手寫程序不易管理，有愈來愈多的企業采用工具協助ETL的開發，並運用其內置的metadata功能來存儲來源與目的的對應（mapping）以及轉換規則。

工具可以提供較強大的連接功能（connectivity）來連接來源端及目的端，開發人員不用去熟悉各種相異的平台及數據的結構，亦能進行開發。

kettle的安裝

環境要求：

安裝、配置好JDK

下載kettle: 本次學習選擇PDI 8.2 版本

下載地址: https://sourceforge.net/projects/pentaho/files/Pentaho%208.2/client-tools/

kettle具體使用方法和安裝步驟單獨發！！！！

4.可視化工具(superset)

Superset是一款開源的現代化企業級BI。它是目前開源的數據分析和可視化工具中比較好用的，功能簡單但可以滿足我們對數據的基本需求，支持多種數據源，圖表類型多，易維護，易進行二次開發。BI可以將數據進行模型構建，制作成Dashboard，相比於報表，側重點在於分析，操作簡單、數據處理量大。常常基於企業搭建的數據平台，連接數據倉庫進行分析。

superset的安裝

環境要求：

Linux系統

Python3的環境

superset具體使用方法和安裝步驟單獨發！！！！

5.基於Kettle實現數據ETL

-- 創建一個用於保存分析數據的數據庫

create database if not exists itheima_bi;

-- 數據抽取，將存儲在MySQL中的數據源抽取出來，存儲在另一個數據庫用來分析

對於數據的更新, 我們可能采用按天抽取, 按小時抽取, 或者按周抽取, 一般來說都是按照天來進行抽取更為穩妥

所有同步到分析庫的表名統一以 ods_源表名開頭。例如：
- ods_itheima_areas：行政地理區域表
- ods_itheima_goods：商品表
所有用於保存分析結果的表名統一以app_主題_分析維度開頭。例如：

app_order_paytype：針對支付類型的訂單分析
app_user_order_top5：針對用戶的消費訂單總額TOP5分析

6.數據分析操作

需求1: 統計 2019-09-05訂單支付的總金額、訂單的總筆數

1) 創建分析結果存儲表:
CREATE TABLE IF NOT EXISTS app_order_total(
  id INTEGER AUTO_INCREMENT PRIMARY KEY,
  dt VARCHAR(20),
  total_money DOUBLE,
  total_cnt INTEGER
);

2) 編寫測試統計分析語句
SELECT 
    NULL, 
    "2019-09-05",
    SUM(realTotalMoney) ,
    COUNT(1) FROM ods_itheima_orders 
WHERE SUBSTRING(createTime,1,10) = "2019-09-05";
 
 3) kettle中加載執行操作
    SQL腳本：
        INSERT INTO app_order_total
        SELECT 
            NULL, 
            "${dt}",
            SUM(realTotalMoney) ,
            COUNT(1) FROM ods_itheima_orders 
        WHERE SUBSTRING(createTime,1,10) = "${dt}";

需求2: 統計2019-09-05當天下過訂單的不同用戶總數。

--1)  創建訂單用戶分析表
CREATE TABLE IF NOT EXISTS app_order_user(
  id INTEGER  PRIMARY KEY AUTO_INCREMENT,   -- 唯一標識
  dt VARCHAR(50),               -- 統計日期
  total_user_cnt INTEGER            -- 總用戶數
);

--2) 編寫測試SQL統計分析語句: 統計每日下訂單用戶數
SELECT 
    NULL, 
    "2019-09-05",
    COUNT(DISTINCT userid) 
FROM ods_itheima_orders 
WHERE SUBSTRING(createTime,1,10) = "2019-09-05";
  
--3) Kettle中加載執行
    SQL腳本:
        -- 加載到分析結果表
        INSERT INTO app_order_user
        SELECT 
            NULL, 
            "${dt}",
            COUNT(DISTINCT userid) 
        FROM ods_itheima_orders 
        WHERE SUBSTRING(createTime,1,10) = "${dt}";

需求3: 統計2019-09-05當天，不同的支付方式的訂單總額、以及訂單總筆數。

--1) 創建分析表
    CREATE TABLE IF NOT EXISTS app_order_paytype(
          id INTEGER AUTO_INCREMENT PRIMARY KEY,
          dt VARCHAR(20),
          pay_type VARCHAR(20),
          total_money DOUBLE,
          total_cnt INTEGER
    );

--2) 編寫測試SQL統計分析語句
    SELECT  
        NULL,
        "2019-09-05",
        CASE WHEN paytype = 1 THEN '支付寶'
        WHEN paytype = 2 THEN '微信' 
        WHEN paytype = 3 THEN '現金' 
        ELSE '其他' END AS paytype,
        SUM(realTotalMoney), 
        COUNT(1) 
    FROM  ods_itheima_orders 
    WHERE SUBSTRING(createTime,1,10) = "2019-09-05"
    GROUP BY paytype
 
-- 3) kettle 中加載執行
    INSERT INTO app_order_paytype
        SELECT  
            NULL,
            "${dt}",
            CASE WHEN paytype = 1 THEN '支付寶'
            WHEN paytype = 2 THEN '微信' 
            WHEN paytype = 3 THEN '現金' 
            ELSE '其他' END AS paytype,
            SUM(realTotalMoney), 
            COUNT(1) 
        FROM  ods_itheima_orders 
        WHERE SUBSTRING(createTime,1,10) = "${dt}"
        GROUP BY paytype

需求4: 統計2019年9月下訂單最多的用戶TOP5，也就是前5名。

--1) 創建分析表
    CREATE TABLE IF NOT EXISTS app_order_user_top5(
        id INTEGER AUTO_INCREMENT PRIMARY KEY,
        dt VARCHAR(10),
        userid VARCHAR(20),
        username VARCHAR(50),
        total_cnt INTEGER
    );
 
--2) 編寫測試SQL統計分析語句
    SELECT 
        NULL,
        "2019-09",
        userid,
        username,
        COUNT(*) total
    FROM ods_itheima_orders  WHERE SUBSTRING(createTime,1,7) = "2019-09" 
    GROUP BY  username  ORDER BY total DESC LIMIT 5;
    
--3) Kettle中加載執行
    INSERT INTO app_order_user_top5
    SELECT 
        NULL,
        "${dm}",
        userid,
        username,
        COUNT(*) total
    FROM ods_itheima_orders  WHERE SUBSTRING(createTime,1,7) = "${dm}" 
    GROUP BY  username  ORDER BY total DESC LIMIT 5;

需求5 : 統計2019年9月5日當天，不同商品一級分類訂單的總金額、訂單的總筆數

CREATE TABLE IF NOT EXISTS app_order_goods_cat(
  id INTEGER AUTO_INCREMENT PRIMARY KEY,
  dt VARCHAR(10),
  cat_name VARCHAR(50), -- 一級分類名稱
  total_money DOUBLE, -- 訂單總金額
  total_num INTEGER -- 訂單總筆數
);
創建索引: 
    CREATE INDEX idx_ods_itheima_goods_goodsid ON ods_itheima_goods(goodsid);
    CREATE INDEX idx_ods_itheima_goods_cats_catid ON ods_itheima_goods_cats(catid);
相關測試SQL:    
SELECT 
ogid,orderid,temp4.goodsid ,payprice, temp4.goodscatid , cats2,cats1,ods_itheima_goods_cats.catname,    
COUNT(DISTINCT orderid),
SUM(payprice)
FROM
(SELECT 
ogid,orderid,temp3.goodsid ,payprice, temp3.goodscatid , cats2,ods_itheima_goods_cats.parentid AS cats1
FROM 
(SELECT 
ogid,orderid,temp2.goodsid ,payprice, temp2.goodscatid ,ods_itheima_goods_cats.parentid AS cats2
FROM
(SELECT 
   ogid,orderid,temp1.goodsid ,payprice, ods_itheima_goods.goodscatid
FROM 
(SELECT ogid,orderid,goodsid ,payprice
    FROM ods_itheima_order_goods  
 WHERE SUBSTRING(createTime,1,10) = "2019-09-05") temp1 JOIN ods_itheima_goods 
ON ods_itheima_goods.goodsid = temp1.goodsid)temp2  JOIN ods_itheima_goods_cats
ON ods_itheima_goods_cats.catid = temp2.goodscatid ) temp3  JOIN ods_itheima_goods_cats
ON ods_itheima_goods_cats.catid = temp3.cats2)temp4 JOIN ods_itheima_goods_cats
ON ods_itheima_goods_cats.catid = cats1
GROUP BY cats1;

加載到kettle中運行:
INSERT INTO app_order_goods_cat
SELECT 
    NULL,
    "${dt}",
    ods_itheima_goods_cats.catname,
    SUM(payprice),
    COUNT(DISTINCT orderid)
FROM
(SELECT 
ogid,orderid,temp3.goodsid ,payprice, temp3.goodscatid , cats2,ods_itheima_goods_cats.parentid AS cats1
FROM 
(SELECT 
ogid,orderid,temp2.goodsid ,payprice, temp2.goodscatid ,ods_itheima_goods_cats.parentid AS cats2
FROM
(SELECT 
   ogid,orderid,temp1.goodsid ,payprice, ods_itheima_goods.goodscatid
FROM 
(SELECT ogid,orderid,goodsid ,payprice
    FROM ods_itheima_order_goods  
 WHERE SUBSTRING(createTime,1,10) = "${dt}") temp1 JOIN ods_itheima_goods 
ON ods_itheima_goods.goodsid = temp1.goodsid)temp2  JOIN ods_itheima_goods_cats
ON ods_itheima_goods_cats.catid = temp2.goodscatid ) temp3  JOIN ods_itheima_goods_cats
ON ods_itheima_goods_cats.catid = temp3.cats2)temp4 JOIN ods_itheima_goods_cats
ON ods_itheima_goods_cats.catid = cats1
GROUP BY cats1;

7.基於superset實現數據可視化數據

-- 配置MySQL數據庫

　　superset-->sources-->database

-- 添加需要展示的MySQLapp表

　手動指定，在Superset要將哪些數據進行可視化。

8.組裝HTML頁面

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>黑馬大數據訂單分析平台</title>
  9     <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
 10     <style>
 11         body {
 12             background-color: #F5F5F5;
 13             padding: 5px;
 14         }
 15         
 16         .col-md-4, .col-md-6, .col-md-12 {
 17             background-color: #F5F5F5;
 18             padding: 5px;
 19         }
 20 
 21         .chart {
 22             padding: 16px;
 23             background-color: #ffffff;
 24         }
 25     </style>
 26 </head>
 27 <body>
 28     <div class="container-fluid">
 29         <br/>
 30         <h1 class="text-center"><img src="logo.png" alt="">黑馬大數據數據分析平台</h1>
 31         <p class="text-center">研究院大數據研發中心</p>
 32         <br/>
 33         <div class="row">
 34             <div class="col-md-4">
 35                 <div class="chart">
 36                     <!--TODO:導入Superset Chart iFame-->
 37                     <iframe
 38   width="600"
 39   height="300"
 40   seamless
 41   frameBorder="0"
 42   scrolling="no"
 43   src="http://192.168.29.123:8080/superset/explore/?form_data=%7B%22datasource%22%3A%224__table%22%2C%22viz_type%22%3A%22big_number_total%22%2C%22slice_id%22%3A2%2C%22url_params%22%3A%7B%7D%2C%22granularity_sqla%22%3Anull%2C%22time_grain_sqla%22%3A%22P1D%22%2C%22time_range%22%3A%22Last+week%22%2C%22metric%22%3A%7B%22aggregate%22%3A%22SUM%22%2C%22column%22%3A%7B%22column_name%22%3A%22total_money%22%2C%22description%22%3Anull%2C%22expression%22%3Anull%2C%22filterable%22%3Atrue%2C%22groupby%22%3Atrue%2C%22id%22%3A15%2C%22is_dttm%22%3Afalse%2C%22optionName%22%3A%22_col_total_money%22%2C%22python_date_format%22%3Anull%2C%22type%22%3A%22DOUBLE%22%2C%22verbose_name%22%3Anull%7D%2C%22expressionType%22%3A%22SIMPLE%22%2C%22fromFormData%22%3Afalse%2C%22hasCustomLabel%22%3Afalse%2C%22label%22%3A%22SUM%28total_money%29%22%2C%22optionName%22%3A%22metric_vkhs8zu8v6tro_4kpibbtb4337s%22%2C%22sqlExpression%22%3Anull%7D%2C%22adhoc_filters%22%3A%5B%5D%2C%22subheader%22%3A%22%E8%AE%A2%E5%8D%95%E9%94%80%E5%94%AE%E6%80%BB%E9%A2%9D%22%2C%22y_axis_format%22%3A%22.0f%22%2C%22header_font_size%22%3A0.3%2C%22subheader_font_size%22%3A0.125%7D&standalone=true&height=300"
 44 >
 45 </iframe>
 46                 </div>
 47 
 48             </div>
 49             <div class="col-md-4">
 50                 <div class="chart">
 51                     <!--TODO:導入Superset Chart iFame-->
 52                      <iframe
 53   width="600"
 54   height="300"
 55   seamless
 56   frameBorder="0"
 57   scrolling="no"
 58   src="http://192.168.29.123:8080/superset/explore/?form_data=%7B%22datasource%22%3A%224__table%22%2C%22viz_type%22%3A%22big_number_total%22%2C%22slice_id%22%3A3%2C%22url_params%22%3A%7B%7D%2C%22granularity_sqla%22%3Anull%2C%22time_grain_sqla%22%3A%22P1D%22%2C%22time_range%22%3A%22Last+week%22%2C%22metric%22%3A%7B%22aggregate%22%3A%22SUM%22%2C%22column%22%3A%7B%22column_name%22%3A%22total_cnt%22%2C%22description%22%3Anull%2C%22expression%22%3Anull%2C%22filterable%22%3Atrue%2C%22groupby%22%3Atrue%2C%22id%22%3A16%2C%22is_dttm%22%3Afalse%2C%22optionName%22%3A%22_col_total_cnt%22%2C%22python_date_format%22%3Anull%2C%22type%22%3A%22INTEGER%2811%29%22%2C%22verbose_name%22%3Anull%7D%2C%22expressionType%22%3A%22SIMPLE%22%2C%22fromFormData%22%3Afalse%2C%22hasCustomLabel%22%3Afalse%2C%22label%22%3A%22SUM%28total_cnt%29%22%2C%22optionName%22%3A%22metric_73robzv9oa8ao_77vm3cqe2ucv7%22%2C%22sqlExpression%22%3Anull%7D%2C%22adhoc_filters%22%3A%5B%5D%2C%22subheader%22%3A%22%E8%AE%A2%E5%8D%95%E6%80%BB%E6%95%B0%22%2C%22y_axis_format%22%3A%22SMART_NUMBER%22%2C%22header_font_size%22%3A0.3%2C%22subheader_font_size%22%3A0.125%7D&standalone=true&height=300"
 59 >
 60 </iframe>   
 61 
 62                 </div>
 63             </div>
 64             <div class="col-md-4">
 65                 <div class="chart">
 66                     <!--TODO:導入Superset Chart iFame-->
 67                     <iframe
 68   width="600"
 69   height="300"
 70   seamless
 71   frameBorder="0"
 72   scrolling="no"
 73   src="http://192.168.29.123:8080/superset/explore/?form_data=%7B%22datasource%22%3A%225__table%22%2C%22viz_type%22%3A%22big_number_total%22%2C%22slice_id%22%3A4%2C%22url_params%22%3A%7B%7D%2C%22granularity_sqla%22%3Anull%2C%22time_grain_sqla%22%3A%22P1D%22%2C%22time_range%22%3A%22Last+week%22%2C%22metric%22%3A%7B%22aggregate%22%3A%22SUM%22%2C%22column%22%3A%7B%22column_name%22%3A%22total_user_cnt%22%2C%22description%22%3Anull%2C%22expression%22%3Anull%2C%22filterable%22%3Atrue%2C%22groupby%22%3Atrue%2C%22id%22%3A19%2C%22is_dttm%22%3Afalse%2C%22optionName%22%3A%22_col_total_user_cnt%22%2C%22python_date_format%22%3Anull%2C%22type%22%3A%22INTEGER%2811%29%22%2C%22verbose_name%22%3Anull%7D%2C%22expressionType%22%3A%22SIMPLE%22%2C%22fromFormData%22%3Afalse%2C%22hasCustomLabel%22%3Afalse%2C%22label%22%3A%22SUM%28total_user_cnt%29%22%2C%22optionName%22%3A%22metric_b6nnimk8kvdvx_b6g4rmoq5tz3q%22%2C%22sqlExpression%22%3Anull%7D%2C%22adhoc_filters%22%3A%5B%5D%2C%22subheader%22%3A%22%E6%B6%88%E8%B4%B9%E8%AE%A2%E5%8D%95%E7%94%A8%E6%88%B7%E6%95%B0%22%2C%22y_axis_format%22%3A%22SMART_NUMBER%22%2C%22header_font_size%22%3A0.3%2C%22subheader_font_size%22%3A0.125%7D&standalone=true&height=300"
 74 >
 75 </iframe>
 76                 </div>
 77             </div>
 78         </div>
 79         <div class="row">
 80             <div class="col-md-4">
 81                 <div class="chart">
 82                     <!--TODO:導入Superset Chart iFame-->
 83                     <iframe
 84   width="600"
 85   height="300"
 86   seamless
 87   frameBorder="0"
 88   scrolling="no"
 89   src="http://192.168.29.123:8080/superset/explore/?form_data=%7B%22datasource%22%3A%223__table%22%2C%22viz_type%22%3A%22pie%22%2C%22slice_id%22%3A6%2C%22url_params%22%3A%7B%7D%2C%22granularity_sqla%22%3Anull%2C%22time_grain_sqla%22%3A%22P1D%22%2C%22time_range%22%3A%22Last+week%22%2C%22metric%22%3A%7B%22aggregate%22%3A%22SUM%22%2C%22column%22%3A%7B%22column_name%22%3A%22total_cnt%22%2C%22description%22%3Anull%2C%22expression%22%3Anull%2C%22filterable%22%3Atrue%2C%22groupby%22%3Atrue%2C%22id%22%3A12%2C%22is_dttm%22%3Afalse%2C%22optionName%22%3A%22_col_total_cnt%22%2C%22python_date_format%22%3Anull%2C%22type%22%3A%22INTEGER%2811%29%22%2C%22verbose_name%22%3Anull%7D%2C%22expressionType%22%3A%22SIMPLE%22%2C%22fromFormData%22%3Afalse%2C%22hasCustomLabel%22%3Afalse%2C%22label%22%3A%22SUM%28total_cnt%29%22%2C%22optionName%22%3A%22metric_g3xy8gfbdxz85_1dj7nwrwmavpl%22%2C%22sqlExpression%22%3Anull%7D%2C%22adhoc_filters%22%3A%5B%5D%2C%22groupby%22%3A%5B%22pay_type%22%5D%2C%22row_limit%22%3A25%2C%22pie_label_type%22%3A%22key_percent%22%2C%22number_format%22%3A%22SMART_NUMBER%22%2C%22donut%22%3Atrue%2C%22show_legend%22%3Atrue%2C%22show_labels%22%3Atrue%2C%22labels_outside%22%3Afalse%2C%22color_scheme%22%3A%22lyftColors%22%2C%22label_colors%22%3A%7B%7D%7D&standalone=true&height=300"
 90 >
 91 </iframe>
 92                 </div>
 93             </div>
 94             <div class="col-md-4">
 95                 <div class="chart">
 96                     <!--TODO:導入Superset Chart iFame-->
 97                     <iframe
 98   width="600"
 99   height="300"
100   seamless
101   frameBorder="0"
102   scrolling="no"
103   src="http://192.168.29.123:8080/superset/explore/?form_data=%7B%22datasource%22%3A%223__table%22%2C%22viz_type%22%3A%22pie%22%2C%22slice_id%22%3A5%2C%22url_params%22%3A%7B%7D%2C%22granularity_sqla%22%3Anull%2C%22time_grain_sqla%22%3A%22P1D%22%2C%22time_range%22%3A%22Last+week%22%2C%22metric%22%3A%7B%22aggregate%22%3A%22SUM%22%2C%22column%22%3A%7B%22column_name%22%3A%22total_money%22%2C%22description%22%3Anull%2C%22expression%22%3Anull%2C%22filterable%22%3Atrue%2C%22groupby%22%3Atrue%2C%22id%22%3A11%2C%22is_dttm%22%3Afalse%2C%22optionName%22%3A%22_col_total_money%22%2C%22python_date_format%22%3Anull%2C%22type%22%3A%22DOUBLE%22%2C%22verbose_name%22%3Anull%7D%2C%22expressionType%22%3A%22SIMPLE%22%2C%22fromFormData%22%3Afalse%2C%22hasCustomLabel%22%3Afalse%2C%22label%22%3A%22SUM%28total_money%29%22%2C%22optionName%22%3A%22metric_g7ci918csu37s_rnom4mmnkejc3%22%2C%22sqlExpression%22%3Anull%7D%2C%22adhoc_filters%22%3A%5B%5D%2C%22groupby%22%3A%5B%22pay_type%22%5D%2C%22row_limit%22%3A25%2C%22pie_label_type%22%3A%22key_percent%22%2C%22number_format%22%3A%22SMART_NUMBER%22%2C%22donut%22%3Atrue%2C%22show_legend%22%3Atrue%2C%22show_labels%22%3Atrue%2C%22labels_outside%22%3Afalse%2C%22color_scheme%22%3A%22googleCategory20c%22%2C%22label_colors%22%3A%7B%7D%7D&standalone=true&height=300"
104 >
105 </iframe>
106                 </div>
107             </div>
108             <div class="col-md-4">
109                 <div class="chart">
110                     <!--TODO:導入Superset Chart iFame-->
111                     <iframe
112   width="600"
113   height="300"
114   seamless
115   frameBorder="0"
116   scrolling="no"
117   src="http://192.168.29.123:8080/superset/explore/?form_data=%7B%22datasource%22%3A%226__table%22%2C%22viz_type%22%3A%22table%22%2C%22slice_id%22%3A7%2C%22url_params%22%3A%7B%7D%2C%22granularity_sqla%22%3Anull%2C%22time_grain_sqla%22%3A%22P1D%22%2C%22time_range%22%3A%22Last+week%22%2C%22groupby%22%3A%5B%22dt%22%2C%22username%22%5D%2C%22metrics%22%3A%5B%7B%22aggregate%22%3A%22SUM%22%2C%22column%22%3A%7B%22column_name%22%3A%22total_cnt%22%2C%22description%22%3Anull%2C%22expression%22%3Anull%2C%22filterable%22%3Atrue%2C%22groupby%22%3Atrue%2C%22id%22%3A24%2C%22is_dttm%22%3Afalse%2C%22optionName%22%3A%22_col_total_cnt%22%2C%22python_date_format%22%3Anull%2C%22type%22%3A%22INTEGER%2811%29%22%2C%22verbose_name%22%3Anull%7D%2C%22expressionType%22%3A%22SIMPLE%22%2C%22fromFormData%22%3Afalse%2C%22hasCustomLabel%22%3Afalse%2C%22label%22%3A%22SUM%28total_cnt%29%22%2C%22optionName%22%3A%22metric_39fftcwwbjyee_us0g1eyp716mv%22%2C%22sqlExpression%22%3Anull%7D%5D%2C%22percent_metrics%22%3A%5B%5D%2C%22timeseries_limit_metric%22%3Anull%2C%22row_limit%22%3A10000%2C%22include_time%22%3Afalse%2C%22order_desc%22%3Atrue%2C%22all_columns%22%3A%5B%5D%2C%22order_by_cols%22%3A%5B%5D%2C%22adhoc_filters%22%3A%5B%5D%2C%22table_timestamp_format%22%3A%22%25Y-%25m-%25d+%25H%3A%25M%3A%25S%22%2C%22page_length%22%3A0%2C%22include_search%22%3Atrue%2C%22table_filter%22%3Afalse%2C%22align_pn%22%3Afalse%2C%22color_pn%22%3Atrue%7D&standalone=true&height=300"
118 >
119 </iframe>
120                 </div>
121             </div>
122         </div>
123         <div class="row">
124             <div class="col-md-6">
125                 <div class="chart">
126                     <!--TODO:導入Superset Chart iFame-->
127 <iframe
128   width="900"
129   height="450"
130   seamless
131   frameBorder="0"
132   scrolling="no"
133   src="http://192.168.29.123:8080/superset/explore/?form_data=%7B%22datasource%22%3A%222__table%22%2C%22viz_type%22%3A%22dist_bar%22%2C%22slice_id%22%3A8%2C%22url_params%22%3A%7B%7D%2C%22granularity_sqla%22%3Anull%2C%22time_grain_sqla%22%3A%22P1D%22%2C%22time_range%22%3A%22Last+week%22%2C%22metrics%22%3A%5B%7B%22aggregate%22%3A%22SUM%22%2C%22column%22%3A%7B%22column_name%22%3A%22total_money%22%2C%22description%22%3Anull%2C%22expression%22%3Anull%2C%22filterable%22%3Atrue%2C%22groupby%22%3Atrue%2C%22id%22%3A6%2C%22is_dttm%22%3Afalse%2C%22optionName%22%3A%22_col_total_money%22%2C%22python_date_format%22%3Anull%2C%22type%22%3A%22DOUBLE%22%2C%22verbose_name%22%3Anull%7D%2C%22expressionType%22%3A%22SIMPLE%22%2C%22fromFormData%22%3Afalse%2C%22hasCustomLabel%22%3Afalse%2C%22label%22%3A%22SUM%28total_money%29%22%2C%22optionName%22%3A%22metric_rzvt2ak5a2k8d_ojwns1b9n3c5l%22%2C%22sqlExpression%22%3Anull%7D%5D%2C%22adhoc_filters%22%3A%5B%5D%2C%22groupby%22%3A%5B%22cat_name%22%5D%2C%22columns%22%3A%5B%5D%2C%22row_limit%22%3A10000%2C%22contribution%22%3Afalse%2C%22color_scheme%22%3A%22d3Category20%22%2C%22label_colors%22%3A%7B%7D%2C%22show_legend%22%3Atrue%2C%22show_bar_value%22%3Atrue%2C%22bar_stacked%22%3Afalse%2C%22order_bars%22%3Afalse%2C%22y_axis_format%22%3A%22SMART_NUMBER%22%2C%22y_axis_label%22%3A%22%22%2C%22show_controls%22%3Afalse%2C%22x_axis_label%22%3A%22%22%2C%22bottom_margin%22%3A%22auto%22%2C%22x_ticks_layout%22%3A%22auto%22%2C%22reduce_x_ticks%22%3Afalse%7D&standalone=true&height=450"
134 >
135 </iframe>
136                 </div>
137             </div>
138             <div class="col-md-6">
139                 <div class="chart">
140                     <!--TODO:導入Superset Chart iFame-->
141                     <iframe
142   width="900"
143   height="450"
144   seamless
145   frameBorder="0"
146   scrolling="no"
147   src="http://192.168.29.123:8080/superset/explore/?form_data=%7B%22datasource%22%3A%222__table%22%2C%22viz_type%22%3A%22dist_bar%22%2C%22slice_id%22%3A9%2C%22url_params%22%3A%7B%7D%2C%22granularity_sqla%22%3Anull%2C%22time_grain_sqla%22%3A%22P1D%22%2C%22time_range%22%3A%22Last+week%22%2C%22metrics%22%3A%5B%7B%22aggregate%22%3A%22SUM%22%2C%22column%22%3A%7B%22column_name%22%3A%22total_num%22%2C%22description%22%3Anull%2C%22expression%22%3Anull%2C%22filterable%22%3Atrue%2C%22groupby%22%3Atrue%2C%22id%22%3A7%2C%22is_dttm%22%3Afalse%2C%22optionName%22%3A%22_col_total_num%22%2C%22python_date_format%22%3Anull%2C%22type%22%3A%22INTEGER%2811%29%22%2C%22verbose_name%22%3Anull%7D%2C%22expressionType%22%3A%22SIMPLE%22%2C%22fromFormData%22%3Afalse%2C%22hasCustomLabel%22%3Afalse%2C%22label%22%3A%22SUM%28total_num%29%22%2C%22optionName%22%3A%22metric_r07p9o32b0fqo_rfpsd0830m6rm%22%2C%22sqlExpression%22%3Anull%7D%5D%2C%22adhoc_filters%22%3A%5B%5D%2C%22groupby%22%3A%5B%22cat_name%22%5D%2C%22columns%22%3A%5B%5D%2C%22row_limit%22%3A10000%2C%22contribution%22%3Afalse%2C%22color_scheme%22%3A%22bnbColors%22%2C%22label_colors%22%3A%7B%7D%2C%22show_legend%22%3Atrue%2C%22show_bar_value%22%3Atrue%2C%22bar_stacked%22%3Afalse%2C%22order_bars%22%3Afalse%2C%22y_axis_format%22%3A%22SMART_NUMBER%22%2C%22y_axis_label%22%3A%22%22%2C%22show_controls%22%3Afalse%2C%22x_axis_label%22%3A%22%22%2C%22bottom_margin%22%3A%22auto%22%2C%22x_ticks_layout%22%3A%22auto%22%2C%22reduce_x_ticks%22%3Afalse%7D&standalone=true&height=450"
148 >
149 </iframe>
150                 </div>
151             </div>
152         </div>
153         <div class="row">
154             <div class="col-md-12">
155                 <div class="chart">
156                     <!--TODO:導入Superset Chart iFame-->
157                     <iframe
158   width="1800"
159   height="300"
160   seamless
161   frameBorder="0"
162   scrolling="no"
163   src="http://192.168.29.123:8080/superset/explore/?form_data=%7B%22datasource%22%3A%222__table%22%2C%22viz_type%22%3A%22word_cloud%22%2C%22slice_id%22%3A10%2C%22url_params%22%3A%7B%7D%2C%22granularity_sqla%22%3Anull%2C%22time_grain_sqla%22%3A%22P1D%22%2C%22time_range%22%3A%22Last+week%22%2C%22series%22%3A%22cat_name%22%2C%22metric%22%3A%22count%22%2C%22adhoc_filters%22%3A%5B%5D%2C%22row_limit%22%3A100%2C%22size_from%22%3A30%2C%22size_to%22%3A100%2C%22rotation%22%3A%22random%22%2C%22color_scheme%22%3A%22SUPERSET_DEFAULT%22%2C%22label_colors%22%3A%7B%7D%7D&standalone=true&height=300"
164 >
165 </iframe>
166                 </div>
167             </div>
168         </div>
169     </div>
170 </body>
171 </html>

最終展示頁面：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 規則引擎-可視化平台-構思1 搭建Yapi可視化接口平台 API可視化管理平台YApi CIM平台可視化建設 API服務平台，RestCloud可視化編排平台第三章可視化ETL平台——Kettle 海量可視化日志分析平台之ELK搭建數字孿生技術-可視化平台實現 “知疫”疫情數據可視化平台——發布說明 vector 高性能可視化數據pipeline 平台