可视化平台项目

时间：2020-03-04 11:51:25 收藏：0 阅读：101

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>

最终展示页面：

原文：https://www.cnblogs.com/sunyuhai/p/12408510.html