第一張FVS範本

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。

關於插件的安裝與配置要求，請參見文檔：FVS安装及配置要求 。

1.1 版本

1.2 預期效果

本文將簡單介紹如何製作一張 FVS 企業戰情室報表，其預期效果如下圖所示：

• 組件聯動：餅圖或地圖點選不同地區資料時，條形圖、柱形圖、表格以及對應的標題均聯動展示對應地區的資料

• 指標卡：使用富正文組件展示匯總資料。

2.1 建立範本

點選設計器左上角「檔案>建立視覺化看板>建立空白看板」，自訂名稱為「第一張FVS範本」，保持預設尺寸，點選「建立範本」。

2.2 準備資料

建立兩個資料庫查詢，輸入 SQL 查詢語句分別如下：

• ds1 ：SELECT * FROM 銷量 ，取出「銷量」表中的所有資料。

• ds2 ：SELECT * FROM 銷量  ${if(len(area) == 0,"","where 地區 = '" + area + "'")} ，可實現根據參數 area 獲取「銷量」表中對應地區的資料，若參數為空則獲取全部資料。詳情可參考文檔：參數為空查詢全部 。

2.3 設計範本

2.3.1 設計餅圖

新增餅圖組件，綁定資料為 ds1 資料集中的欄位，系列名為「地區」，值為「銷量>求和」，再適當修改樣式。

為其新增一個標題組件，內容為「區域銷量資訊」。

2.3.2 設計柱形圖

新增柱形圖組件，綁定資料為 ds2 資料集中的欄位，分類為「地區」，系列名為「產品」，值為「銷量>求和」，可根據參數 area 展示不同地區下各產品的銷量。

為其新增一個標題組件，標題內容點選 fx 輸入公式 $area+"區域各產品銷量" 。注：直接輸入正文時要在公式前加一個 = 。

2.3.3 設計條形圖

新增條形圖組件，綁定資料為 ds2 資料集中的欄位，分類為「銷售員」，系列名使用欄位名為「銷量」，可根據參數 area 展示不同地區銷售員的銷量。

使用 Ctrl+C/V 複製貼上柱形圖的標題組件，修改公式中的文字內容即可。

2.3.4 設計表格

新增表格組件，點選「編輯組件」進入表格編輯介面。

輸入標題行後，將 ds2 資料集中對應欄位拖入儲存格，其中「銷量」欄位需修改資料設定為「匯總>求和」。資料設定好後可再調整下字體大小及儲存格樣式等。

調整好後點選「傳回企業戰情室編輯器」傳回畫布，調整表格大小，設定表格內容適應方式為「雙向鋪滿」。

按住 alt（或option）鍵，直接拖曳柱形圖的標題組件可完成快捷複製貼上，修改標題內容即可。

2.3.5 設計地圖

新增區域地圖組件，設定地圖邊框為「中國行政區」，GIS圖層為「標準>無」。

綁定 ds1 資料集中欄位，區域名為「地區」，系列名使用欄位名為「銷量」，再適當修改樣式。

2.3.6 設計富正文

新增富正文組件，透過輸入文字和使用公式獲取匯總資料，以實現指標卡。

獲取資料集資料的公式選用的是 Value ，首先查看 ds1 資料集中「地區」和「銷量」欄位列序號分別是 1 和 5 ，則輸入公式 sum(VALUE("ds1",5,1,"華北")) ，即可獲得華北地區的總銷量。

設定完成後，按住 alt（或option）鍵，直接拖曳富正文組件完成快捷複製貼上，修改內容即可。

2.3.7 設計交互事件

要實現最終效果需要給「餅圖」和「地圖」設定交互事件，選中組件後，在右側配置面板選擇「交互>點選事件」，新增點選事件選擇「組件聯動」。

在彈出的設定框中輸入事件名稱，選擇聯動範圍為「全局聯動」，參數名即參數 area ，參數類型均為「當前組件欄位」，餅圖的參數內容為「系列名」，地圖的參數內容為「區域名」。

2.3.8 儲存預覽

在範本右上角點選「儲存」或「預覽」按鈕儲存範本，首次儲存範本時，需設定儲存位置，儲存後預覽範本，點選「餅圖」或「地圖」即可聯動其他組件資料變化。

2.4 範本美化

2.4.1 組件對齊

我們可以透過新增輔助線幫助對齊組件，滑鼠懸浮在畫布上方和左側的刻度尺時，出現紅色虛線，點選即可新增輔助線。

新增多條輔助線，行動組件位置到輔助線附近，可自動吸附組件。使用完輔助線雙擊即可刪除，不刪除則始終顯示在畫布中，預覽時不會顯示。

2.4.2 修改組件名稱

在組件列表雙擊組件名稱，或在組件配置區均可修改組件名稱。

2.4.3 資源複用

FVS 內建有多種圖片、視頻素材，可用於組件邊框背景、頁面背景、圖片組件、視頻組件等等，這裏我們使用圖片資源來美化一下「頁面背景」。

選中分頁，頁面背景選擇「我的資源」，選擇合適的背景後點選「完成」。選擇圖片後，可修改圖片的填充方式和色相。

2.4.4 組件動畫

設定組件動畫後，每次載入範本，或範本切換分頁時，組件會有進出的動畫效果。本例範本由於只有一個分頁，我們僅設定進入動畫作為示範。

選中地圖組件，在「動畫」中新增進入動效為「向上進入」；框選住左側的組件，將其組合在一起，給組合新增進入動效為「向右進入」。

儲存範本後，在瀏覽器中重新載入原來預覽的範本，可以看到左側組件和地圖組件有進入動效，其餘組件沒有動效。

點選下載範本：第一張FVS範本.fvs