樣式設計

6 自助儀表板-樣式設計

概述

樣式設計是對自助儀表板的圖表元件進行外觀設計和細節設置，分為“全域樣式”和“元件樣式”：

• “全域樣式”是用於對整個自助儀表板的所有元件一併進行的全域樣式設計，物件是目前自助儀表板中的所有組件。

• “元件樣式”是用於對自助儀表板的每個元件單獨進行樣式設計，物件是目前自助儀表板的一個元件。

除了全域樣式和元件樣式，頁面的樣式也可對自助儀表板的樣式進行設置，詳情請參考 頁面>樣式。

入口

點擊工具列的全域樣式按鈕，彈出“全域樣式”視窗，如圖：

元件樣式

入口1：選中元件，點擊工具列的元件樣式按鈕，彈出“元件樣式”視窗。

入口2：選中元件，點擊更多>元件樣式，彈出“元件樣式”視窗。

功能詳情請參考：全域樣式元件樣式

6.1 全域樣式

“全域樣式”用於對自助儀表板中所有元件的樣式批量進行設計，物件是目前自助儀表板中的所有組件。

全域樣式設計包含三部分內容：基本、標題列、圖形。

基本

基本設置的內容包含：背景顏色、透明度和元件邊框。

背景
基本設定選項中的背景包含“背景顏色”和“透明度”，其中“透明度”的範圍設置只允許0~100，且數值越大，背景顏色越淺。
設置背景顏色為黑色，透明度為0，效果如圖： 設置背景顏色為黑色，透明度為50，效果如圖：

邊框
邊框用於設置自助儀表板所有元件的邊框樣式、大小和顏色。
設置邊框樣式為虛線，邊框大小為2，顏色為紫色，效果如圖：

標題列

用於設置自助儀表板的“標題列是否顯示、背景、邊框、文字樣式、文字對齊”。

標題列
標題列用於設置自助儀表板所有元件的標題列是顯示或隱藏。
標題列顯示，如圖： 標題列隱藏，如圖：

背景
標題列的背景用於設置自助儀表板所有元件標題列的背景顏色。
設置標題列背景顏色為綠色，如圖：

邊框
邊框用於設置自助儀表板所有元件標題列的樣式、大小和顏色。
設置標題列邊框樣式為虛線、大小為2、顏色為紅色，如圖：

文字樣式
文字樣式用於設置自助儀表板所有元件標題列的字體樣式，字體大小，字形和顏色。
設置標題列文字樣式，效果如圖：

文字對齊
文字對齊用於設置自助儀表板所有元件標題的文字對齊方式。有“居左，置中，居右”三種對齊方式。
標題列居靠左對齊： 標題列置中對齊： 標題列居靠右對齊：

圖形

用於對自助儀表板軸標籤的字體和顏色設置，包括橫軸標籤和縱軸標籤。

設置軸標籤，效果如圖：

字體
字體用於設置軸標籤的字體樣式、字體大小和字形。

6.2 元件樣式

概述

“元件樣式”用於對自助儀表板的每個元件樣式單獨進行設計，物件是使用者在目前自助儀表板中選定的單個組件。

元件樣式包括對元件的基本、標題列、坐標軸、圖例、系列、進階、圖形屬性設定代碼等設置。

6.2.1 圖形元件-樣式

6.2.1.1 基本

概述

對元件的基本設置，包括“元件的佈局方式、背景、邊框、外邊距、畫布邊距”。

針對直角坐標系圖形（具備“畫布邊距”屬性的圖形）的“基本”效果圖
對應的模型圖

其他圖形的“基本”效果圖
對應的模型圖

屬性

具體設置如下

佈局方式
1、自動：元件會自動適應頁面的高度與寬度，自動調整元件之間的位置。 2、浮動：元件以浮動的方式顯示，能夠改變元件之間的位置和順序。此時，允許設置元件的大小和位置，且元件的大小和位置會隨著拖拉元件移動而變化。
佈局方式為浮動時，可改變圖表1的位置，設置圖表1相對圖表2的浮動順序為頂層，效果如圖： 元件設置佈局方式為“浮動”時，選中該組件，點擊更多>浮動設置，可設置該元件的浮動順序，相對位置，水平對齊、垂直對齊。 （1）浮動順序是指當浮動元件之間有重疊時，設置浮動元件的階層順序。有“頂層，上一層，下一層，底層”四種順序。 頂層：該元件處於最頂層。 上一層：該元件目前所在階層的上一層，往頂層的方向。 下一層：該元件目前所在階層的下一層，往底層的方向。 底層：該元件處於最底層。 對應模型圖： 其中，1為底層，3為頂層。3>2>1。 （2）相對位置是指相對其他組件的位置。 （3）對齊方式：在設置了相對位置後，可設置其對齊方式，分為“水平對齊”和“垂直對齊”。 設置元件之間的對齊方式後，當解析度改變時，元件之間的相對位置保持不變。 水平對齊：用於設置當頁面的寬度改變時，元件之間的相對位置保持不變。有“居左，置中，居右”三種對齊方式，預設“居右”對齊。 垂直對齊：用於設置當頁面的高度改變時，元件之間的相對位置保持不變。有“居上，置中，居下”三種對齊方式。 下面以“水平對齊”為例進行說明。 不設置文字和圖表1的水平對齊方式，預覽時，頁面的寬度改變，文字和圖表1的相對位置改變，如圖： 設置文字的相對位置為圖表1，水平對齊方式為置中，預覽時，頁面的寬度改變，文字和圖表1的相對位置不變，如圖：

背景
設置元件的背景顏色和透明度。 透明度為0~100%，透明度越大，背景顏色越淺。
設置元件的背景顏色為黑色，透明度為0，如圖： 設置元件的背景顏色為黑色，透明度為84%，效果如圖：

邊框
設置元件的邊框樣式，邊框大小和邊框顏色。
設置元件邊框樣式為虛線，邊框大小為2，邊框顏色為紫色，如圖：

外邊距
元件外邊距，指元件跟頁面或跟其他元件之間的距離，可以分別對上下左右的外邊距進行設置。

畫布邊距
設置元件圖形區與畫布之間的距離，可以對上下左右分別設置。

6.2.1.2 標題列

概述

對元件標題列的設置，包括“標題列是否顯示、文字、背景、高、邊框、文字樣式、文字對齊”。

“標題列”效果圖
對應的模型圖

屬性

具體設置如下：

標題列
設置元件標題是顯示或者隱藏。
標題列顯示和隱藏效果對比圖：

文字
設置標題列名稱。
手動輸入標題列名稱：

背景
設置標題列的背景顏色。
設置標題列的背景顏色為綠色，如圖：

高
設置標題列的高度。

邊框
設置標題列的邊框樣式、邊框大小和顏色。
設置邊框樣式為虛線，邊框大小為2，顏色為紅色，如圖：

文字樣式
設置標題列文字的字體，字型大小大小和字形。
設置標題列文字樣式，如圖：

文字對齊
設置標題列文字的對齊方式，有“靠左對齊，置中和靠右對齊”。
設置標題列文字的對齊方式為置中，如圖：

6.2.1.3 坐標軸

對坐標軸名稱的設置，包括“名稱、樣式、顏色、距離軸線”。

1. 名稱：設置坐標軸的名稱。

2. 樣式：設置坐標軸名稱的字體、字型大小大小和字形。

3. 顏色：設置坐標軸名稱的顏色。

4. 距離軸線：是指坐標軸名稱與坐標軸之間的距離。

“坐標軸”效果圖

對分類軸的設置：

對指標軸的設置：

分類軸設置：

指標軸設置：

屬性

具體設置如下：

對坐標軸名稱的設置，包括“名稱、樣式、顏色、距離軸線”。

1. 名稱：設置坐標軸的名稱。 2. 樣式：設置坐標軸名稱的字體、字型大小大小和字形。 3. 顏色：設置坐標軸名稱的顏色。 4. 距離軸線：是指坐標軸名稱與坐標軸之間的距離。

坐標軸名稱：

距離軸線：

刻度

對坐標軸刻度的設置，包括“標籤顯示、標籤樣式、顏色、標注間隔”。 1. 標籤顯示：設置標籤的顯示形式，有“自動、垂直、傾斜、不顯示”四種形式。 2. 標籤樣式：設置標籤的字體、字型大小大小、字形和顏色。 3. 標注間隔：設置分類軸標籤顯示的間隔。（注：指標軸沒有這個設定選項。）

坐標軸標籤：

標注間隔設置為0，表示：顯示所有標籤；設置為1，表示：隔一個標籤顯示一個標籤；設置為2，表示：隔兩個標籤顯示一個標籤，以此類推。

設置標注間隔為0，顯示所有標籤，如圖：

設置標注間隔為1，第一個，第三個，第五個······標籤顯示，其他不顯示。

分割

對坐標軸分割的設置，包括“分割線是否顯示、分割線樣式、分割區是否顯示、分割區顏色”。

1. 顯示分割線：設置坐標軸是否顯示分割線，分割線的分割是根據坐標軸的標籤進行分割的。 2. 分割線樣式：設置分割線的樣式，粗細和顏色。 3. 顯示分割區：設置是否顯示分割區。 4. 分割區顏色：分別設置分割區的顏色。

分割線顯示和隱藏效果對比圖：

分割線的分割是根據標籤進行分割的，分割線的數量取決於分類軸上標籤的數量。

分類軸分割線：

指標軸分割線：

分割區顯示或隱藏效果對比圖：

分類軸分割區：

指標軸分割區：

分割區顏色：

6.2.1.4 圖例

概述

對組件圖例的設置，包括圖例的位置，圖例的文字樣式。

圖例在上方顯示效果圖：

圖例在下方顯示效果圖：

對應的模型圖

圖例在組件的位置是固定的，且浮於組件上。

圖例在上方顯示：

圖例在下方顯示：

屬性

具體設置如下：

位置

設置圖例的位置，有“不顯示圖例、在上方、在下方”三種展示形式。預設圖例在上方。

圖例在上方，如圖：

圖例在下方，如圖：

文字樣式

設置圖例文字字體、字型大小大小、字形、顏色。

設置圖例文字樣式，如圖：

6.2.1.5 系列

概述

系列是對圖表的構造設計，不同圖表之間差異較大。

包括“顯示標注、柱間距離、柱條寬度、標線、連接空資料、資料點、選中模式、半徑、開始角度、邊框、斥力因數、連線曲率、普通狀態、高亮狀態、標題、指標、表盤顏色、表盤刻度線、表盤主分割線、拖拉”。

屬性

具體設置如下：

顯示標註

標註為系列的最大值和最小值。設置標註是顯示或者不顯示。

標註顯示和不顯示的效果對比圖：

當直條圖只有一個系列時，顯示一個系列的最大值和最小值。

當直條圖有多個系列時，分別顯示不同系列的最大值和最小值。（注：只能“都顯示”或“都不顯示”。）

柱間距離

設置系列資料的柱間距離。包括“同系列的柱間距離和不同系列的柱間距離”。

同系列的柱間距離：

不同系列的柱間距離：

柱條寬度

設置柱條的寬度。

瀑布圖的柱條寬度：

標線

設置標線類型，有平均值、最小值和最大值三種標線，可以同時顯示。

設置標線的顏色。

標線：

連接空資料

在存在空資料的情況下，設置是否繼續連接後面的非空資料。是則連接，否則不連接。

特製品為空資料，圖表1設置為連接空資料，折線圖繼續連接後面的非空資料。圖表2設置為不連接空資料，折線圖不繼續連接後面的非空資料。如圖：

資料點

設置資料點的形狀、大小、旋轉角度。

1. 形狀：設置資料點的形狀，有“無、空心圓、圓形、矩形、圓角矩形、三角形、菱形、標注、箭頭”這些形狀。 2. 大小：設置資料點的大小。（注：散佈圖不能設置資料點大小。） 3. 旋轉角度：設置資料點的旋轉角度。（注：雷達圖不能設置資料點旋轉角度。）

資料點：

選中模式

設置圓餅圖選中的模式，有“不可選、單選和多選”三種模式。

• 不可選：選擇不了資料。

• 單選：只能選擇一個資料。

• 多選：一次可選多個資料。

不可選的動圖如下：

多選的動圖如下：

多選選中結果：

半徑

設置圓餅圖和烈日圖的半徑大小，包括內半徑和外半徑。

設置內半徑和外半徑，效果如圖：

對應的模型圖：

開始角度

設置圓餅圖和烈日圖系列排序的開始角度。

特製品為系列的第一個資料項目，設置開始角度為0°，則特製品從0°開始，資料項目按順時針排序，如圖：

特製品為系列的第一個資料項目，設置開始角度為90°，則特製品從90°開始，資料項目按順時針排序，如圖：

“開始角度”對應的模型圖：

邊框

設置圓餅圖和烈日圖系列邊框的樣式，大小和顏色。

設置邊框樣式為虛線，邊框大小為2，顏色為黑色，效果如圖：

斥力因數

設置關係物件之間的距離，此時不同大小的值會線性映射到不同的斥力，值越大則斥力越大。

斥力因數為200時，如圖：

斥力因數為600時，關係圖如圖：

連線曲率

設置關係圖節點之間的連線曲度，值越大曲度也大。

連線曲率為0時，為直線，如圖：

普通狀態

設置關係圖邊框樣式、邊框大小、顏色。

設置連線樣式、大小、顏色。

設置邊框樣式為實線，邊框大小為2，顏色為黃色；連線樣式為虛線，連線大小為2，顏色為紅色，效果如圖：

高亮狀態

高亮狀態即為選中狀態。

設置高亮狀態的顏色。

設置高亮狀態的邊框樣式、邊框大小、顏色。

設置高亮狀態的連線樣式、大小、顏色。

高亮狀態動圖：

設置高亮狀態顏色為黃色；

邊框樣式為實線，邊框大小為3，顏色為紫色；

連線樣式為虛線，連線大小為2，顏色為黑色，效果如圖：

標題

設置油量圖是否顯示標題、標題樣式、偏移位置。

1. 顯示標題：設置標題是顯示或者不顯示。 2. 標題樣式：設置標題字體、字型大小大小、字形和顏色。 3. 偏移位置：設置標題位置，包括水平偏移位置和垂直偏移位置。

標題顯示和不顯示效果對比：

油量圖標題：

指針

設置指針的顏色和寬度。

油量圖指針：

表盤顏色

設置表盤指定區間的顏色。

指定區間手動輸入從0到1之間的值。

效果如圖：

區間數可增加和刪除：

表盤刻度線

設置表盤刻度線的刻度線長、刻度數、樣式。

1. 刻度線長：設置刻度線的長度。 2. 刻度數：設置每格刻度數的數量。 3. 樣式：設置刻度線的樣式、大小和顏色。

圖中黑色線即為刻度線：

設置表盤主分割線的刻度線長、刻度數、樣式。

1. 刻度線長：設置表盤主分割線的長度。 2. 刻度數：設置表盤主分割線的數量。 3. 樣式：設置表盤主分割線的樣式、大小和顏色。

圖中黑色線即為表盤主分割線的刻度線：

拖拉

設置允許拖拉或不允許拖拉。

允許拖拉：

6.2.1.6 進階

概述

進階是設置元件的輸出列數。

屬性

具體設置如下：

進階
設置圖表資料的輸出列數，預設為100。
輸出列數為2時，顯示兩行資料，如圖： 輸出列數為4時，顯示四行資料，如圖： 輸出列數為100時，顯示不超過100的所有資料，如圖：

6.2.1.7 圖形屬性設定代碼

面向技術人員，可用代碼實現對元件樣式的設計。

編輯圖形屬性設定內碼表面：

• 格式化：調整代碼的格式。

• 說明文件：連結到下圖可查看屬性，增加元件的樣式設計。

formatter函數範例

支援通過formatter函數自訂圖形樣式，使圖形根據使用者自身的需求呈現出特定的樣式效果。

範例效果

圖形的“提示”為formatter函數設置的效果：

設置方法

選中元件，元件樣式>圖形屬性設定代碼，彈出“圖形屬性設定代碼”介面，在該介面輸入formatter函數，如圖：

此範例formatter函數代碼如下：（根據Echarts設定項手冊，針對直條圖變數{a}為（系列名稱）。）

"tooltip": { "formatter": "function(a){return'發貨區域:'+a.name+'</br>'+'數值:'+a.data.value[1]+'元'}" }

查看formatter函數設置入口：元件樣式>圖形屬性設定代碼>說明文件。在新視窗開啟Echarts官網，在搜尋框中輸入“formatter"，如圖：

根據自身需要查看對應的formatter函數，如查看“polar.tooltip.formatter”，如圖：

6.2.1.8 地圖樣式

概述

對地圖的設定選項，包括“區域顏色、區域邊界色、高亮顏色、高亮邊界色、縮放”。

屬性

具體設置如下：

區域顏色
設置無資料區域的顏色。
設置區域顏色為綠色，如圖：
區域邊界色
設置省份之間的邊界色。
設置區域邊界色為黑色，如圖：

高亮顏色
設置被選中區域的顏色。
將高亮顏色設置為黃色，如圖：

高亮邊界色
設置被選中區域的邊界色。
將高亮邊界色設置為紅色，如圖：

縮放
設置地圖可以縮放或者不可以縮放。
設置為可以縮放，滾動滑鼠中間輪進行縮放：

6.2.1.9 雷達圖樣式

概述

對雷達圖的設定選項，包括“基礎、軸線、隔線、隔區”。

“雷達圖”效果圖

對應的模型圖

屬性

具體設置如下：

基本

對雷達圖的基礎設置，包括“半徑和環線分割數”。

1. 半徑：設置雷達圖的半徑大小。 2. 環線分割數：設置雷達圖的隔區數。

設置雷達圖半徑為75，環線分割數為5，如圖：

軸線

對雷達圖軸線的設置，包括“是否顯示軸線、軸線樣式”。

1. 顯示：軸線顯示或者不顯示。 2. 樣式：設置軸線的樣式、大小和顏色。

軸線顯示和不顯示的效果對比圖：

設置軸線樣式為實線，軸線大小為1，顏色為黑色，如圖：

隔線

對雷達圖隔線的設置，包括“是否顯示隔線、隔線樣式”。

1. 顯示：隔線顯示或者不顯示。 2. 樣式：設置隔線的樣式、大小和顏色。

隔線顯示和不顯示的效果對比圖：

設置隔線樣式為虛線，隔線大小為1，顏色為黑色，如圖：

隔區

對雷達圖隔區的設置，包括“是否顯示隔區、隔區顏色”。

1. 顯示：設置隔區顯示或者不顯示。

2. 顏色：分別設置隔區的顏色。 ma