使用DataV制作實時銷售數據可視化大屏（實驗篇）

課時1：背景介紹

任務說明

ABC是一家銷售公司，其客戶可以通過網站下單訂購該公司經營范圍內的商品，並使用信用卡、銀行卡、轉賬等方式付費。付費成功后，ABC公司會根據客戶地址依據就近原則選擇自己的貨倉，指派合適的快遞人員配送商品
公司在作戰室安置了一個16:9的物理大屏，想把公司實時銷售相關的數據通過大屏展現出來，供公司中高層了解實時情況做決策用。希望展現效果要好，能突出公司實施銷售的關鍵信息，並且由於管理層並非全部懂技術，要求大屏能更直觀、易懂

 

 

作品效果

 

課時2：思路與流程

分析公司的要求，可以得出該大屏以展示業務實時銷售概況以及分析結果為主，並通過分析結果給出優化方案，以達到實時監控及調度的目的

整個大屏設計、實施的步驟主要如下：
搜集信息點=>了解物理大屏=>整理加工信息點=>信息點可視化=>數據預研=>繪制原型稿=>繪制視覺稿

看上去整個流程難度還是比較高的，對設計、實施的人員既有業務能力、技術能力的要求，又需要有設計方面的能力。

好的是，阿里雲可視化大屏工具DataV可以幫新手快速克服以上難題，具備上述基本能力。由於我們分析出該大屏主要用戶實時信息監控，我們可以直接使用DataV提供的實施銷售的模板（有幾個模板均可以支持，選定一個更適合當前場景以及展現效果更貼近自己預想的即可）：

 

 

 

該大屏為通用類的實施銷售監控屏，我們先分析一下該屏的組成：

 

 

具體內容如下：

 

 

如果沒有特殊的需求，可以直接按照這個框架組織內容。實際上該模板已經規定了需要展示大概哪些內容，即已經幫助我們進行了信息點加工、可視化、草稿等幾步的工作，我們需要做的是整理數據，提取類似指標，並將指標擺放到大屏中：

 

 

我們把數據需求提交給數據部門的同事，讓他們按照上面梳理的指標幫我們完成數據清洗和整理，我們要做的就是使用該模板，把相關的指標對應的數據和可視化組件對接起來，調整視覺效果，完成大屏設計和開發。

最終數據同學提供了幾張表，用來支持大屏生成，具體情況如下：

實時訂單表：orders
每日統計表：st_orders_daily
實時城市排名表：city_ranking
實時時段排名表：hour_ranking
實時產品排名表：product_ranking
實時行業統計表：st_customers_job
核心指標表：st_kpi_daily

由於本課程的重點是大屏設計與實現，對於生成指標的簡單SQL我們會給出，感興趣的同學也可以去學習一下基本的SQL，對我們以后做可視化會有幫助

課時3：准備工作：准備模擬數據

本部分用戶需要通過配置一個雲數據庫（RDS for MySQL），創建一個數據庫abc_datav，然后使用該庫模擬業務系統，即將附件中提供的7張表上傳到該庫中去。（下載附件）

具體步驟如下：

1. 使用chrome瀏覽器登陸阿里雲官網 www.aliyun.com，依次填入對應的阿里雲賬號信息，點擊登錄，進入阿里雲官網的管理控制台
   
    

   

2. 點擊產品與服務，在下來菜單中選中全部，在下一集菜單中點擊雲數據庫RDS版，進入RDS管理控制台首頁

   
   
    

   

3. 點擊雲數據庫RDS，進入實例管理界面，切換至地域華東2，點擊創建實例：
   （提示：按量付費創建RDS實例賬戶余額需大於等於100元才能購買，實驗結束后可提現余額，因RDS實例按量付費，建議實驗結束后及時釋放）

   
   
    

   
4. 選擇按量付費，配置實例規格：

• 華東2
• MySQL
• 5.6
• 高可用版
• 經典網絡

• 1核1GB

  
  
   

  
  
  
   

  

5. 返回管理控制台后，在華東2區域找到對應的實例，點擊其后的管理：

   
   
    

   
   
   

   6.進入基本信息頁面，打開左側導航欄中的數據安全性，即可看到白名單設置，點開右側添加白名單分組

   
   
    

   
   
   7.填寫分組名稱，在組內白名單中添加IP地址，然后點擊確定
   IP地址如下：

（139.224.92.81/24,139.224.92.22/24,139.224.92.35/24,139.224.4.30/24,139.224.92.102/24,139.224.4.48/24,139.224.4.104/24,139.224.92.11/24,139.224.4.60/24,139.224.92.52/24,139.224.4.26/24,139.224.92.57/24,11.192.98.48/24,11.192.98.61/24,11.192.98.47/24,10.152.164.34/24,11.192.98.58/24,10.152.164.17/24,10.152.164.42/24,11.192.98.37/24,10.152.164.31/24,11.193.54.74/24,11.193.54.148/24,11.192.98.16/24,10.152.164.14/24,11.192.98.36/24,11.193.75.233/24,11.193.75.205/24,100.104.70.0/24,100.104.81.0/24,100.104.83.0/24）

 

 

8.添加成功后可以在白名單設置中看到對應的IP

 

 

9. 左側導航欄中點擊數據庫管理，目前數據庫列表為空，點擊右側的按鈕創建數據庫

   
   
    

   

10. 輸入數據庫(DB)名稱為abc_datav，點擊確定，開始創建數據庫，期間可以通過點擊右上方的刷新按鈕查看實時狀態

    
    
     

    

11. 點擊左側導航欄的賬號管理，進入賬號管理界面，點擊創建賬號

    
    
     

    

12. 填寫賬號配置信息，包括數據庫賬號為abc_user，密碼為Abc_user123，重復輸入一次確認密碼，同時將數據庫abc_datav的讀寫權限授權給該用戶，點擊確定，開始創建用戶

    
    
     

    

13. 點擊登錄數據庫，在DMS（數據庫管理工具）頁面填寫相關登錄信息后登陸數據庫

    
    
     

    
    
    

    首先RDS實例的基本信息頁獲取數據庫的信息：

    
    
     

    
    
    填寫DMS頁的登錄信息，其數據庫信息為：IP地址加上端口。點擊登錄，進入數據庫的管理頁面
    
     

    

14. 點擊SQL操作，選中SQL窗口，打開SQL操作窗口

    
    
     

    

15. 將下載的文件crt_src_tbl.sql中的內容復制到SQL窗口，點擊執行（或者使用快捷鍵F8），完成表的創建

    
    
     

    

16. 點擊數據方案，選中導入，打開數據導入頁面

    
    
     

    

17. 在導入頁中點擊新增任務，點擊選中文件，選中從附件中下載的文件orders_dyn.sql，點擊開始加載數據

    
    
     

    
    
    

    導入完成后，點擊關閉按鈕，關閉彈窗

    
    
     

    

18. 完成后回到SQL窗口，輸入 select * from orders; 查看結果，查看的主要項為：該表中是否已有數據，在顯示的前100條記錄中，是否有空值（null）等

    
    
     

    
19. 重復17、18兩步，將剩余的7個文件逐個上傳到該數據庫中，包括：

city_ranking.sql
hour_ranking.sql
map_data.sql
product_ranking_dyn.sql
st_customers_job_dyn.sql
st_kpi_daily_dyn.sql
st_orders_daily_dyn.sql

【注意】本實驗中將會使用該數據庫中的表作為大屏展示的數據源，請務必完成此准備工作，方可進行后續步驟

課時4：實戰開發第1步：開通服務

本部分用戶需要使用實名認證過的阿里雲官網賬號登陸阿里雲管理控制台，開通DataV服務。
1. 打開瀏覽器，輸入阿里雲官網地址www.aliyun.com

 

 

2. 使用自己的阿里雲官網賬號登陸控制台：

   
   
    

   

3. 進入控制台，點擊產品與服務，選擇全部，點擊DataV數據可視化：

   
   
    

   
4. 如尚未開通該服務，需要購買開通，點擊立即購買：
   
    

   
   
   5. 在購買詳情頁，點擊立即購買，在支付頁面點擊立即支付：（注：學生認證用戶購買：9.9/年點擊去認證）
   
    

   

5. 支付成功后，點擊管理控制台，進入DataV產品首頁

   
   
    

   

6. 也可以通過點擊控制台左側導航欄中的大數據（數加）下的DataV數據可視化進入

   
   
    

   

7. 首頁面如下：

   
   
    

   
   
   

   至此，服務開通完成，用戶可以通過導航欄中的優秀案例和教程，了解、學習DataV的相關知識

課時5：實戰開發第2步：配置數據集

1. 點擊DataV產品首頁的左側導航欄中的我的數據

   
   
    

   

2. 點擊添加數據

   
   
    

   

3. 在彈出新建數據的窗口中，填寫相關配置信息（根據自己之前配置的RDS信息，填寫該部分內容）

   
   
    

   

4. 點擊測試連接，成功后點擊完成

   
   
    

   

5. 添加后的數據源如下

   
   
    

   
   
   

   至此，數據源添加已經完成，本case中用到的所有數據，均從此RDS for MySQL數據庫中獲取

課時6：實戰開發第3步：大屏開發

本部分將使用模板，基於業務系統的數據，設計、開發一個可視化大屏，其最終效果如下：

 

 

 

我們會把大屏分割成幾個部分，每個部分依次完成。具體的模塊如下圖標注：

 

 

准備工作：

首先，進入DataV首頁，點擊我的可視化，點擊右側面板中的新建可視化：

 

在左側模板中，點擊銷售實時監控：

 

點擊創建大屏：

 

在彈出窗口中指定名字為ABC實時銷售監控大屏，點擊創建：

 

進入大屏設計頁面：

 

在大屏的設計過程中，DataV會自動保存大屏。如果需要查看效果，可點擊右上方的預覽按鈕

 

一、 設定大屏標題

 

① 點擊設計面板中的標題，點擊頁面設置中的數據tab頁，將標題對應的value取值修改為ABC實時銷售大盤：

 

② （可選）標題下的背景裝飾動畫變化幅度太大，容易分散注意力，將其修改一個變化更輕微的裝飾圖片。點擊標題下的裝飾，在樣式頁中，裝飾元素選擇gif6：

 

至此，大屏的標題修改完成
二、 修改公司logo

 

① 點擊左下角的企業logo圖片，在右側樣式頁中，點擊背景圖中的企業logo圖片
在彈出窗口中選擇需要上傳的圖標文件，點擊確定：

 

② 如果企業logo圖標大小不合適的話，可以通過鼠標拖拽單張圖片控件的邊緣調整大小（【注意】其他控件大小也可以通過類似方法調整，后不贅述）

 

三、 銷售額按省區排名

 

① 在DataV設計頁，點擊左側上方的通用標題欄，在右側數據頁將value對應的值改為銷售額分省排名：

 

 

 

③ 點擊輪播列表柱狀圖（在英文標題下），右側數據頁中可以看到，目前demo圖形中使用的是靜態數據：

 

④ 點擊數據頁中的數據源類型后的輸入框，在下拉框中選中數據庫：

 

⑤ 點擊輸入框中的選擇數據庫，選中abc_datav：

 

【注意】③、④、⑤三步介紹了如何將數據源設置為數據庫，后續實驗步驟中會反復用到，再次用到的時候，將直接說：將數據源設置為abc_datav數據庫
⑥ 將下述SQL語句，復制到SQL框中：

 

 

 

⑦ 將鼠標移出SQL框，在數據頁其他空白處點擊一下，此時DataV會開始匹配SQL結果和該控件所需字段，並將結果顯示在屏幕上
【注意】此步操作會頻繁出現在后續配置中，手冊中直接描述為：匹配數據

 

⑧ 可點擊數據頁最下方的查看數據響應結果按鈕，查看該SQL返回的數據：

 

 

 

⑨ 設置刷新頻率。勾選數據頁面下方的自動更新，並將更新時間間隔設置為300秒：

 

至此，模塊銷售額按省區排名設計完成，可通過點擊右上角的預覽按鈕查看效果
四、 本月銷售模塊

 

① 在DataV設計頁，點擊本月銷售模塊通用標題欄，在右側數據頁將value對應的值改為本月銷售進度：

 

② 點擊通用標題欄，該標題欄在①中標題欄的下方，在右側數據頁將value對應的值改為Monthly sales progress；

 

③ 選中單值百分比餅圖，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據：

 

 

 

④ 選中左側的數字翻牌器，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據：

 

 

 

⑤ 選中右側的數字翻牌器，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據：

 

 

 

⑥ 點擊樣式頁面，向下滑動鼠標，找到翻牌器，將前綴內容中的+號刪除，同時將數字的字體顏色改為白色（#FFFFFF）：

 

 

 

至此，模塊本月銷售設計完成，可通過點擊右上角的預覽按鈕查看效果
五、 今日城市模塊

 

① 在DataV設計頁，點擊今日城市模塊通用標題欄，在右側數據頁將value對應的值改為今日城市銷售額排名：

 

② 點擊通用標題欄，該標題欄在①中標題欄的下方，在右側數據頁將value對應的值改為Sales city ranking；

 

③ 選中基本柱圖，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據：

 

select city as x, round(amt/10000,2) as y, 1 as s from city_ranking order by amt desc limit 5; 

 

 

④ 設置更新頻率。在數據頁中勾選自動更新，設置更新時間間隔為180秒：

 

 

 

⑤ 選中下方的通用標題，將數據頁的value設置為銷售額今日增速最快：

 

 

⑥ 選中下方的數字翻牌器，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據：

select city as name, fast_amt/avg_amt*100 as value from (select city, amt as fast_amt from city_ranking order by amt desc limit 1) t1, (select round(sum(amt)/count(distinct city),2) as avg_amt from orders) t2 

 

 

⑦ 設置更新頻率。在數據頁中勾選自動更新，設置更新時間間隔為200秒：

 

 

 

⑧ 點擊樣式頁面，向下滑動鼠標，找到翻牌器，將前綴內容中的+號刪除，同時將數字的字體顏色改為白色（#FFFFFF）：

 

 

 

 

至此，模塊今日城市設計完成，可通過點擊右上角的預覽按鈕查看效果
六、 時段成交模塊

 

 

① 在DataV設計頁，點擊今日城市模塊通用標題欄，在右側數據頁將value對應的值改為時段成交量排名：

 

 

② 點擊通用標題欄，該標題欄在①中標題欄的下方，在右側數據頁將value對應的值改為Sales period ranking；

 

③ 選中基本柱圖，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據：

select hours as x, amt as y, 1 as s from hour_ranking; 

 

 

④ 設置更新頻率。在數據頁中勾選自動更新，設置更新時間間隔為360秒：

 

 

 

⑤ 選中下方的通用標題，將數據頁的value設置為和上個時段相比浮動比例：

 

 

⑥ 選中下方的數字翻牌器，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據：

select concat(t1.hours,'點') as name, (amt_now-amt_before)/amt_before*100 as value from (select hours,round(amt/10000,0) as amt_now from hour_ranking where hours = date_format(now(),'%H') - 1) t1, (select hours,round(amt/10000,0) as amt_before from hour_ranking where hours = date_format(now(),'%H') - 2) t2 

 

 

⑦ 設置更新頻率。在數據頁中勾選自動更新，設置更新時間間隔為480秒：

 

 

 

⑧ 點擊樣式頁面，向下滑動鼠標，找到翻牌器，將前綴內容中的+號刪除，同時將數字的字體顏色改為白色（#FFFFFF）：

 

 

 

 

至此，模塊時段成交設計完成，可通過點擊右上角的預覽按鈕查看效果
七、 品類銷售排名模塊

 

 

① 在DataV設計頁，點擊品類銷售排名模塊通用標題欄，在右側數據頁將value對應的值改為品類銷售額排名：

 

 

② 點擊通用標題欄，該標題欄在①中標題欄的下方，在右側數據頁將value對應的值改為Category sales rankings；

 

③ 選中水平基本柱圖，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據：

select product_name as x, amt as y, 1 as s from product_ranking order by amt desc 

 

 

④ 設置更新頻率。在數據頁中勾選自動更新，設置更新時間間隔為240秒：

 

 

 

至此，模塊品類銷售排名設計完成，可通過點擊右上角的預覽按鈕查看效果
八、 品類銷售占比模塊

 

 

① 在DataV設計頁，點擊品類銷售占比模塊通用標題欄，在右側數據頁將value對應的值改為品類銷售額占比：

 

② 點擊通用標題欄，該標題欄在①中標題欄的下方，在右側數據頁將value對應的值改為Category of sales；

 

 

③ 選中輪播餅圖，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據：

select product_name as type, ceiling(amt) as value from product_ranking order by amt desc 

 

 

④ 設置更新頻率。在數據頁中勾選自動更新，設置更新時間間隔為150秒：

 

 

 

⑤ 在樣式頁的自定義類別里，將標簽5刪除，同時將標簽1、2、3、4的類別名分別改為：
標簽1：家用電器
標簽2：夾子及其配件
標簽3：剪刀，尺子，鋸
標簽4：信封

 

 

⑥ 選中下方的數字翻牌器，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據。在數據頁中勾選自動更新，設置更新時間間隔為270秒：

select product_name as name, floor(amt/10000) as value from product_ranking order by amt desc limit 1; 

 

 

⑦ 點擊樣式頁面，向下滑動鼠標，找到翻牌器，將后綴內容改為萬：

 

 

 

⑧ 選中下方的數字翻牌器，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據。在數據頁中勾選自動更新，設置更新時間間隔為260秒：

select name, value from (select product_name as name, floor(amt/10000) as value from product_ranking order by amt desc limit 2) t order by value limit 1; 

 

 

⑨ 點擊樣式頁面，向下滑動鼠標，找到翻牌器，將后綴內容改為萬：

 

 

 

至此，模塊品類銷售占比設計完成，可通過點擊右上角的預覽按鈕查看效果。
九、 客戶行業模塊

 

 

① 在DataV設計頁，點擊品類銷售占比模塊通用標題欄，在右側數據頁將value對應的值改為客戶行業占比：

 

② 點擊通用標題欄，該標題欄在①中標題欄的下方，在右側數據頁將value對應的值改為Customer industry distribution；

 

 

③ 選中輪播餅圖，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據：

select job as type, ceiling(cnt/10000) as valuefrom st_customers_job 

 

 

④ 在樣式頁的自定義類別里，添加標簽至12個，標簽對應的顏色可以選擇自己喜歡的，同時將標簽的類別名修改為：
標簽1 :學生
標簽2 :公務員
標簽3 :公司管理者
標簽4 :公司職員
標簽5 :專業技術人員
標簽6 :服務行業
標簽7 :制造業
標簽8 :私營企業主
標簽9 :農民工
標簽10:退休人員
標簽11:自由職業者
標簽12:其他

 

 

 

⑤ 選中下方的數字翻牌器，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據。在數據頁中勾選自動更新，設置更新時間間隔為450秒：

select '新增客戶數' as name, new_cust_cnt as value from st_kpi_daily; 

 

 

⑥ 選中右方的數字翻牌器，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據。在數據頁中勾選自動更新，設置更新時間間隔為260秒：

select '新增客戶數占比' as name, new_cust_cnt/ttl_cust_cnt*10000 as value from st_kpi_daily; 

 

 

⑦ 點擊樣式頁面，向下滑動鼠標，找到翻牌器，將前綴內容的+號刪除，后綴內容修改為‱，同時將數字的字體顏色改為白色（#FFFFFF）：

 

 

 

 

 

 

 

至此，模塊客戶行業設計完成，可通過點擊右上角的預覽按鈕查看效果。
十、 一周趨勢模塊

 

 

① 在DataV設計頁，點擊品類銷售占比模塊通用標題欄，在右側數據頁將value對應的值改為銷售額七日趨勢圖：

 

② 選中輪播餅圖，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據：

select date_format(deal_date,'%Y/%m/%d') as x, sum(amt)/10000 as y, 1 as s from st_orders_daily where deal_date between date_add(date_format(now(),'%Y-%m-%d') ,interval -8 day) and date_add(date_format(now(),'%Y-%m-%d') ,interval -1 day) group by deal_date 

 

 

③ 在樣式頁的x軸屬性中，將數據格式選為2016/01/01，將顯示格式選為01月01日：

 

 

 

至此，模塊一周趨勢設計完成，可通過點擊右上角的預覽按鈕查看效果。
十一、 關鍵指標模塊

 

 

① 選中第一個鍵值表格，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據。在數據頁中勾選自動更新，設置更新時間間隔為570秒：

select '新增客戶數' as label, new_cust_cnt as value from st_kpi_daily union allselect '保有客戶數' as label, ttl_cust_cnt as value from st_kpi_daily ; 

 

 

② 選中第二個鍵值表格，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據。在數據頁中勾選自動更新，設置更新時間間隔為600秒：

select '新增訂單數' as label, new_order_cnt as value from st_kpi_daily union allselect '累計訂單總數' as label, ttl_order_cnt as value from st_kpi_daily ; 

 

 

③ 選中第三個鍵值表格，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據。在數據頁中勾選自動更新，設置更新時間間隔為620秒：

select '當日配送貨品數' as label, new_dilivery_cnt as value from st_kpi_daily union allselect '累計配送貨品數' as label, ttl_dilivery_cnt as value from st_kpi_daily ; 

 

 

至此，模塊關鍵指標設計完成，可通過點擊右上角的預覽按鈕查看效果。
十二、 核心視覺模塊

 

 

 

① 選中第一個數字翻牌器，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據。在數據頁中勾選自動更新，設置更新時間間隔為60秒:

select '年度累計銷售總額' as name, sum(amt) as value from st_orders_daily where deal_date >=date_format(now(),'%Y-01-01') 

 

 

② 選中第二個數字翻牌器，在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據。在數據頁中勾選自動更新，設置更新時間間隔為90秒:

select '年度累計同比增長' as name,round((amt2017-amt2016)/amt2017,4)*100 as value from (select sum(case when date_format(deal_date ,'%Y') = date_format(now(),'%Y') then amt else 0 end) as amt2017, sum(case when date_format(deal_date ,'%Y') = date_format(now(),'%Y')-1 and deal_date < date_add(date_format(now(),'%Y-%m-%d') ,interval -1 year) then amt else 0 end) as amt2016 from st_orders_daily) t 

 

 

③ 點擊樣式頁，將翻牌器前綴內容的+刪除：

 

 

 

④ 點擊2D平面地圖，在右側數據頁中點擊區域熱力層：

 

 

⑤ 在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據。在數據頁中勾選自動更新，設置更新時間間隔為1800秒:

select concat(substr(code,1,2),'0000') as id, sum(amt) as value from map_data group by concat(substr(code,1,2),'0000') 

 

 

【注意】圖層的顯示顏色等屬性，可自行到樣式頁去設置。

⑥ 從區域熱力層點擊數據頁的返回按鈕，返回上一層，然后點擊呼吸氣泡層：

 

 

 

 

 

⑦ 在右側數據頁將數據源選擇為數據庫abc_datav，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據。在數據頁中勾選自動更新，設置更新時間間隔為1780秒:

select to_lng as lng, to_lat as lat, amt as value, 1 as type from map_data 

 

 

⑧ 到樣式頁里去調整一下氣泡的大小等屬性，讓整個地圖看上去效果更好，其中呼吸范圍調整為2，動效速度為0.1，漸變范圍0.85，最大尺寸為10，最小尺寸為1：

 

 

 

⑨ 從呼吸氣泡層返回，進入飛線：

 

 

 

 

⑩ 在右側數據頁將數據源選擇為數據庫abc_datav，將from字段映射為start，將to字段映射為end，在SQL框中輸入下列SQL語句，移動並點擊鼠標，匹配數據。在數據頁中勾選自動更新，設置更新時間間隔為120秒:

select concat(from_lng,',',from_lat) as start, concat(to_lng,',',to_lat) as end, "起點" as fromInfo, "終點" as toInfo from map_data order by rand() 

 

 

 

 

⑪ 可在樣式頁里調整飛線的相關屬性，以獲得最佳展現效果

 

 

⑫ 在本例中無需使用時間軸，因此，選中時間軸，將其刪除。同時可以調整中心地圖的位置，直至看上去最合適

 

 

至此，模塊核心視覺模塊設計完成，可通過點擊右上角的預覽按鈕查看效果

課時6：實戰開發第4步：發布

首先，點擊右上角發布按鈕

 

 

在彈出窗口中，打開發布開關，復制鏈接，點擊確定，大屏就發布成功了。
在瀏覽器中輸入鏈接就可以看到制作的數據大屏。
將鏈接分享給其他人，這樣別人也可以看到你的炫酷大屏（如果設置了【驗證密碼】，就需要輸入該密碼才可以看到）。