Davinci介紹：
Davinci是一個DVAAS（Data Visualization as a Service）平臺解決方案。Davinci面向業務人員/數據工程師/數據分析師/數據科學家，致力於提供一站式數據可視化解決方案。既可作爲公有云/私有云獨立使用，也可作爲可視化插件集成到三方系統。用戶只需在可視化UI上簡單配置即可服務多種數據可視化應用，並支持高級交互/行業分析/模式探索/社交智能等可視化功能。
Davinci源碼大概分爲三部分：
- 採用React的前端工程
- 採用Spring Boot的後端工程
- 採用Jekyll + Minmal Mistakes的文檔工程，用來介紹Davinci的用戶操作方法
官網地址
http://college.creditease.cn/techOpenSource#Davinci
https://edp963.github.io/davinci/
GitHub地址
https://github.com/edp963/davinci
目錄
前端部分代碼在Davinci源碼根目錄的 webapp/ 目錄中
目錄結構
├── app # 主應用源碼
├── assets # 資源文件
├── components # 通用組件
├── containers # 路由容器組件
├── utils # 通用實用方法
└── app.tsx # 主應用入口
├── internals # 開發工程文件
├── libs # 改動後的項目依賴
├── server # 開發服務器
├── share # 分享頁源碼
└── package.json
安裝
https://edp963.github.io/davinci/docs/zh/1.1-deployment
模塊架構
支持的數據源
功能特點
- 數據源
- 支持多種 JDBC 數據源
- 支持 CSV 數據文件上傳
- 數據模型
- 支持友好 SQL 編輯器進行數據處理和轉換
- 支持自動和自定義數據模型設計和共享
- 可視化組件
- 支持基於數據模型拖拽智能生成可視化組件
- 支持各種可視化組件樣式配置
- 支持自由分析能力
- 數據門戶
- 支持基於可視化組件創建可視化儀表板
- 支持可視化組件自動佈局
- 支持可視化組件全屏顯示、本地控制器、高級過濾器、組件間聯動、羣控控制器可視組件
- 支持可視化組件大數據量展示分頁和滑塊
- 支持可視化組件 CSV 數據下載、公共分享授權分享以及可視化儀表板的公共分享和授權分享
- 支持基於可視化儀表板創建數據門戶
- 數據大屏
- 支持可視化組件自由佈局
- 支持圖層、透明度設置、邊框、背景色、對齊、標籤等更豐富大屏美化功能
- 支持多種屏幕自適應方式
- 用戶體系
- 支持多租戶用戶體系
- 支持每個用戶自建一整套組織架構層級結構
- 支持淺社交能力
- 安全權限
- 支持 LDAP 登錄認證
- 支持動態 Token 鑑權
- 支持細粒度操作權限矩陣配置
- 支持數據列權限、行權限
- 集成能力
- 支持安全 URL 嵌入式集成
- 支持 JS 融入式集成
- 多屏適應
- 支持大屏、PC、Pad、手機移動端等多屏自適應
網上找到一個去掉郵箱驗證的版本
https://github.com/andotorg/davinci-boot
二、實際使用介紹
Step 1：增加數據源
點擊Source界面右上角“+”，在Source List裏新增數據源（圖2），上傳CSV文件至指定數據庫中（圖3），小編使用的數據庫爲MySQL。
（圖2）
（圖3）
上傳完CSV文件之後，就來到了我們特別重要的一步：寫SQL、求出同比環比增長率。
計算同比環比可藉助SQL裏的window窗口函數實現。MySQL數據庫8.x版本才支持window函數，然而小編所用數據庫版本爲5.x，升級比較麻煩，所以小編在這裏使用Moonbox計算同比環比增長率。步驟如下：
（1）把 CSV文件對應數據源掛載到Moonbox計算引擎中。
(圖4)
（2）在Source界面繼續添加來自Moonbox的數據源，小編將其命名爲“growthSource”，連接Url寫Moonbox jdbc服務地址（例：jdbc:moonbox://localhost:10010/growthSource），注意將Moonbox jdbc 驅動放至Davinci lib包下。
(圖5)
點擊保存，就新增了一個JDBC類型的數據源。
Step 2：添加View
點擊View界面右上角“+”，出現圖6界面。【View是 Davinci 中非常重要的概念，所有的 SQL 邏輯都需要在這裏創建，所有在圖表上展示的數據都是通過這裏的 SQL 獲取，可視化建模和團隊數據權限控制也在這裏進行。（引自Davinci用戶手冊）】
(圖6)
點擊圖6左上角的“選擇一個Source”，選擇上一步中新增的“growthSource”數據源，接着就是寫SQL語句了，求同比與環比增長率的SQL語句分別如代碼塊7、代碼塊8所示。
<span style="font-family: 黑體, SimHei;">select g1.year,g1.month, g1.box_office_mln, g1.last_year_month_box_office_mln, round((g1.box_office_mln - g1.last_year_month_box_office_mln)/g1.last_year_month_box_office_mln * 100.0, 2) asbox_office_mln_year_growth, g1.advertising_revenue_mln, g1.last_year_month_advertising_revenue_mln, round((g1.advertising_revenue_mln - g1.last_year_month_advertising_revenue_mln)/g1.last_year_month_advertising_revenue_mln * 100.0, 2) as advertising_revenue_mln_year_growth, g1.screening_ths, g1.last_year_month_screening_ths, round((g1.screening_ths - g1.last_year_month_screening_ths)/g1.last_year_month_screening_ths * 100.0, 2) asscreening_ths_year_growth, g1.audience_mln, g1.last_year_month_audience_mln, round((g1.audience_mln - g1.last_year_month_audience_mln)/g1.last_year_month_audience_mln * 100.0, 2) as audience_mln_year_growth from (select g.year, g.month, g.box_office_mln, lead(box_office_mln) over(partition by g.month order by g.year desc) aslast_year_month_box_office_mln, g.advertising_revenue_mln, lead(advertising_revenue_mln) over(partition by g.month order by g.year desc) as last_year_month_advertising_revenue_mln, g.screening_ths, lead(screening_ths) over(partition by g.month order by g.year desc) aslast_year_month_screening_ths, g.audience_mln, lead(audience_mln) over(partition by g.month order by g.year desc) as last_year_month_audience_mln from GrowthRate_SQL g order by g.month, g.year desc) g1;<br></span>
(代碼塊7)
<span style="font-family: 黑體, SimHei;">select g1.year,g1.month , g1.box_office_mln, g1.last_month_box_office_mln, round((g1.box_office_mln - g1.last_month_box_office_mln)/g1.last_month_box_office_mln * 100.0, 2) as box_office_mln_month_growth, g1.advertising_revenue_mln, g1.last_month_advertising_revenue_mln, round((g1.advertising_revenue_mln - g1.last_month_advertising_revenue_mln)/g1.last_month_advertising_revenue_mln * 100.0, 2) asadvertising_revenue_mln_month_growth, g1.screening_ths, g1.last_month_screening_ths, round((g1.screening_ths - g1.last_month_screening_ths)/g1.last_month_screening_ths * 100.0, 2) as screening_ths_month_growth, g1.audience_mln, g1.last_month_audience_mln, round((g1.audience_mln - g1.last_month_audience_mln)/g1.last_month_audience_mln * 100.0, 2) asaudience_mln_month_growth from (select g.year, g.month, g.box_office_mln, lead(box_office_mln) over(partition by g.year order by g.month desc) as last_month_box_office_mln, g.advertising_revenue_mln, lead(advertising_revenue_mln) over(partition by g.year order byg.month desc) as last_month_advertising_revenue_mln, g.screening_ths, lead(screening_ths) over(partition by g.year order by g.month desc) as last_month_screening_ths, g.audience_mln, lead(audience_mln) over(partition by g.year order by g.month desc) as last_month_audience_mln from GrowthRate_SQL g order by g.year, g.month) g1;<br></span>
(代碼塊8)
注：這裏小編增加了兩個“View”，分別是yearGrowth和monthGrowth。另外，爲了方便計算，在寫SQL時，四列主數據的後面生成了一列新數據，用來表示去年同月或同年上月的數據。
點擊右下角“Execute”執行SQL語句，yearGrowth和monthGrowth裏面的數據分別發生如下變化：
(圖9)
(圖10)
點擊“Model”進行可視化建模，也就是數據中，哪幾項用作維度，哪幾項用作指標。更改完畢後，點擊“保存”。在這兩個View中，小編僅用年、月作爲維度，其餘都作爲指標。
Step 3：製作Widget
可視化組件Widget是 Davinci 中功能最強大也最複雜的部分。同一個數據視圖可以被多個可視組件使用，並用不同的圖形展現。
在展示同比環比數據方面，我們一般會用柱狀圖或者折線圖來表示，而在Davinci所支持的透視驅動和圖表驅動裏，都有柱狀圖和折線圖。它們具體有什麼區別呢？讓我們在實例中感受一下吧~
注：想了解透視驅動和圖表驅動？請參考Davinci用戶手冊：
https://edp963.github.io/davinci/widget_guide.html
點擊Widget界面右上角“+”，選擇一個View。選擇完畢後，出現圖11所示界面。
(圖11)
其中，分類型字段對應View中設置的是維度的字段，數值型字段對應指標字段。當鼠標懸停在圖形圖標上，系統提示圖形的配置要求，滿足條件生成圖形。
例如，小編想要了解一下2017年下半年各月票房的環比增長率趨勢，用透視驅動中的柱狀圖表示。在這個需求中，簡簡單單拖拽幾個字段就能配製出小編想要的圖表。
選擇“monthGrowth”這個View，將鼠標放在柱狀圖圖標上，我們會發現要做這個柱狀圖會需要“0到多個維度”及“1到多個指標”。既然小編想看的是各月環比增長率，那維度這裏我們就需要放上“month”字段（點擊字段下拉菜單可以排序），指標則是票房環比增長率字段。
接下來我們就需要用到“篩選”一項，在小編的原始數據中，年份裏包括2017和2018年，月份裏有12個月。這裏小編的要求是“2017年下半年”，因此需要將“year”和“month”字段都拖到篩選欄裏，並且按照自己需求配置篩選。這幾項配置完以後，出現瞭如圖12所示界面：
(圖12)
如果覺得單單隻看圖形，不夠清晰明瞭，我們還可以將票房環比數據拖進標籤欄，最終如圖13所示：
(圖13)
當然，大家也可以根據自己的喜好配置柱狀圖顏色、標題顏色及大小以及座標軸顏色等（圖14）。
(圖14)
點擊右上角“保存”，小編就成功製作了一個Widget。當然，這個Widget也可以用折線圖來表示（圖15），完全看個人需求~
(圖15)
再例如，想試試用圖表驅動裏的折線圖來展示一下2018年各月廣告收入的同比增長率。這時候就要選擇“yearGrowth”這個View了。然後將鼠標放在圖表驅動的折線圖圖標上，我們會發現要做這個折線圖需要“1個維度”及“1到多個指標”。
同樣，將“month”字段拖入維度欄，“廣告收入同比增長率”字段拖入指標欄。
Hmmmmm，就完成了。（圖16）
(圖16)
是不是過於簡單了？
但是大家有沒有發現一個問題：在這個數據配置欄裏並沒有“標籤欄”，但是折線圖中依然有數字。
原來這裏的標籤設置在樣式配置中。
勾選樣式配置中的“顯示標籤”，數字就出現在了折線圖中（圖17）。
(圖17)
且慢！小編似乎發現了折線圖可以變換面貌。點擊了一下，發現果然平滑的折線圖更符合小編心意。於是最終的“2018年各月廣告收入同比增長率”折線圖製作完成！（圖18）
(圖18)
最後例如，小編想看一下2018年各月場次的增減與各月廣告收入的多少有沒有關係。透視驅動和圖表驅動裏的柱狀圖和折線圖都可以表示，小編暫且選擇透視驅動裏的折線圖。
同樣還是將需求所需字段拖入維度欄和指標欄 — “month”拖入維度欄，“廣告收入”和“場次”拖入指標欄，把“year”拖入篩選欄，選擇出2018年。完成！（圖19）
(圖19)
值得一提的是，在這裏我們還可以按照自己喜好變換指標欄中的圖形。（圖20）
(圖20)
於是，小編就這樣靠着拖拉拽完成了很多Widget的製作。
三、Display
最終，我們來到了展示界面。在展示界面，分別有Dashboard和Display兩種展示方式。Dashboard裏面有很多更爲高級的功能，比如聯動關係配置和鑽取設置。
然而，膚淺的小編暫時被Display展示吸引住了，所有興趣都掛在了Display上面，因此，本文中小編只介紹Display展示，Dashboard功能之後再做詳細介紹。
下面我們來介紹一下Davinci的Display展示功能。
其實也沒有什麼介紹的，直接上圖吧！
(圖21 簡約風)
(圖22 漫畫風)
(圖23 科技風)
如圖所示，在Display的展示中，我們可以自己更改背景顏色或上傳背景圖片。設置好背景之後，點擊左上角的“Widgets”圖標，上傳自己想展示的圖表，排列成自己喜歡的形狀，風格任君選擇，一個個大屏就這樣製作完成！
以上便是小編用Davinci展示同比環比的過程。由於數據是自己編的，難免會有不符合實際之處，敬請大家諒解。
另外，Davinci一直在不斷的成長中。未來，我們還是支持在Davinci Widget中直接計算出同比環比增長率這項功能，還請大家耐心等待，繼續支持。
來源：宜信技術學院