可视化平台项目
Posted sunyuhai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了可视化平台项目相关的知识，希望对你有一定的参考价值。
1. 案例介绍
本案例要基于mysql数据库，使用Kettle、Apache Superset实现数据可视化。案例使用MySQL作为数据分析的存储以及查询引擎、以Kettle作为数据处理脚本执行工具、以及Apache Superset实现数据可视化展示。让我们将来能够欧快速实现数据分析、以及可视化开发。
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具体使用方法和安装步骤单独发！！！！
Superset是一款开源的现代化企业级BI。它是目前开源的数据分析和可视化工具中比较好用的，功能简单但可以满足我们对数据的基本需求，支持多种数据源，图表类型多，易维护，易进行二次开发。BI可以将数据进行模型构建，制作成Dashboard，相比于报表，侧重点在于分析，操作简单、数据处理量大。常常基于企业搭建的数据平台，连接数据仓库进行分析。
superset的安装
环境要求：
-
Linux系统
-
Python3的环境
superset具体使用方法和安装步骤单独发！！！！
-- 创建一个用于保存分析数据的数据库
create database if not exists itheima_bi;
-- 数据抽取，将存储在MySQL中的数据源抽取出来，存储在另一个数据库用来分析
对于数据的更新, 我们可能采用按天抽取, 按小时抽取, 或者按周抽取, 一般来说都是按照天来进行抽取更为稳妥
-
所有同步到分析库的表名统一以
ods_源表名开头。例如：-
-
ods_itheima_goods：商品表
-
-
所有用于保存分析结果的表名统一以
app_主题_分析维度开头。例如： -
app_order_paytype：针对支付类型的订单分析
-
app_user_order_top5：针对用户的消费订单总额TOP5分析
-
需求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;
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>
最终展示页面：
以上是关于可视化平台项目的主要内容，如果未能解决你的问题，请参考以下文章
腾讯低代码平台正式开源！可拖拽生成手机项目PC 项目！接私活福利啊！...
重磅：腾讯低代码平台正式开源！可拖拽生成手机PC等项目！接私活福利啊！...
json 可视代码工作室Angular with Firebase片段
我的Android进阶之旅关于Android平台获取文件的mime类型：为啥不传小写后缀名就获取不到mimeType？为啥android 4.4系统获取不到webp格式的mimeType呢？(代码片段
我的Android进阶之旅关于Android平台获取文件的mime类型：为啥不传小写后缀名就获取不到mimeType？为啥android 4.4系统获取不到webp格式的mimeType呢？(代码片段