元件說明

5 自助儀表板-元件說明

元件是儀表板呈現資源的媒介，作為儀表板組成的最小單位，根據資源的類型，主要分為：圖表元件和文字、URL連結等其他元件。

系統提供元件工具列，滿足對元件的“最大化顯示”、“移除”等操作，如下圖所示：

元件工具列從左至右說明如下：

圖示

名稱

說明

作為篩選器

用於將目前元件設置為篩選器，將滑鼠按一下觸發的值傳遞給儀表板其它元件並更新相應結果。詳情請參見組件篩選器章節。

設置跳轉規則

用於以目前組件為源資源實現資源間的跳轉效果。詳情請參見跳轉章節。

元件樣式

用於設置目前元件的樣式。詳情請參見元件樣式章節。

作為篩選器

用於將目前組件設置為篩選器的快捷按鈕。詳情請參見組件篩選器章節。

最大化

用於最大化顯示目前元件資源，此時工具列提供還原圖示（），實現元件資源顯示還原。

移除

用於將目前組件刪除。

5.1 自助儀表板-圖表元件

概述

圖表元件以資料視覺化，圖形化的方式將各個領域的資料進行展示，可以更直觀地顯示資料、對比資料、分析資料，使晦澀難以理解的資料變得簡單。

目前產品包含的圖表元件主要分三種：清單表、交叉表及圖形：

操作入口

選擇拖拉新建自助儀表板介面的元件欄圖示，從左到右依次為：清單表、交叉表和圖形元件。

5.1.1 設計原理

術語說明

圖表對資料的展示來源是依賴於提前設計好的自助資料集或分析主題，為了賦予資料合理的分析意義，便於多角度的對資料進行分析呈現，需先瞭解相關術語，具體說明如下：

術語

說明

維度

在製作報表過程中的一種資料角色，主要指進行資料分析的角度，比如分析降雨，可以從“區域”、

“時間”兩個維度進行分析。包含了字串、日期等類型的欄位。

量值

在製作報表過程的另一種資料角色，主要指進行資料分析的指標。比如分析降雨，可以從“降雨量”、

“降雨時間”兩個量值進行分析。包含可以匯總的數值欄位。

清單表

純清單式的報表樣式，可直接展示維度和量值的關係，並最終以明細資料進行報表展示。

交叉表

實現資料的交叉分析，具體是對資料在不同維度進行交叉呈現，進行多角度結合分析的一類報表，並且通過不同屬性的比較，細分，使分析結果更有意義。

圖形

以圖形化的方式對資料進行展示，可以更直觀地顯示資料、對比資料、分析資料。

智能配圖

可對添加到列區和欄區的欄位快速篩選展示方式。

標記

定義圖形子圖項、顏色、標籤、提示等圖形屬性。

詳細介紹

智能配圖

依據對維度和量值的構建形式，目前系統支援三類圖表的資料呈現，並根據每一種展示都提供了相關設定建議，使用者使用中對於製作圖形資料不瞭解的情況下，可以根據圖形設定建議拖拉對應的欄位。

1、表格型：基於行列的表格資料構建，主要有兩種：

1) 清單表：純清單式的報表樣式，可直接展示維度和量值的關係。

操作說明：維度和量值通常都在欄區構建，允許包含多個維度及量值。系統對清單表的配圖建議，如下圖所示：

根據配圖建議，將1個或多個維度/量值拖拉到欄區即可。

2)交叉表：實現資料的交叉分析，具體是對資料在不同維度進行交叉呈現，進行多角度結合分析的一類報表，可彌補了獨立維度（如清單表）進行分析無法發現的一些問題，並且通過不同屬性的比較，細分，使分析結果更有意義。

操作說明：將維度分別添加到欄區和列區構建報表樣式，而欄區和列區展開的交叉區域為資料區，用來構建量值。系統對交叉表的配圖建議，如下圖所示：

根據配圖建議，將維度拖拉到列區、欄區，量值拖拉到相應的標記項中即可。

2、坐標軸型：基於坐標軸（也可以說是XY軸或者橫軸縱軸）的資料構建，通常維度或者量值分別規劃到橫軸或者縱軸上。系統分別以行、列來標識橫軸和縱軸。

支援圖形：直條圖、瀑布圖、折線圖、面積圖、散佈圖、單Y聯合圖、雙Y聯合圖、熱力圖

操作說明：不同類型的圖形可根據系統提供的智慧配圖建議，拖拉對應的欄位，具體如下圖所示：

根據配圖建議，將維度或量值拖拉到列區、欄區或者相應的標記項中即可。

3、非坐標軸型：這種類型的圖形只表現一個量值，和多個維度加一個或兩個量值的情況。

支援圖形：圓餅圖、烈日圖、詞雲圖、關係圖、雷達圖、油量圖、樹圖、桑基圖、漏斗圖、地圖

操作說明：製作方式同坐標軸型的圖形，都可根據系統提供的智慧配圖建議，拖拉對應的欄位，如下圖所示：

根據配圖建議，將維度或量值拖拉到列區、欄區或者相應的標記項中即可。

標記

在創建圖形時，常常需要定義圖形的形狀、顏色、標籤、提示等圖形屬性。在系統中，這些都將通過標記區來完成，標記區樣式如下：

標記區主要分為如下三項區域：

子圖項：用於切換圖形的子圖類型。
設定選項：用於設置元件圖表中不同的圖形屬性，基本設定選項包括“顏色”“標籤”“提示”，還有3個特殊按鈕，只有選擇對應的圖表才會顯示設定項；設置方法是：直接將“資料區”的欄位拖拉到設定選項框內即可，同時按一下按鈕還可以對細節樣式等進行調整。
資訊項：顯示目前圖表元件的欄位資料資訊。

可通過下圖瞭解功能項：

特殊按鈕：

角度：智慧配圖的圖形選擇圓餅圖、烈日圖時顯示。
大小：智慧配圖的圖形選擇散佈圖、詞雲圖、關係圖、樹圖、漏斗圖時顯示。
匯總：智慧配圖選擇交叉表時顯示。

子圖項

子圖項是指用於設置具有子類圖形的一項設置。目前系統中，只支援直條圖、折線圖、面積圖、圓餅圖、散佈圖和關係圖具有子類圖形。

子圖頂設置如下圖紅框標識處：

選定元件後，通過子圖項的下拉清單，選擇目標子類圖形即可將所選元件中的圖形切換成子類圖形。如下圖所示：

直條圖、折線圖、面積圖、圓餅圖、散佈圖、地圖、關係圖、雷達圖及漏斗圖支援的子類圖形如下表所示：

圖形

子類圖

直條圖

橫條圖、堆疊直條圖、堆疊橫條圖、極座標直條圖、極座標堆疊直條圖

折線圖

曲折線圖、階梯線、堆疊折線圖、堆疊曲折線圖、堆疊階梯線、極座標曲折線圖

面積圖

曲線面積圖、堆疊面積圖、堆疊曲線面積圖

圓餅圖

環形圖、南丁格爾玫瑰圖（面積模式）、南丁格爾玫瑰圖（半徑模式）

散佈圖

大數據散佈圖

地圖

預設是中國地圖，可切換圖形選擇下級地圖或者自訂的地圖區域

關係圖

力導向關係圖、環形關係圖

雷達圖

棱角面積、棱角線、圓環面積、圓環線

漏斗圖

標準、昇冪、左降冪、右降冪、左昇冪、右昇冪

設定選項

不同圖表所包含的設定選項有區別，標記區的設定選項如下圖所示：

顏色

顏色是系統內建的配色方案集合，用於設置圖形的顏色體系，按一下“標記區”的顏色標記項，會進入顏色設置介面，可以選擇不同的配色方案。

系統支援對“維度”或者“量值”欄位進行配色。

配色操作的方法：拖拉圖形元件到“呈現區”後，將“資料區”中的欄位拖拉到“標記區”的顏色標記項內，這時候可以看到圖形呈現區的上方會自動出現顏色圖例，用以說明顏色和“發貨區域”的對應關係，如下圖所示：

系統為“維度”或“量值”欄位提供不同的配色方案：

1）以“維度”欄位為配色基礎時，不同維度值顯示不同的顏色色系。如下圖所示：

2）以“量值”欄位為配色基礎時，以同一色系顯示，只是不同的量值值以漸變色來區分。如下圖所示：

標籤

標籤用於設置是否在圖形中顯示資料資訊。

如下圖所示：

將“數量”欄位從“資料區”中拖拉到“標記區”的標籤標記項，可以在圖形中以標籤形式顯示所選欄位的資料，如下所示：

按一下標籤標記項，彈出“標籤設置”對話方塊，還可以對標籤內容進行是否顯示以及位置和文字樣式的設置。如下圖所示：

提示

提示用於設置顯示除了在列欄區和標記區已選擇的欄位外的其它欄位的詳細資訊。

將“數量”欄位從“資料區”中拖拉到“標記區”的提示標記項內，所選欄位的資料會在圖形中以提示資訊形式顯示。

如下圖所示：

按一下提示標記項，彈出“提示設置”對話方塊，可以對提示內容進行是否顯示以及樣式的設置。如下圖所示：

大小

大小是關係圖、散佈圖、樹圖、桑基圖、漏斗圖特有的設定選項，這些圖形中存在泡泡點元素，通過“標記區”的大小標記項對泡泡點大小進行設計。

設置方法：從“資料區”中拖拉量值欄位到“標記區”的大小標記項中。

按一下大小標記項，彈出“大小設置”對話方塊，可以對提示內容進行是否顯示以及樣式的設置。如下圖所示：

角度

角度是圓餅圖和烈日圖特有的設定選項，用於標識進行資料比例計算的欄位。

設置方法：將量值欄位拖拉到“標記區”的角度標記項。效果如下圖所示：

匯總

匯總是用於顯示交叉表的量值欄位。

設置方法：將量值欄位拖拉到“標記區”的匯總標記項。效果如下圖所示：

資訊項

標記區的資訊項用於顯示拖拉到“設定選項”的欄位。如下圖所示：

在資訊項中，允許對欄位進行其它操作，方法：滑鼠停放在欄位上，顯示下拉按鈕，按一下下拉按鈕，彈出功能表，如下圖所示：

在該功能表中可以對目前欄位進行量值值的計算設置，如下圖所示：

在該功能表中可以對目前欄位進行排序方式設置，如下圖所示：

5.1.2 清單表元件

概要說明

清單表，是圍繞同一個專案或物件進行全量資訊及資料記錄的一類基礎報表，我們也可以稱其為“一維表”。

清單表只允許把“維度”和“量值”值拖拉到欄區，量值預設“匯總”。

下圖的清單表顯示圍繞“產品”的資料資訊。

特點：

1）可以展示資料詳情，細微性可以很細。

2）不適合多維度資料。

3）不支援資料匯總。

量值計算

系統支援對清單表中的量值指標進行合計、最大值、最小值、平均值、計數、唯一計數的計算。

設置量值計算：在“欄區”量值欄位的下拉式功能表中選擇量值，在下級功能表中選擇計算方式即可。如下圖所示：

表格設置

系統支援清單表的標題、凍結欄頭、資料行顏色、分頁等設置。

詳情請分別參見基本、標題列、表頭、資料、分頁章節內容。

排序操作

系統支援清單表在表格端的排序操作。

滑鼠停留在表格端的欄頭欄位，顯示排序鍵（如下圖紅框標識），其中：尖向上的三角形表示“昇冪”，尖向下的三角形表示“降冪”。

按一下三角形或者欄頭任意點按一下，對目前列進行排序：三角形選中狀態（即目前資料列處於“昇冪”或“降冪”）時，以藍色顯示。

篩選器設置

系統支援將清單表作為篩選器，用於實現通過清單表過濾其它資源元件的資料。

設置入口如下：

清單表作為篩選器的詳情請參見組件篩選器章節內容。

跳轉規則設置

系統支援為清單表設置跳轉規則，實現通過清單表跳轉到其它資源的互動效果。

設置入口如下：

清單表設置跳轉規則詳情請參見跳轉章節內容。

複製功能

清單表支援複製功能。

選擇某行或某個儲存格，滑鼠右鍵複製或按Ctrl+C進行複製。

5.1.3 交叉表組件

概要說明

交叉表是表格呈現資料的一種基礎報表，是行、列都有分組的報表，支援對量值的匯總。

系統對交叉表的組織方式：欄區或列區必須與匯總區結合使用才可以呈現資料，且通常欄區或列區使用“維度”，匯總區使用“量值”。

交叉表樣結構和系統設計結構的對應關係如下圖所示：

欄區：只能拖拉“維度”；若拖拉了“量值”則系統預設轉成“維度”。
列區：只能拖拉“維度”；若拖拉了“量值”則系統預設轉成“維度”。
匯總區：只支援“量值”。拖拉“量值”指標預設進行匯總；拖拉的“維度”指標轉化為“量值”預設進行計數。

下圖是常用的一種交叉表，它從產品、時間和區域這三個維度來展示“銷售額”和“銷售量Quantity”的匯總資料。

特點：支援多維度。

組合效果

交叉表在實際的應用中，列區或欄區必須與匯總區結合使用才有意義。因此，交叉表的情況主要有如下三種：

組合情況

效果

情況1：

欄區：維度

匯總區：量值

情況2：

列區：維度

匯總區：量值

情況3：

欄區：維度

列區：維度

匯總區：量值

表格設置

系統支援通過“元件樣式”對交叉表的標題、凍結欄頭、列頭背景及字體、資料行顏色、分頁等設置。

詳情請分別參見基本、標題列、欄頭、列頭、資料、分頁章節內容。

表格端操作

系統支援交叉表在表格端執行排序和分級排序操作。

排序

系統對交叉表支援的排序類型分為：“總體排序”和“分級排序”兩種。

總體排序

總體排序是指將所有資料按照指定列的資料大小進行昇冪或降冪排列。

在最內層欄頭上按一下，顯示排序功能表，如下圖所示：

上圖昇冪後的效果如下：

分級排序

分級排序是指對最小的分組維內資料按照指定列的資料大小進行昇冪或降冪排列。

上圖分級昇冪後的效果如下：

取消

用於取消目前列的排序或分級排序操作。

展開/收縮

系統支援具有維階層的維度欄位進行展開/收縮呈現。

展開

滑鼠停留在具有維階層欄位欄頭或列頭，顯示展開圖示：

展開下一層的效果如下：

收縮

滑鼠停留在已展開的欄位欄頭或列頭，顯示收縮圖示：

列欄區欄位操作

系統支援交叉表在列區或欄區執行排序和分類匯總操作。如下圖所示：

分類匯總

分類匯總是指以指定維度為匯總範圍執行總和計算，可以實現小分類項的“小計”和總分類項的“合計”。

例如，下圖中對“產品類別”和“年”這兩個維度執行分類匯總>顯示設置，即可以實現對“年”維度中的資料進行“小計”，對“產品類別”維度中的資料進行“合計”。

上圖中取消功能表用於撤銷對目前欄位維執行的分類匯總操作。

“小計”和“合計”的效果如下圖所示：

排序方式

系統支援對維度欄位執行昇冪或降冪的排序設置。

通過對維度欄位的排序方式定義，可以實現總體排序和分級排序效果。

移除

用於將目前欄位從列區或欄區中刪除，與欄位上的刪除圖示“”作用一樣。

篩選器設置

系統支援將交叉表作為篩選器，用於實現通過交叉表過濾其它資源元件的資料。

設置入口如下：

交叉表作為篩選器的詳情請參見篩選器設計章節內容。

跳轉規則設置

系統支援為交叉表設置跳轉規則，實現通過交叉表跳轉到其它資源的互動效果。

設置入口如下：

交叉表設置跳轉規則詳情請參見跳轉章節內容。

複製功能

交叉表支援複製功能。

選擇某行或某個儲存格，滑鼠右鍵複製或按Ctrl+C進行複製。

5.1.4 圖形元件

5.1.4.1 圖形元件-直條圖

以實際的業務需求和美觀性為出發點，直條圖衍生出多種不同形態的子圖：橫條圖、堆疊直條圖、堆疊橫條圖、極座標直條圖和極座標堆疊直條圖，用來更好的表現和滿足不同的資料對比分析需求。

類型

常態效果

堆疊態效果

柱狀類

橫條類

極座標類

常態與堆疊態的差異

1.資料對比差異

常態下，僅對單個分類項的對比。
堆疊狀態下，可以對比大類，亦可以對比大類內的小類。

2.適用性差異

常態下，支援對比的分類項不宜過多。
堆疊狀態下，可以支援較多的對比分類項。

3.圖形構建差異

常態下，資料起點永遠以“0”為起始點。
堆疊狀態下，後一資料永遠以前一資料末端為起始點

子圖選擇

當設計圖形時選擇多維度，系統預設以堆疊狀態效果呈現。

子圖的選擇入口：選中圖形元件，在“標記區”的子圖下拉選項清單中選擇按一下選擇即可，如下圖紅框所示：

配色修改

單維度配色

單色配色

圖形設計選擇單維度時，系統預設為單色配色。

選中圖形元件，在“標記區”中按一下顏色標記項，彈出顏色選擇視窗，確定顏色後，在顏色視窗外按一下即可。

多色配色

選中圖形元件，從“資料區”中將“欄區”的維度欄位（如下圖中的“商品類別”欄位）拖拉在“標記區”的“顏色”標記項中，系統為每個維度項分配不同的顏色，按一下顏色標記項，彈出多色配色選擇視窗，確定顏色後，在顏色視窗外按一下即可。

注：重複拖拉維度到“顏色”標記項時，系統預設做多維度處理，因此系統顯示子圖類型為“堆疊直條圖”。

多維度配色

圖形設計選擇多維度或多量值時，系統支援多色配色，表現為不同的維度項或量值項分配一種顏色。

選中圖形元件，從左側資源中拖拉欄位“發貨區域”到“標記區”的顏色標記項，顯示系統預設的多色配色。如下圖所示：

按一下“標記區”的顏色標記項，彈出多色選擇視窗，可以修改多色配色方案。

排序設置

排序效果通過對一個量值進行排序設置實現。

排序的設置入口及效果如下：

量值計算

圖形設計時，系統支援對量值指標進行合計、最大值、最小值、平均值、計數、唯一計數的計算。

設置量值計算：在“列區”或“欄區”量值欄位的下拉式功能表中選擇量值，在下級功能表中選擇計算方式即可。如下圖所示：

樣式設計

直條圖及其子圖的各設定選項詳情請參見圖形元件-樣式。

5.1.4.1.1 直條圖/堆疊直條圖

概要說明

直條圖是指使用垂直的柱子顯示類別之間的數值比較，柱狀高低反映數量多少，其中一個軸表示需要對比的分類維度，另一個軸代表相應的數值。

直條圖通常用來反映分類項目之間的比較：

含義

圖例

顯示單個分類專案間的比較情況。

這類直條圖是最常用的一類直條圖。

下圖僅對不同類別產品的銷售額進行對比：

通過將每根柱子進行分割，實現一個大分類包含的每個小分類，用以顯示相同類型下各個資料的大小情況：每一根柱子上的值分別代表不同的資料大小，各層的資料總和代表整根柱子的高度。

這類對比通常以堆疊的形式進行呈現。

下圖通過堆疊中色塊的大小可以很快掌握到各產品銷售情況最好的區域：

優勢：肉眼就能清楚的看出數量的多少及比較出資料之間的差別。

劣勢：局限於只適用中小規模的資料集（即不適合項數較多的資料）。

資料要求：

1)一個或多個維度，一個或多個量值。

2)資料量不宜過多，建議不超過20條。

3)維度不宜超過3個，量值不宜超過6個。

適用場景：分類資料對比，分類項建議不要超過10個。

不適用場景：

1)分組過多，分類過多。

2)不適合表示趨勢。

3)分類名稱過長時，不宜使用直條圖或堆疊直條圖。

業務情景

我們在業務分析中，經常會對資料進行對比分析。下面，我們將以零售公司為例，年底對公司產品銷售情況進行資料分析時，通常會有如下分析需求：

資料對比分析需求

分析

效果

情景1：查看當年公司各產品的銷售額

該需求的資料對比分析，建議通過直條圖實現。

1、通過參數進行“年份”控制

2、分類軸上顯示各類別產品

3、指標軸上分佈銷售額

該情景實現的詳情請參見情景1。

情景2：查看當年各區中哪個產品銷售情況最佳

該需求的資料對比分析，是以產品為基準，然後找出產品中銷售情況最佳的區域，因此建議使用堆疊直條圖實現。

1、通過參數進行“年份”控制

2、分類軸上顯示各類別產品，每類產品中按照區域進行小分類

3、指標軸上分佈銷售額

該情景實現的詳情請參見情景2。

情景3：查看當年各區銷售金額與採購金額的對比情況

該需求的資料對比分析，建議以直條圖分組效果實現，可以對比銷售與採購的差距。

1、通過參數進行“年份”控制

2、分類軸上顯示各類別產品

3、指標軸上分佈銷售金額和採購金額

該情景實現的詳情請參見情景3。

情景4：查看當年各區四個季度的銷售量的對比情況

該需求的資料對比分析的重點是：每個區都要對比四個季度的銷售量情況，因此建議使用直條圖的分組效果實現。

1、通過參數進行“年份”控制

2、分類軸上顯示各類別產品，每類產品組中集合所有季度資料值

3、指標軸上分佈銷售額

該情景實現的詳情請參見情景4。

情景5：查看當年銷售排前的產品，並且需要清楚該產品所屬的區

該需求的資料對比分析的重點：產品銷售情況排名，同時要體現產品的區域歸屬，因此建議在直條圖中通過“組合分類”來實現。

1、通過參數進行“年份”控制

2、分類軸上以“產品+區域”顯示分類項

3、指標軸上分佈銷售額

該情景實現的詳情請參見情景5。

實現方案

資料結構

以上業務情景的需求，我們基於的資料結構表如下：

我們的基礎資料以明細表的形式儲存。基於這些資料設計圖形時，系統預設對量值欄位進行“合計”計算，使用者可以根據需要修改計算方法，詳情請參見量值計算內容。

情景1

業務場景描述：查看當年公司各產品的銷售額。

設計要點：

1、按兩下“商品類別”和“銷售金額”欄位，由系統自動分配到“欄區”、“列區”；或者拖拉“商品類別”欄位到“欄區”，“銷售金額”欄位到“列區”。

2、拖拉“年份”欄位到“篩選區”即建立“年份”篩選器，該篩選器需要設置：展示類型為“列表（單選）”詳情請參見篩選器-展示樣式，預設值為“列表選擇”中的“2014”，詳情請參見篩選器-設置說明。

在該場景中，若資料的差距很小，我們通常會通過排序來進行資料對比。排序設置請參見設置排序內容。

情景2

業務場景描述：查看當年各區中哪個產品銷售情況最佳。

設計要點：

1、按兩下“商品類別”、“客戶地區”和“銷售金額”欄位，由系統自動分配到“欄區”、“列區”和“顏色”標記項；或者拖拉“商品類別”欄位到“欄區”，“銷售金額”欄位到“列區”、“客戶地區”欄位到“標記區”的“顏色”標記項。

該場景設計時，由於選擇了兩個維度，系統預設選擇子圖為“堆疊直條圖”，且系統預設將第二個選擇的維度分配到“顏色”標記項。

情景3

業務場景描述：查看當年各區銷售金額與採購金額的對比情況。

設計要點：

1、按兩下“客戶地區”、“銷售金額”和“採購金額”欄位，由系統自動分配到“欄區”、“列區”；或者拖拉“客戶地區”欄位到“欄區”，“銷售金額”和“採購金額”欄位到“列區”。

情景4

業務場景描述：查看當年各區四個季度的銷售量的對比情況。

設計要點：

1、分別按兩下“客戶地區”、“銷售金額”和“季度”欄位，由系統自動分配到“欄區”、“列區”和“顏色”標記項；或者拖拉“客戶地區”欄位到“欄區”，“銷售金額”欄位到“列區”、“季度”欄位到“標記區”的“顏色”標記項。

該場景設計時，系統預設將第二個選擇的維度分配到“顏色”標記項，這裡“客戶地區”在“欄區”實現大分組，“季度”實現各分組下的小分類。

情景5

業務場景描述：查看當年銷售排前的產品，並且需要清楚該產品所屬的區。

設計要點：

1、拖拉“客戶地區”和“商品類別”欄位到“欄區”，“銷售金額”欄位到“列區”。

該場景設計時，分類軸是“客戶地區+商品類別”的組合分類，維度的組合分類只能通過手動拖拉欄位實現。

配色修改

單維度配色

單色配色

圖形設計時，選擇單維度時，系統預設為單色配色。

選中圖形元件，在“標記區”中按一下顏色標記項，彈出顏色選擇視窗，確定顏色後，在顏色視窗外按一下即可。

多色配色

選中圖形元件，從資料區中將“欄區”的維度欄位（如下圖中的“商品類別”欄位）拖拉在“標記區”的“顏色”標記項中，系統為每個維度項分配不同的顏色，按一下顏色標記項，彈出多色配色選擇視窗，確定顏色後，在顏色視窗外按一下即可。

注：重複拖拉維度到“顏色”標記項時，系統預設做多維度處理，因此系統顯示子圖類型為“堆疊直條圖”。

多維度配色

圖形設計時，選擇多維度或多量值時，系統支援多色配色，實現為不同的維度項或量值項分配一種顏色。

選中圖形元件，從左側資源中拖拉欄位“發貨區域”到“標記區”的顏色標記項，顯示系統預設的多色配色。如下圖所示：

按一下“標記區”的顏色標記項，彈出多色選擇視窗，可以修改多色配色方案。

排序設置

排序效果通過對一個量值進行排序設置實現。

排序的設置入口及效果如下：

量值計算

圖形設計時，系統支援對量值指標進行合計、最大值、最小值、平均值、計數、唯一計數的計算。

設置量值計算：在“列區”或“欄區”量值欄位的下拉式功能表中選擇量值，在下級功能表中選擇計算方式即可。如下圖所示：

5.1.4.1.2 橫條圖/堆疊橫條圖

概要說明

橫條圖是直條圖的橫向表現形式，又稱橫向直條圖：用若干個細長的橫條長度來表達各類數量大小的圖形。

橫條圖表示分類專案或專案組之間的比較：

含義

圖例

橫條圖：顯示單個分類專案間的比較情況。這類橫條圖是最常用的圖形之一。

下圖僅對不同車企的銷售量進行對比：

堆疊橫條圖：通過將每個橫條進行分割，實現一個大分類包含的每個小分類，用以顯示相同類型下各個資料的大小情況：每個橫條上的值分別代表不同的資料大小，各層的資料總和代表整個橫條的長度。這類對比通常以堆疊的形式進行呈現。

下圖通過堆疊中色塊的大小可以很快掌握到各品牌車型銷售情況最好的價格段：

優勢：

1)肉眼就能清楚的看出數量的多少及比較出資料之間的差別。

2)比直條圖支援的分類專案多些。

劣勢：不適合表示趨勢分析。

資料要求：

1)一個或多個維度，一個或多個量值。

2)資料量不宜過多，建議不超過30條。

3)維度不宜超過3個，量值不宜超過6個。

適用場景：

1)分類資料對比，分類項建議不要超過10個。

2)適合分類名稱比較長的情形。

不適用場景：

1)分組過多，分類過多。

2)不適合表示趨勢。

業務情景

橫條圖/堆疊橫條圖適用的業務情景與直條圖/堆疊直條圖一致，詳情請參見直條圖/堆疊直條圖章節內容。

排序設置

在實際的業務中，橫條圖的比較意義通常弱於直條圖，因此橫條圖通常結合“排序”功能使用。

排序功能設置入口及方法請參見直條圖章節中的“排序設置”內容。

5.1.4.1.3 極座標直條圖/極座標堆疊直條圖

概要說明

極座標作為一種特殊的二維坐標系統，也可以用來佈局維度和量值，其中分類軸對應角度軸，以上半圓的垂直線為分類軸；指標軸對應徑向軸。

含義

例圖

極座標直條圖：是柱狀圖關於笛卡爾坐標系轉換到極坐標系的仿射變換，用於進行單個項目的比較。

下圖呈現了不同區域的“數量”對比情況：

極座標堆疊直條圖：極座標與堆疊形態結合表現的一種直條圖表現形式，用於比較每個分組的資料總量。

下圖顯示了各區域2016和2017年的總體銷售量對比情況：

由於我們的視覺系統更善於比較直線，所以笛卡爾坐標系更適合於比較各個分類的數值比較。因此，極座標直條圖從實用的角度去看，其更多的是一種審美上的需求。

優勢：分類比較結果明顯。

劣勢：

1)不能表示趨勢。

2)適合展示的資料量比直條圖更小。

資料要求：

1)極座標直條圖：一個維度，一個量值，資料不超過7條。

2)極座標堆疊直條圖：一個或多個維度，一個或多個量值，維度最好不要超過2個，量值最好不要超過3個。

適用場景：分類項比較，類似直條圖或堆疊直條圖。

不適用場景：不做排序就進行比較的情況。

業務情景

極座標直條圖/極座標堆疊直條圖也可以適用直條圖/堆疊直條圖的業務情景中的情景1、情景2和情景5，詳情請參見直條圖/堆疊直條圖章節內容。

排序設置

由於極座標具有半徑回饋效應：視覺上半徑越大的玦環會看起來更大，半徑小的則小。這樣容易造成極座標直條圖的誤用，因此極座標直條圖應該結合“排序”功能使用。

排序功能設置入口及方法請參見直條圖章節中的“排序設置”內容。

5.1.4.2 圖形元件-瀑布圖

概要說明

瀑布圖採用絕對值與相對值結合的方式，來表達數個特定數值之間的數量變化關係。這種效果的圖形能夠在反應資料多少的同時，更能直觀的反應出資料的增減變化過程。

下圖是一個瀑布圖，它顯示了近一個星期收支的增減變化情況。紅色柱條代表增加值，藍色柱條代表減少值。

優勢：展示兩個資料點之間的演變過程。

劣勢：沒有柱狀圖、橫條圖的使用場景多，適用情況單一。

資料要求：一個維度，一個量值。資料之間要有演變過程。

適用場景：適用於解釋兩個資料值之間的差異是由哪幾個因素貢獻，每個因素的貢獻比例，展示兩個資料值之間的演變過程。

例如：某公司當年的現金流情況，從年初的現金流，經過當年各種增加、減少的情況，最終演變成年底的現金流。

實現方案

業務情景：統計一周的收支增減變化情況。

資料結構

以上業務情景的資料來源如下：

情景分析：收支情況有正負之分，而且是一個隨時間變動的資料流程，需要有一個最終的匯總情況，表示最後的餘額，這時建議使用瀑布圖來實現。

設計要點

1、按兩下“日期”、“收支情況”欄位，由系統自動分配到“欄區”、“列區”；或者拖拉“日期”欄位到“欄區”，“收支情況”欄位到“列區”。

2、選中圖形元件，在“標記區”中按一下顏色標記項，彈出顏色選擇視窗，確定顏色後，在顏色視窗外按一下即可。

注：有正負數時，修改的是正數所控制的柱條顏色，易於區分增減變化情況。

如上瀑布圖表示了一周的收支情況，紅色柱條表示收入，藍色柱條表示支出，收入柱條的下方表示起點，上方表示終點，支出柱條的上方表示起點，下方表示終點，柱條的高度表示該日期所對應的值，後一個柱條是以前一個柱條的終點高度作為起點，最後一個柱條終點所在高度對應的值就是收入支出後的餘額；

2017-04-01對應柱條為紅色，表示收入，收入柱條下方為起點，上方為終點，柱條的高度代表收入值為253；2017-04-02對應的柱條為藍色，表示支出，支出柱條上方為起點，下方為終點，柱條的高度代表支出的值為18；2017-04-02的柱條是以2017-04-01柱條的終點作為起點；如上圖，從2017-03-31到2017-04-02收入支出餘額為2017-04-02柱條終點即下方對應高度的值。

5.1.4.3 圖形元件-折線圖

概要說明

折線圖是利用線的升、降變化來表示被研究現象發展變化趨勢的一種圖形。它在分析研究事物的發展變化、依存關係等方面具有重要作用。折線圖可以顯示隨時間（根據常用比例設置）而變化的連續資料，因此非常適用於顯示在相等時間間隔下資料的趨勢。當有多個資料數列時，折線圖中的資料數列是獨立的。

折線圖通常用來表示變化趨勢：

含義

圖例

顯示各類別的變化趨勢

如下折線圖表示某公司一年中各類產品銷售額的變化情況的比較：

顯示趨勢的同時，可以顯示明細資料的匯總情況。線從下往上實現疊加效果，最上面的一條線表示總和。

如下折線圖表示某公司一年中各類產品銷售額的變化情況的比較：

優勢：容易反應出資料變化的趨勢。

資料要求：一個或兩個維度，一個或多個量值。

適用場景：

1)折線圖適合二維的大資料集，還適合多個二維資料集的比較。

2)反映變化趨勢，關聯性。

3)折線圖適合大資料集的趨勢分析，尤其適合非離散型維度分析，比如時間，價格走勢。

業務情景

我們在業務分析中，經常會對趨勢進行對比分析。實際應用中，折線圖主要有如下三種應用情景：

資料對比分析需求

分析

效果

場景1：查看公司當年銷售額的變化情況。

該需求的趨勢對比分析，想要查看變化情況，即趨勢，建議通過折線圖實現。

1、通過參數進行“年份”控制

2、分類軸上顯示月份

3、指標軸上分佈銷售金額

該情景詳細的實現說明請參見情景1。

場景2：查看公司當年各類產品銷售額的對比情況。

該需求的趨勢對比分析，需要對比各類產品的銷售額情況，建議以多折線圖效果實現對比。

1、通過參數進行“年份”控制

2、分類軸上顯示月份

3、指標軸上分佈銷售金額

4、把“商品類別”欄位拖動到顏色標記區以實現分類

該情景詳細的實現說明請參見情景2。

場景3：對於沒有進行匯總的資料，想要查看公司當年各類產品的銷售總額。

該需求的趨勢對比分析，想要看變化趨勢也想要看資料的匯總情況，因此建議使用堆疊折線圖實現，

堆疊折線圖有疊加的效果。

1、通過參數進行“年份”控制

2、分類軸上顯示月份

3、指標軸上分佈銷售金額

該情景詳細的實現說明請參見情景3。

實現方案

情景1

業務情景描述：查看公司當年銷售額的變化情況。

資料結構

以上業務情景的資料來源如下：

我們的基礎資料以明細表的形式儲存。

設計要點：

1、按兩下“月份”和“銷售金額”欄位，由系統自動分配到“欄區”、“列區”；或者拖拉“月份”欄位到“欄區”，“銷售金額”欄位到“列區”。

2、拖拉“年份”欄位到“篩選區”即建立“年份”篩選器，該篩選器需要設置：展示類型為“列表（單選）”詳情請參見篩選器展示樣式，預設值為“列表選擇”中的“2014”，詳情請參見篩選器設置說明。

上圖是典型的單折線圖：只展示一個維度“月份”和一個量值“銷售金額”，從折線圖中可以直觀的看出公司2014年中銷售額的變化情況。

情景2

業務場景描述：查看公司當年各類產品銷售額的對比情況。

資料結構

以上業務情景的資料來源如下：

我們的基礎資料以明細表的形式儲存，穀類/麥片、肉/家禽、特製品儲存在商品類別欄位下。

設計要點：

1、按兩下“月份”、“銷售金額”和“商品類別”欄位，由系統自動分配到“欄區”、“列區”和“顏色”標記項；或者拖拉“月份”欄位到“欄區”，“銷售金額”欄位到“列區”、“商品類別”欄位到“標記區”的“顏色”標記項。

上圖展示不同商品類別一年中銷售金額的比較。

情景3

情景3適合資料結構1且需要查看匯總資料的時候。

把情景2的折線圖切換為堆疊折線圖，如圖：

切換前：

折線圖中:

藍色線表示穀類/麥片的銷售金額，

紅色線表示點心的銷售金額，

黃色線表示調味品的銷售金額。

切換後：

堆疊折線圖中：

藍色的線的高度表示穀類/麥片的銷售金額，

紅色的線的高度表示穀類/麥片和特製品的銷售金額之和，

黃色的線的高度表示穀類/麥片、特製品和肉/家禽的總銷售金額。

子圖列表

折線圖支援多種子圖切換，按應用場景分可分為如下三類：

折線圖、曲折線圖、階梯線應用場景一樣，表示趨勢，多折線圖中每個折線圖是獨立的。這三者呈現方式不同，折線圖線條的線是有棱角的，曲折線圖線條是平滑的，階梯線線條呈階梯狀。

堆疊折線圖、堆疊曲折線圖、堆疊階梯線應用場景一樣，可表示趨勢，可實現堆疊效果。多折線圖中從最下方到最上方的折線圖是逐個疊加的效果。這三者呈現方式不同。

極座標曲折線圖是一種特殊的折線圖。

5.1.4.4 圖形元件-面積圖

概要說明

面積圖又稱區域圖，是在折線圖的基礎之上形成的,它將折線圖中折線與引數坐標軸之間的區域使用顏色或者紋理填充。面積圖強調數量隨時間而變化的程度，也可用於引起人們對總值趨勢的注意。堆疊面積圖可以顯示部分與整體的關係。

面積圖與折線圖類似，區別是用面積表示數量，比折線圖更為直觀。瞭解折線圖詳情可參考折線圖。

面積圖通常用來表示變化趨勢：

含義

圖例

展示或者比較隨著時間連續變化的定量，各線的起點是原點，線與線之間有交叉。

如下面積圖表示某公司一年中飲料和點心銷售額的變化情況的比較：

表達多資料數列中部分與整體的關係，或者是表達累加的資料集，適用堆疊面積圖。某一分類的值是通過折線之間的相對高度來表達。

如下堆疊面積圖表示各產品銷售額：

優勢：面積圖可以進行層疊，方便比較資料。

劣勢：由於有遮蓋，不能顯示更多的記錄。

資料要求：一個或多個維度，一個或多個量值。面積圖最好不超過3片區域，堆疊面積圖適合多片區域。

適用場景：

1)展示時間維度上變化的值。例如：在股票市場上，將股票(或指數)的逐日收市價使用面積圖來表示，用來展示股市大致上的趨勢。

2)包含值的對比。

3)顯示部分與整體的關係。

不適用場景：資料數列過多，不易區分。

業務情景

我們在業務分析中，經常會對趨勢進行對比分析。實際應用中，面積圖主要有如下三種應用情景：

資料對比分析需求

分析

效果

場景1：查看公司當年銷售額的變化情況。

該需求的趨勢對比分析，想要查看變化情況，即趨勢，建議通過面積圖或折線圖實現。

這裡以面積圖為例。

1、通過參數進行“年份”控制

2、分類軸上顯示月份

3、指標軸上分佈銷售金額

該情景詳細的實現說明請參見情景1。

場景2：查看公司當年飲料、點心銷售額的對比情況。

該需求的趨勢對比分析，需要對比各類產品的銷售額差距情況，建議通過面積圖。多於3項資料的比較建議使用折線圖。

1、通過參數進行“年份”控制

2、分類軸上顯示月份

3、指標軸上分佈銷售金額

4、把匯總的資料欄位拖動到顏色標記區以實現分類

該情景詳細的實現說明請參見情景2。

場景3：想要查看公司當年各類產品的銷售總額，及各類產品的情況。

該需求的趨勢對比分析，想要看部分與整體的關係，因此建議使用堆疊面積圖實現，堆疊面積圖有疊加的效果。

1、通過參數進行“年份”控制

2、分類軸上顯示月份

3、指標軸上分佈銷售金額

該情景詳細的實現說明請參見情景3。

實現方案

情景1

業務情景描述：查看公司當年銷售額的變化情況。

資料結構

以上業務情景的資料來源如下：

我們的基礎資料以明細表的形式儲存。

設計要點：

1、按兩下“月份”和“銷售金額”欄位，由系統自動分配到“欄區”、“列區”；或者拖拉“月份”欄位到“欄區”，“銷售金額”欄位到“列區”。

上圖是基本的面積圖：只展示一個維度“月份”和一個量值“銷售金額”，從折線圖中可以直觀的看出公司2014年中銷售額的變化情況。

情景2

業務場景描述：查看公司當年飲料、點心銷售額的對比情況。

資料結構

以上業務情景的資料來源如下：

我們的基礎資料以明細表的形式儲存，穀類/麥片、肉/家禽、特製品都儲存在商品類別欄位下。

設計要點：

1、按兩下“月份”、“銷售金額”和“商品類別”欄位，由系統自動分配到“欄區”、“列區”和“顏色”標記項，系統預設把按兩下的第二個維度分配到“顏色”標記項；

或者拖拉“月份”欄位到“欄區”，“銷售金額”欄位到“列區”、“商品類別”欄位到“標記區”的“顏色”標記項。

上圖比較點心和飲料的銷售額，可以清晰看出兩者在每個月的差距。

情景3

業務場景描述：想要查看公司當年各類產品的銷售總額，及各類產品的情況。

資料結構

以上業務情景的資料來源如下：

設計要點：

1、按兩下或者拖拉、“月份”、“銷售金額”欄位，由系統自動把維度分配到“欄區”、把量值分配到“列區”；

子圖列表

面積圖支援多種子圖切換，具體如下：

面積圖和曲線面積圖表示對比趨勢，兩者只是圖形線條的區分，一個為折線，一個為平滑的曲線。

堆疊面積圖和堆疊曲線面積圖表示總體與部分或累加的效果，兩者只是圖形線條的區分，一個為折線，一個為平滑的曲線。

5.1.4.5 圖形元件-圓餅圖

概要說明

圓餅圖主要用於表現不同類目的資料在總和中的占比。每個弧度表示各資料數量的比例。

下圖是常用的圓餅圖：表示各產品類別銷售額在整體中所占的比重。

優勢：明確顯示資料的比例情況。通常用來描述量、頻率或百分比之間的相對關係。

資料要求：一個維度，一個量值，資料類別不宜超過10項。

適用場景：側重於描述在整個系統中，每個個體所占的權重。

如公司各產品類別銷售額占比；一年中各個季度的銷售額的占比成分；公司中各個部門的人數。

不適用場景：

1）資料類別過多

2）單純比較不同類別間的資料大小，建議使用直條圖。

實現方案

業務情景描述：查看公司中各產品類別銷售額的占比情況。

資料結構

以上業務情景的資料來源如下：

我們的基礎資料以明細表的形式儲存。

設計要點

按兩下“產品目錄名稱”和“銷售額”欄位，由系統自動分配維度到“顏色”標記項、分配量值到“角度”標記項，此時做出的圖形沒有顯示百分比，

把“產品目錄名稱”、“銷售額”拖拉到“標籤”標記項，把滑鼠停留在“銷售額（合計）”欄位標籤上，顯示三角按鈕，按一下該按鈕：

在彈出的功能表中選擇快速表計算>總額百分比即可顯示百分比，如下圖：

可以清晰看出每種產品占總體的百分比情況。

子圖列表

圖形還支援豐富的子圖可供切換，豐富了呈現形式，具體如下：

圓餅圖：圓形被分割成幾塊，代表不同的類別，塊的大小表示資料的大小。

環形圖：環形圖是由兩個大小不一的圓餅圖疊在一起，挖去中間的部分所構成的圖形。色塊面積比較小，留白更多，有更多空間留給資訊標注和圖文排版，使用時更靈活輕巧。

南丁格爾玫瑰圖（面積模式）：每個類別所占圓的圓心角一定，以扇形半徑表示資料數列的大小，可以得出大致的占比情況，給人強烈的差異感。

南丁格爾玫瑰圖（半徑模式）：圓心角隨半徑變化，以圓心角大小和半徑大小表示資料數列大小，可以得出大致的占比情況，給人強烈的差異感。

5.1.4.6 圖形元件-烈日圖

概要說明

烈日圖是一種現代圓餅圖，它超越傳統的圓餅圖和環圖，能表達清晰的層級和歸屬關係，以父子階層結構來顯示資料構成情況。

烈日圖中，離源點越近表示級別越高，相鄰兩層中，是內層包含外層的關係。

下圖是常用的烈日圖，可以看出華北和華南地區產品類別的銷售量情況。

其中，銷售量是按降冪排列的，例如華北的產品類別銷量，飲料>日用品>點心>肉/家禽>海鮮>穀類/麥片>特製品>調味品。

圖中可以看出華北比華南的總銷量要多，在華北的銷量中，飲料銷量最多，而飲料在華南的銷量則一般。

優勢：

1）在實際項目中使用烈日圖，可以更細分溯源分析資料，真正瞭解資料的具體構成。烈日圖不僅資料直觀，而且圖表好看。分層看資料很直觀，逐層下鑽看資料。它既能像圓餅圖一樣表現局部和整體的占比，又能像矩形樹圖一樣表現層級關係。適合財務各種資料的年度分析。

2）烈日圖預設支援資料下鑽，也就是說，當使用者點擊了某個扇形塊之後，將會以該節點作為根結點顯示，並且在中間出現一個返回上層節點的圓。

劣勢：不適合有交叉層級關係的資料。

資料要求：一個或者兩個以上維度，一個量值。維度不宜超過5個。只有一個維度時和圓餅圖一樣，詳情可參考圓餅圖。

適用場景：比如在銷售匯總報告中，展示每個店鋪的銷售業績分佈；各產品類別中每種產品的銷售額；

或者年度銷售額匯總時，展示不同時間段的分段銷售額及其占比情況，從年份—季度—月份角度直觀看出近兩年中哪個季度業績好。

不適用場景：層級過多過細的情況。

實現方案

業務情景描述：查看華南、華北地區銷量的情況比較。

資料結構

以上業務情景的資料來源如下：

我們的基礎資料以明細表的形式儲存。

設計要點

1、按兩下“地區”、“產品類別”、和“銷量”欄位，由系統自動分配把維度分配到“欄區”、把量值分配到“角度”標記項；或者拖拉“地區”、“產品類別”欄位到“欄區”，“銷量”欄位到“角度”標記項。

2、點擊顏色標記項，更換顏色。

如上烈日圖可以看出華北比華南的銷量大，華北中，銷量最大的是飲料，最小的是調味品；華南中銷量最大的是飲料。

5.1.4.7 圖形元件-散佈圖

概要說明

用兩組資料構成多個座標點，考察座標點的分佈，判斷兩變數之間是否存在某種關聯或總結座標點的分佈模式。

散佈圖用來研究變數之間的關係。

含義

圖例

用於表示資料項目少於2000的資料的關係。最常用的散佈圖，常用來判斷變數之間的關聯。

下圖展示了折扣和銷售量之間的關係，隨著折扣增加，銷售量增加，呈正相關關係：

用於表示資料項目大於2000的資料的關係。通常用來研究區間分佈模式。

下圖是類比三角函數（正弦sin）的圖像顯示，體現週期性特點：

優勢：研究兩變數之間的關係，或區間分佈模式。

劣勢：適用範圍較窄。

資料要求：一個或兩個維度，兩個量值；分類欄位，散佈圖通常用於比較跨類別的匯總資料。

適用場景：銷售量和折扣之間的關係；收入和消費之間的關係；三角函數關係；社會現象關係的研究等。

業務情景

我們在業務分析中，經常會對研究物件進行對比分析。散佈圖主要有如下兩個應用情景：

研究物件對比需求

分析

效果

情景1:研究促銷活動銷售量和折扣之間的關係。（資料量小於2000）

該需求的研究物件對比分析，想要研究變數關係且資料小於2000，建議通過散佈圖實現。

1、分類軸上顯示折扣

2、指標軸上分佈銷售量

3、把產品名稱拖動到顏色標記區以實現資料點的區分。

該情景詳細的實現說明請參見情景1。

情景2:研究促銷活動銷售量和折扣之間的關係，看出哪些產品的銷售量受折扣影響較大。（資料量小於2000）

該需求的研究物件對比分析，想要研究變數關係，資料小於2000，且受影響較大的產品，建議通過泡泡圖實現。

1、分類軸上顯示折扣

2、指標軸上分佈銷售量

3、把產品名稱拖動到顏色標記區以實現資料點的區分

4、把產品名稱拖動到大小標記區

該情景詳細的實現說明請參見情景2。

情景3：三角函數圖像的研究。（資料量大於2000）

該需求的研究物件對比分析，研究圖像分佈，資料量大於2000，建議通過大資料散佈圖實現。

1、分類軸上顯示c_x

2、指標軸上分佈sin

該情景詳細的實現說明請參見情景3。

實現方案

情景1

業務情景描述：研究促銷活動銷售量和折扣之間的關係。

資料結構

以上業務情景的資料來源如下：

我們的基礎資料以明細表的形式儲存。

設計要點：

按兩下“折扣”、“銷售量”和“產品名稱”欄位，系統自動把第一個量值分配到“欄區”，把第二個量值分配到“列區”，把維度分配到“顏色”標記項。

對於量值值，系統預設“合計”，此時只有一個資料點，需要把該量值改為“維度”，資料才會表示原資料點；

或者拖拉“折扣”欄位到“欄區”，“銷售量”欄位到“列區”，“產品名稱”到“顏色”標記項。

上圖表示銷售量與折扣之間的關係，隨著折扣增加，銷售量增加。

情景2

業務情景描述：研究促銷活動銷售量和折扣之間的關係，看出哪些產品的銷售量受折扣影響較大。

資料同情景1。

設計要點：

在情景1的基礎上把“產品名稱”欄位拖動到大小標記區。

上圖表示銷售量與折扣之間的關係，隨著折扣增加，銷售量增加。點大的表示數量大，表示該產品折扣對其銷售量的影響更大。

情景3

業務情景描述：三角函數圖像的研究。

資料結構

以上業務情景的資料來源如下：

設計要點：

在標記區點擊三角下拉按鈕，切換為大資料散佈圖，如下：

按兩下“c_x”和“sin”欄位，由系統自動分配第一個量值值到“欄區”、第二個量值值“列區”。

對於量值值，系統預設"合計"，此時只有一個資料點，需要把該量值改為“維度”，資料才會表示原資料點；

或者拖拉“c_x”欄位到“欄區”，“sin”欄位到“列區”。

上圖是三角函數sin的圖像。

5.1.4.8 圖形元件-單Y聯合圖

概要說明

聯合圖是指以折線圖、直條圖、面積圖或者散佈圖任意兩兩組合（雙折線圖、雙直條圖、雙面積圖包含在內）的表現形式來呈現兩個或兩個以上資料指標情況。單Y聯合圖只有一個Y軸的聯合圖。

常用的聯合圖是折線圖和直條圖的組合。

如下單Y聯合圖顯示廣州幾個區平均的房價和廣州市平均房價的比較。

優勢：可在同一頁面用不同的圖進行分析對比。

劣勢：只適用單位相同，資料量相近的資料。

資料要求：一個或兩個維度，一個或多個量值。

適用場景：它只適用於以下條件都滿足的情況：

1）指標資料的衡量單位相同，如：若一個是價格單位，一個是數量單位，不適用。

2）指標資料大小的數量級別不能相差太大，如：若價格單位，一個以千萬計，一個以個計，不適用。

不適用場景：

1）資料單位不同。

2）資料數列數量級別差別很大。

實現方案

業務場景描述：比較廣州幾個區的房價和廣州市平均房價。

資料結構

以上業務情景的資料來源如下：

我們的基礎資料以明細表的形式儲存。

設計要點

拖拉“月份”欄位到“欄區”，“天河區”、“越秀區”、“黃埔區”、“從化區”和“平均房價”欄位到“列區”。

系統預設第一個添加到“列區”的資料以直條圖呈現，後面添加到“列區”的資料均以折線圖展示，如下：

依次點擊“標記區”的“越秀區”、“黃埔區”和“從化區”私有設定選項左邊的圖示按鈕，更改為直條圖，如下：

結果如圖：

如上單Y聯合圖中，可以看出“天河區”和“越秀區”的房價高於廣州市的平均房價，而“黃埔區”和“從化區”的房價低於廣州市的平均房價。

注：在有折線圖或面積圖的聯合圖中不要設置公共的顏色標記，若要設置在直條圖中設置私有的顏色標記。

5.1.4.9 圖形元件-雙Y聯合圖

概要說明

聯合圖是指以折線圖、直條圖、面積圖或者散佈圖任意兩兩組合（雙折線圖、雙直條圖、雙面積圖包含在內）的表現形式來呈現兩個或兩個以上資料指標情況。雙Y聯合圖是坐標軸左右兩邊都一個Y軸的聯合圖。

常用的聯合圖是折線圖和直條圖的組合。

含義

圖例

左軸對應直條圖的刻度，右軸對應折線圖的刻度，不同數量級別也可以在同一張圖中實現。

下圖表示一年中房子銷量與單價之間關係的雙Y圖：

優勢：可以解決單Y聯合圖的缺點，可以同時在一張圖比較數量級有區別的兩個縱坐標。

資料要求：一個或兩個維度，一個或多個量值。

適用場景：適用絕大多數情況。

業務情景

我們在業務分析中，經常會對資料進行對比分析。具體分析需求如下：

資料對比分析需求

分析

效果

情景1：查看房價和銷量的問題。

該需求的資料對比分析，需要在同一張圖中觀察兩方面的資料，建議通過直條圖實現。

1、分類軸上顯示月份

3、左軸分佈房子銷量，右軸表示房價。

該情景實現的詳情請參見情景1。

實現方案

情景1

業務場景描述：查看房價和銷量的問題。

資料結構

以上業務情景的資料來源如下：

我們的基礎資料以明細表的形式儲存。

設計要點

拖拉“月份”欄位到“欄區”，“銷售量”、“平均房價”欄位到“列區”。

上圖可以看出房子銷售量月房價的走勢基本一致，銷售量多的時候房價高，銷售量低的時候房價低，這於市場規律符合。

5.1.4.10 圖形元件-地圖

概要說明

地圖，是一種基於地理位置使用不同深淺的顏色來表示不同範圍的分佈情況的視覺化圖形，直觀的呈現各區域分析指標的分佈。

下圖是一個地圖，它顯示了不同銷售省份的銷售額，顏色越深，銷售額越大。

優勢：採用地圖的形式來反映與地理位置相關的資料，更直觀形象。

劣勢：只能在涉及到地理資料的特殊狀況下使用。

資料要求：維度必須是地理維度資料，只能有一個緯度和一個量值。

適用場景：適用於有空間位置的資料集。

不適用場景：不涉及到地理位置的資料。

業務情景

在商業資料分析中，有大量資料是與地理位置相關的，這種資料用地圖進行分析更直觀形象。下面，我們將以零售公司為例，年底對公司產品銷售情況進行資料分析時，通常會有如下分析需求：

資料分區域對比需求

分析

效果

情景1：查看公司各銷售省份的銷售額對比情況。

該需求的資料對比分析，是不同地理位置之間的銷售情況對比分析，建議通過地圖實現。

1、通過參數進行“年”控制

2、以地圖各省份的顏色深淺表示銷售額的多少

該情景實現的詳情請參見情景1。

情景2：查看公司的重點銷售省份河北省下的城市的銷售額對比情況。

該需求的資料對比分析，和情景1相比，僅僅是地理範圍不同，建議通過地圖的子圖實現。

1、通過參數進行“年”控制

2、以地圖各城市的顏色深淺表示銷售額的多少

該情景實現的詳情請參見情景2。

情景3：查看公司各銷售省份和省份下的城市的銷售額對比情況。

該需求的資料對比分析，建議通過地圖的下鑽功能實現。

1、以地圖各省份和城市的顏色深淺表示銷售額的多少

2、點擊地圖某一省份，下鑽到該省份下的城市查看

該情景實現的詳情請參見功能範例-地理階層維度下鑽。

情景4：查看公司各銷售省份的銷售數量對比情況和各省份產品銷售情況以及城市銷售情況。

該需求分析，包含了銷售數量對比分析和各省份下的明細分析，建議設計多張圖表，通過地圖的聯動功能實現。

1、以地圖各省份的顏色深淺表示銷售數量的多少

2、以圓餅圖表示各產品的銷售數量和銷售額的占比情況，以清單表表示各城市的銷售數量和銷售額的情況

3、將地圖圖表設為篩選器，實現點擊地圖，右邊三個圖表實現動態資料篩選的聯動效果

該情景實現的詳情請參見自助儀表板-聯動。

實現方案

資料結構

以上業務情景的資料來源如下：

我們的基礎資料以明細表的形式儲存。基於這些資料設計圖形時，系統預設對量值欄位進行“合計”計算。

情景1

業務場景描述：查看公司各省份的銷售額對比情況。

設計要點：

1、按兩下“銷售省份”和“銷售額”欄位，由系統自動分配到“欄區”、標記>顏色；或者拖拉“銷售省份”欄位到“欄區”上，“銷售額”欄位到標記>顏色上。

2、拖拉“年”欄位到“篩選區”即建立“年”篩選器，該篩選器需要設置：展示類型為“列表（單選）”，詳情請參考篩選器-展示樣式，預設值為“列表選擇”中的“2014”，詳情請參見篩選器-設置說明。

情景2

業務場景描述：查看公司的重點銷售省份河北省下的城市的銷售額對比情況。

設計要點：

1、在“標記區”的子圖下選取“河北省”地圖。

2、按兩下“銷售城市”和“銷售額”欄位，由系統自動分配到“欄區”、標記>顏色；或者拖拉“銷售城市”欄位到“欄區”上，“銷售額”欄位到標記>顏色上。

3、拖拉“年”欄位到“篩選區”即建立“年”篩選器，該篩選器需要設置：展示類型為“列表（單選）”，詳情請參考篩選器-展示樣式，預設值為“列表選擇”中的“2014”，詳情請參見篩選器-設置說明。

標記區的子圖下可以選擇不同的地圖類型，系統內建了中國及中國各行政區劃地圖，中國中部、東部、西部地區地圖，也可以在公共參數>地圖區域中自訂地圖。

配色修改（可選）

選中地圖元件，在“標記區”中按一下顏色標記項，彈出顏色選擇視窗，確定顏色後，在顏色視窗外按一下即可。

標籤顯示（可選）

地圖可以顯示或者隱藏地理名稱標籤，如下圖，選中地圖元件，在“標記區”中按一下標籤標記項，彈出標籤設置視窗，選擇“是”後，在標籤設置視窗外按一下即可在地圖上顯示各省份名稱。

5.1.4.11 圖形元件-詞雲圖

概要說明

詞雲，是文字資料的視覺表示，由詞彙組成類似雲的彩色圖形，用於展示大量文字資料，能快速感知最突出的文字。

如下是熱門搜尋城市詞雲圖。

優勢：酷炫、直觀的圖表，可以從大量的詞中一眼抓住關鍵字。

劣勢：使用場景單一，一般用來做詞頻。

資料要求：一個或兩個維度，一個量值。所需資料量需要稍大些，資料的區分度也需要比較大，否則效果不明顯，並且不適合要求準確的分析。

適用場景：顯示詞頻，可以用來做一些使用者畫像、使用者標籤的工作。可以用來分析話題熱度，如微博熱搜榜。

不適用場景：除詞頻外的其他分析。

實現方案

業務情景描述：查看熱門搜尋城市。

資料結構

以上業務情景的資料來源如下：

我們的基礎資料以明細表的形式儲存，以上“權重”是通過輸入的資料系統自動匯總統計的得出的。

設計要點

1、按兩下“城市”、“權重”欄位，由系統自動分配維度到“標籤”標記項、分配量值到“大小”標記項，得到如下詞雲圖：

2、添加“顏色”標記項（可選，建議執行此操作，圖表示內容更清晰），拖拉“城市”欄位到“顏色”標記項，系統以顏色區分話題。

從上圖可以看出深圳、廣州、上海搜尋熱度最高。

5.1.4.12 圖形元件-關係圖

概要說明

關係圖使用圓圈和連線表示節點與節點之間的關係。根據呈現方式的不同分為力導向關係圖和環形關係圖。

下圖是一個典型的力導向關係圖，展示人物之間的關係。每個節點的顏色表示他們的職業類型，圓圈大小表示每個人的聲望大小，圓圈越大，聲望越大。

優勢：適合難以用語言和表格表達的關係。

劣勢：適用情況單一。

資料要求：兩個維度，兩個顏色標記（維度，可選），兩個大小標記(量值，可選)

適用場景：主要用於表示複雜的關係。

實現方案

業務情景描述：展示約伯斯的人物關係。

資料結構

業務情景的資料來源如下：

設計要點

注：“欄區”只支援拖拉兩個維度欄位，拖拉到“欄區”的第一個欄位為源欄位，第二個欄位為目標欄位。

“標記區”裡的欄位是可選欄位，標記>顏色只支援拖拉維度欄位，標記>大小只支援拖拉量值欄位。“標記區”裡的欄位和“欄區”的欄位是一一對應關係。

拖拉“姓名1”、“姓名2”欄位到“欄區”，“職業1”、“職業2”欄位到標記>顏色，“聲望1”、“聲望2”欄位到標記>大小。

標記>顏色的源分類欄位“職業1 ”對“欄區”的源欄位“姓名1”標記顏色，標記>顏色的目標分類欄位“職業2”對“欄區”的目標欄位“姓名2 ”標記顏色。

同樣的，標記>大小的源指示值“聲望1”對“欄區”的源欄位“姓名1”標記大小，標記>大小的目標指示值“聲望2”對“欄區”的目標欄位“姓名2”標記大小。

提示顯示（顯示節點關係）

在關係圖中，節點與節點之間的關係可以在提示裡顯示。如下圖，拖拉“關係”欄位到標記>提示，移動滑鼠到想要查看的兩個節點之間的連線上即彈出“關係”提示。

子圖列表

關係圖的子圖有力導向關係圖和環形關係圖兩種，只是兩種不同的呈現方式。力導向關係圖是立體、動態的，環形關係圖是平面、靜態的。如下：

5.1.4.13 圖形元件-雷達圖

概要說明

雷達圖又稱戴布拉圖或蜘蛛網圖，它從一個中心點向外輻射出多條坐標軸（4條以上），每一個分類資料都佔有一條數值坐標軸，並連接各坐標軸上同一系列的值構成一個個不規則多邊形。在任何一個軸上靠近圖形中心的點表示一個較低的數值，靠近圖形邊緣的點表示一個較高的數值。

雷達圖通常用於在同一組坐標軸上比較不同實體的性能，也可用於表示和同一個項目相關的多個不同的因素。

下圖是最基礎的一個雷達圖，它表示公司指标的三大要素的競爭力。由該雷達圖可知：該產品的關鍵指標競爭力最強，營運能力較差。

優勢：使用者能對各項指標的變動情形及好壞趨向一目了然。

劣勢：

1)雷達圖上多邊形過多會使可讀性下降。如果有五個以上要評估的事物，相應的多邊形輪廓和填充區域，都會產生覆蓋和混亂，使得資料難以閱讀。

2)分類資料變數過多，也會造成可讀性下降，因為一個變數對應一個坐標軸，這樣會使坐標軸過於密集。因此，要限制雷達圖的變數數量。

資料要求：維度的資料量不宜過多，量值不多於5個。

適用場景：

1)雷達圖適用於比較類的需求，主要被應用在與其他資料的比較，公司的優勢和廣告調查等方面。

2)雷達圖用於顯示各衡量指標的綜合水平以及指標間的平衡性，常用於企業經營狀況和財務分析。

不適用場景：資料類別過多

業務情景

我們在業務分析中，經常會對資料進行對比分析。下面，我們將以公司產品為例，通常會有如下分析需求：

多維度資料分析需求

分析

效果

情景1：查看公司產品的競爭力

該需求涉及了多維度資料的分析，建議通過雷達圖實現。

1、雷達圖外周每個點排列顯示產品要素

2、競爭力以坐標軸上的所有資料點連成的多邊形顯示

該情景實現的詳情請參見情景1。

情景2：查看公司同系列的高低端產品競爭力對比情況

該需求涉及了多維度資料的分析，建議通過雷達圖實現。

1、雷達圖外周每個點排列顯示產品要素

2、競爭力以坐標軸上的所有資料點連成的多邊形顯示

該情景實現的詳情請參見情景2。

實現方案

情景1

業務情景描述：查看公司產品的競爭力。

設計要點：

按兩下“指標類型”和“競爭力”欄位，由系統自動分配到“欄區”、“列區”；或者拖拉“指標類型”欄位到“欄區”，“競爭力”欄位到“列區”。

情景2

業務情景描述：查看公司年份的指標類型競爭力對比情況。

資料結構

業務情景的資料來源如下：

我們的基礎資料以明細表的形式儲存。

設計要點：

按兩下“year”、“競爭力”和“指標類型”欄位，由系統自動分配到“欄區”、“列區”和標記>顏色；或者拖拉“指標類型”欄位到“欄區”，“競爭力”欄位到“列區”、“year”欄位到標記>顏色。

配色修改

選中圖形元件，在“標記區”中按一下顏色標記項，彈出顏色選擇視窗，確定顏色後，在顏色視窗外按一下即可。

子圖列表

雷達圖有多種不同形態的子圖可供切換，豐富了呈現形式，有棱角面積，圓環面積，棱角線，圓環線。

面積型雷達圖：每個變數的數值點連成的多邊形用顏色或者紋理填充。棱角面積雷達圖的外周是棱形，圓環面積雷達圖的外周是圓周。

線形雷達圖：直接用連線展示了每個變數的數值點連成的多邊形。棱角線雷達圖的外周是棱形，圓環線雷達圖的外周是圓周。

5.1.4.14 圖形元件-油量圖

概要說明

油量圖是指以油量表的形式來呈現指標資料。有一個圓形的表盤及相應的刻度，刻度表示數值的範圍，有一個指標指向目前數值，可直觀的表現出某個指標的進度或實際情況。

下圖的油量圖中，指標所指向的資料代表了產品總體銷售數量情況。

優勢：

1)很直觀展示某個指標的進度或實際情況。

2)跟人們的常識結合，使大家馬上能理解看什麼、怎麼看。擬物化的方式使圖示變得更友好更人性化，正確使用可以提升使用者體驗。

3)儀表板的圓形結構，可以更有效的利用空間。

劣勢：資料場景比較單一。

資料要求：只允許構建一個量值。

適用場景：

1)油量圖一般用來顯示專案的完成進度。

2)油量圖用於關注及監控資料是否在正常範圍，通過定義臨界點確定預警範圍。

不適用場景：油量圖不適合用於比較不同變數或者趨勢的分析。

實現方案

業務情景描述：公司年底對各個區的銷售額指標進行考核，評判是否屬於業務優秀的範疇。

資料結構

以上業務情景的資料來源如下：

設計要點

1、按兩下或者拖拉“銷售額”欄位到標記>標籤。

2、拖拉“銷售區域”欄位到“篩選區”即建立“銷售區域”篩選器，該篩選器需要設置：展示類型為“列表（單選）”，詳情請參見篩選器-展示樣式，預設值為“列表選擇”中的“華北”，詳情請參見篩選器-設置說明。

特殊應用

指標卡

油量圖可以通過樣式設計，實現下圖的指標卡效果：

實現要點：

步驟

效果

1、選中“油量圖”，點擊圖形右上方的更多>元件樣式，開啟“元件樣式”設置視窗。

2、隱藏指針。點擊系列>指標，設置指針的寬度為0。

3、隱藏表盤刻度線和主分割線。點擊系列 >表盤刻度線，設置刻度數為0，刻度長度為0，點擊系列>表盤主分割線，設置刻度數為0。

4、在系列>表盤顏色中，點擊刪除按鈕刪除表盤顏色，使表盤只剩一種顏色。

注：表盤的最後一種顏色也是量值值的顯示顏色。

5、隱藏表盤。設置表盤顏色的結束值為0，量值值的顯示顏色通過顏色設置。在這裡，我們設置量值值的顯示顏色為藍色。

6、設置標題“銷售額”的顯示樣式和位置。點擊系列>標題，我們設置標題的字體大小為36，偏移位置為水平0，垂直-20。

7、設置量值值的顯示樣式和位置。點擊標記>標籤，開啟“標籤設置”視窗，在這裡，我們設置量值值的位置和字體大小如右圖。

注：“標籤設置”也可以設置量值值顏色，這時，量值值顏色不再受表盤顏色的影響。

5.1.4.15 圖形元件-熱力圖

概要說明

熱力圖是指用x軸和y軸表示的兩個分類欄位確定數值點的位置，通過相應位置的矩形顏色去表現數值的大小，顏色深代表的數值大。

下圖是一個熱力圖，它顯示了不同發貨區域各類產品的銷售數量的大小對比情況。從圖中矩形的顏色深淺和矩形中的銷售數量詞可以看出：華北的日用品銷售數量最大。

優勢：好看、易於理解，資料資訊更直觀有效。

劣勢：不適合比較單一變數的大小。

資料要求：兩個維度，一個量值，維度的資料量不宜太少。

適用場景：熱力圖主要用於展示連續型資料的分佈情況。例如用顏色呈現某一範圍內不同地區資料量的差異，網站分析等等。

不適用場景：

1)兩個分類維度的組合40%以上都不具有量值值，導致矩形空缺過多的資料。

2)大部分的量值值資料差值百分比都低於5%，會導致大部分矩形顏色會過於相近，難以辨別，無法查看各量值值的大小比較資訊。

實現方案

業務情景描述：查看公司各個發貨區域產品銷售數量的差異。

資料結構

以上業務情景的資料來源如下：

我們的基礎資料以明細表的形式儲存。

設計要點

按兩下“發貨區域”、“產品類別”和“數量”欄位，由系統自動分配到“欄區”、“列區”和標記>顏色上；或者拖拉“發貨區域”欄位到“欄區”，“產品類別”欄位到“列區”，“數量”欄位到標記>顏色上。

配色修改（可選）

選中熱力圖元件，在“標記區”中按一下顏色標記項，彈出顏色選擇視窗，確定顏色後，在顏色視窗外按一下即可。

標籤顯示（可選）

熱力圖可以顯示或者隱藏矩形上的數值標籤，如下圖，選中熱力圖元件，在“標記區”中按一下標籤標記項，彈出標籤設置視窗，選擇“否”後，在標籤設置視窗外按一下即可隱藏數值標籤。

5.1.4.16 圖形元件-樹圖

概要說明

樹圖，又稱矩形樹圖，是一種有效的實現層級結構視覺化的關聯式圖表結構。

在樹圖中，各個小矩形的面積表示每個子節點的大小，面積越大，表示子節點在父節點中的占比越大，整個矩形的面積之和表示整個父節點。右鍵點擊矩形塊可下鑽到子分支，每個子分支的矩形又按照相應節點的子節點進行分割。

通過樹圖及其鑽取情況，我們可以很清晰地知道資料的全域層級結構和每個層級的詳情。

下圖是一個樹圖，它通過各矩形的面積大小和顏色深淺顯示了不同發貨省份的銷售數量大小，下鑽到發貨城市，可以查看到不同發貨城市在所屬發貨省份中的占比情況。從圖中矩形的大小可以看出：直轄市天津市的銷售數量最大。

優勢：

1)可以清晰地顯示樹狀層級結構，在展示橫跨多個層級的資料資訊時非常方便，從圖表中可以直觀地看到每一層的每一項占父類別和整體類別的比例。

2)相比起傳統的樹形結構圖，矩形樹圖能更有效利用空間，並且擁有展示占比的功能。

劣勢：以面積表示大小，當數值相近時人眼難以辨別。

資料要求：有權重和層級關係的樹形資料，分類資料大於5個分類。

適用場景：樹圖能夠直觀體現同級之間的比較，比較適用於占比和關聯類的需求。例如統計全國每個省份每個城市每個縣區的人口占比分佈等多層級分析。

不適用場景：沒有權重關係，不需要數值大小對比的資料，沒有層級關係的資料。

實現方案

業務情景描述：展示發貨區域和下一層級發貨城市的銷售數量。

資料結構

業務情景的資料來源如下：

我們的基礎資料以明細表的形式儲存。

設計要點

拖拉“發貨省份”欄位到標記>標籤上，“數量”欄位到標記>大小和標記>顏色上。

鑽取設置

通過對層級結構的欄位創建階層，樹圖可以實現右鍵選擇下鑽到下一階層和上鑽返回的效果。具體操作請參考功能範例-自訂階層維度下鑽。

配色修改（設置顏色分類）

多色配色可以設置標記>標籤的欄位按照標記>顏色的欄位進行顏色分類。

選中樹圖元件，拖拉欄位“發貨區域”到“標記區”的顏色標記項，可以設置發貨省份按照其所屬區域以不同的顏色顯示。如下圖所示：

5.1.4.17 圖形元件-桑基圖

概要說明

桑基圖又稱桑基能量分流圖或桑基能量平衡圖，是一種特定類型的流程圖。

桑基圖的起始流量和結束流量相同，所有主支寬度的總和與所有分出去的分支寬度總和相等，保持能量的平衡；各主支和分支不同的寬度代表了不同的的流量大小；不同寬度的線條代表了不同的流量分流情況，線條的寬度成比例地顯示此分支佔有的流量。

桑基圖用於描述一組數值轉化成另一組數值的流向，觀察資料的流轉情況。

下圖是一個桑基圖，它顯示了不同發貨區域的產品數量和產品流向的各發貨城市的數量。從圖可以看出：各區域中華北區域的主支寬度最大，產品數量最大，各分支中直轄市天津市的寬度最大，產品數量最大。

優勢：桑基圖中流線的粗細象徵著資料流程量的多少，十分直觀。

劣勢：不適用於資料量太少或太大的資料。

資料要求：兩個維度，一個量值。

適用場景：

1)展示分類維度間的相關性，以流的形式表示同一類別不同階層的資料流程量變化。

2)表示物質的轉化，通常應用於能源、材料成分、金融和網站使用者流量等資料的視覺化分析。

不適用場景：起始流量和結束流量不同的資料。桑基圖需要保持能量守恆，不能在中間過程創造出流量，流失（損耗）的流量應流向表示損耗的節點，所以主支寬度和各分支的寬度總和是保持不變的。

實現方案

業務情景描述：以流的形式展示發貨區域的產品數量和從各區域發貨到各省份的產品數量。

資料結構

以上業務情景的資料來源如下：

我們的基礎資料以明細表的形式儲存。

設計要點

按兩下“發貨區域”、“發貨省份”和“數量”欄位，由系統自動分配把維度分配到“欄區”、把量值分配到標記>大小；或者拖拉“發貨區域”、“發貨省份”欄位到“欄區”，“數量”欄位到標記>大小。

配色修改

選中桑基圖元件，在“標記區”中按一下顏色標記項，彈出顏色選擇視窗，確定顏色後，在顏色視窗外按一下即可。

5.1.4.18 圖形元件-漏斗圖

概要說明

漏斗圖，形似漏斗，表示了整個業務流程。

漏斗圖總是開始於一個100%的數量，結束於一個較小的數量。在開始和結束之間由N個流程環節組成。每個環節用一個梯形來表示，梯形的上底寬度表示目前環節的輸入情況，梯形的下底寬度表示目前環節的輸出情況，上底與下底之間的差值形象的表現了在目前環節業務的減少量，如果上下底之間的寬度近似，表示該環節的轉化率高；如果上下底之間的寬度一下子減小了很多，表示轉化率低。

漏斗圖適用於業務流程比較規範、週期長、環節多的單流程單向業務分析，通過漏斗中各環節業務資料的比較，能夠直觀地發現和說明問題所在的環節，進而做出決策。

下圖是一個電商購物流程的標準漏斗圖，它展示了整個流程的轉化過程。從圖中可以看出：“電商購物”的整個業務流程中“瀏覽商品”環節中的人數呈現了最為明顯的縮減的趨勢，轉化率最低。

優勢：展示業務流程每個步驟的轉化率，能夠直觀地發現和說明問題所在。

劣勢：單一漏斗圖無法評價業務流程的某個關鍵流程中的各細分步驟轉化率的好壞。

資料要求：一個分類資料欄位、一個數值資料欄位。

適用場景：漏斗圖適用於業務流程多的流程分析，顯示各流程的轉化率。

不適用場景：漏斗圖不適合表示無邏輯順序的分類對比，如果要表示無邏輯順序的分類對比情況，請使用直條圖。漏斗圖也不適合表示占比情況，如果要表示占比情況，請使用圓餅圖。

實現方案

業務情景描述：查看公司“電商購物”流程中轉化率最低的環節。

資料結構

以上業務情景的資料來源如下：

設計要點

按兩下“流程步驟”和“人數”欄位，由系統自動分配到標記>顏色、標記>大小；或者拖拉“流程步驟”欄位到標記>顏色上，“人數”欄位到標記>大小上。

配色修改（可選）

選中漏斗圖元件，在“標記區”中按一下顏色標記項，彈出顏色選擇視窗，確定顏色後，在顏色視窗外按一下即可。

標籤顯示（可選）

漏斗圖可以自訂顯示一個或多個標籤，如下圖，將“流程步驟”和“轉化率”拖拉到標記>標籤中，漏斗圖中的每一個流程都同時顯示了這兩種標籤。

子圖列表

漏斗圖有多種不同形態的子圖，豐富了呈現形式，有標準，昇冪，左降冪，右降冪，左昇冪，右昇冪。

5.1.5 自助儀表板-其它元件

概述

自助儀表板除了圖表元件，還有文字元件、圖片元件、空白元件、URL連結元件和TAB頁元件等其它元件，這些元件起到說明、美化自助儀表板的作用。

入口

其它元件在更多功能表下，通過拖拉到“呈現區”的方式，定義相應元件。

如下圖：

具體展示

TAB頁

TAB頁組件主要用於實現跑馬燈和自訂下鑽的互動效果，以及同一元件分不同頁籤顯示不同資源的呈現方式。下圖是自訂下鑽的效果，詳情請參考TAB頁組件。

URL連結

URL連結元件用於呈現通過URL連結的頁面，通常用於自助儀表板中載入系統中的樞紐分析、匯總分析、試算表、多維度分析、自助儀表板等內部資源及通過WEB網址連結的外部頁面。詳情請參考URL連結。

空白

空白元件是一個占位元元件，可以起到調整其它元件大小以及調整儀表板佈局的作用。下圖是利用空白組件調整篩選器長度，避免篩選器過長，影響儀表板美觀。詳情請參考空白組件。

圖片

圖片元件可以直接上傳圖片，改善儀表板的單調性，對儀表板進行美化或者內容具體化。下圖是添加公司LOGO，以起到突顯儀表板主題的作用。詳情請參考圖片元件。

文字

文字元件可以添加文字說明，對單個元件、多個元件或者整個儀表板進行闡述說明。下圖是對整個儀表板進行說明，添加的文字內容是儀表板的主題“公司近兩年銷售情況分析”，讓人更清晰儀表板的內容。詳情請參考文字元件。

5.1.5.1 TAB頁組件

概述

TAB頁元件主要用於實現同一元件分不同頁籤呈現不同資源的效果，以及跑馬燈和自訂下鑽的互動效果。

TAB頁組件包括TAB、跑馬燈、自訂下鑽3種不同場景呈現方式。

範例

場景1：TAB範例

如下圖所示：

TAB實現方法請參見TAB的內容。

場景2：跑馬燈範例

如下圖所示：

該效果的實現方法請參見跑馬燈的內容。

場景3：自訂下鑽範例

如下圖所示：

該效果的實現方法請參見自訂下鑽的內容。

說明

頁籤操作顯示：用於增加、刪除或者左右移動頁籤位置。
頁籤編輯/完成鍵：用於開啟或者關閉頁籤操作狀態，若該處顯示“完成”時表示目前為開啟狀態，允許對“頁籤”進行增加、刪除、移動操作；若該處顯示“編輯”則表示目前為關閉狀態不允許動作頁籤。
更多菜單：包含對目前TAB元件進行整體的樣式設計及跑馬燈、下鑽功能定義。
最大化、移除鍵：最右側的兩個鍵用於設置元件顯示最大化和移除組件功能。如下圖所示：

頁籤菜單：每個頁籤有自身的更多菜單、篩檢程式和移除鍵。如下圖所示：

5.1.5.1.1 TAB

概述

TAB頁，支援多個頁籤，每個頁籤根據自己的需求放不同的重要資訊，通過切換頁籤的方式滿足：當空間不足以展示所有資訊時，通過利用頁籤空間進行完美展示。

實例

下圖是一個典型的TAB頁：通過1個清單表，1個直條圖，1個圓餅圖顯示使用者關注的資訊。

通過按一下圖表頂部的頁籤名稱，實現頁籤切換。

操作步驟

1、在自助儀表板設計介面中拖拉一個“TAB頁”元件到“呈現區”。

2、在頁籤1中創建一個清單表。

3、增加一個頁籤2。

3、在頁籤2中創建一個直條圖。

4、再增加一個頁籤3，並在頁籤3中創建一個圓餅圖。

5、在TAB元件的更多功能表中預設勾選的是TAB，所以我們在作普通的TAB時可以不用勾選，當有跑馬燈或者下鑽的需求時再自行切換。

6、點擊右上角的完成按鈕，即完成TAB的製作。

5.1.5.1.2 跑馬燈

概述

跑馬燈又叫輪播圖，常適用於：當內容空間不足時，資源輪播呈現，達到更好的利用空間資源目的。通過輪播的切換形式，增加元件內容資源的豐富性，趣味性。

該處的TAB頁跑馬燈是用來在自助儀表板中實現一個TAB頁元件多頁籤、不同頁籤顯示不同報表資源的輪播效果。

實例

下圖是一個典型的跑馬燈輪播效果圖，用1個清單表和1個直條圖顯示使用者關注的資訊，這些資訊首尾相連，向同個方向迴圈滾動。點擊圖表旁邊的切換的按鈕，可以切換到下一頁籤或返回上一頁籤，頁籤之間也可以實現自動切換效果。

以下場景多用跑馬燈實現：

證券業中常用“跑馬燈”來顯示不斷變化的股票行情；
實際應用中也常通過“跑馬燈”來監視是否死機。

操作步驟

以上實例實現的操作步驟如下：

1、在自助儀表板設計介面中拖拉一個"TAB頁"元件。

2、在頁籤1中創建一個清單表。

3、增加一個頁籤2頁。

4、在頁籤2頁創建一個直條圖。

5、再增加一個頁籤3，並在頁籤3中創建一個圓餅圖。

6、返回到頁籤1頁，更多菜單下勾選跑馬燈。

7、按一下元件右上角的完成按鈕，儲存自助儀表板即可。

5.1.5.1.3 自訂下鑽

概述

自訂下鑽是指在沒有階層結構的維度中，通過自訂下鑽規則來實現鑽取效果。

自訂下鑽需要通過"TAB頁"元件來實現。

實例

該效果基於系統內建分析主題“訂單主題”實現，點擊圓餅圖的“飲料”磁區，可以很清晰地下鑽到飲料類別的清單表。

以上實例中點擊圓餅圖的“飲料”磁區，可以下鑽到對應飲料類別的清單表，它包含的清單表欄位資訊有：“產品類別”、“產品名稱”、“銷售量”、“銷售額”、“單價”、“折扣”。

操作步驟

以上實例實現的操作步驟如下：

1、在自助儀表板設計介面中新建一個“TAB頁”元件。

2、在頁籤1中定義一個圓餅圖：分別拖拉“產品類別”欄位到“顏色”標記項，拖拉“銷售量”欄位到“角度”標記項。

完成/編輯鍵務必保證顯示“完成”表示允許編輯。

3、增加頁籤2，拖拉欄位“產品類別”、“產品名稱”、“銷售量”、“銷售額”、“單價”、“折扣”到欄區。如下圖所示：

4、進行下鑽設置

返回頁籤1，在“TAB頁”元件的更多功能表中選擇下鑽，如下圖所示：

儲存以上所有設置後，即完成了範例效果。

注意事項

編輯狀態不能點擊進行下鑽，必須在完成、預覽、或者是開啟狀態。
自訂下鑽設置通常在完成狀態下才能設置，常用於2個相鄰的TAB頁籤傳值的情況，若相鄰的2個頁籤之間沒有相同欄位，可以手動設置將頁籤1的值傳給下個頁籤，實現特定資料過濾後的資料結果；若相鄰的2個頁籤之間有相同欄位，預設自動傳值過濾。其作用和效果同“篩選器的進階設定選項”，詳細說明請參見篩選器-進階設置章節。