全部產品
Search
文件中心

Quick BI:主題設計

更新時間:Oct 31, 2025

您可以通過主題設計更換儀表板的主題模板、全域樣式、頁面配置、組件樣式等內容。本文為您詳細介紹儀表板版面設定中主題設定功能。

前提條件

您已登入Quick BI控制台並進入儀表板編輯頁面。請參見建立儀表板

操作步驟

  1. 在儀表板編輯頁面,單擊頂部功能表列的版面設定

    image.png

    支援單擊image.png表徵圖展開或收合版面設定面板。

    25.gif

  2. 版面設定主題頁簽,設定儀表板主題模板全域樣式頁面配置等配置項。

    image.png

    當您需要快速尋找定位到某個配置項時,可以在頂部搜尋方塊中進行關鍵字查詢,將展示配置選項。

    image

    當您需要一鍵收合所有配置類別項時,單擊搜尋方塊右側的image表徵圖,選擇收合所有類別即可完成操作。

    40.gif

  3. 配置參數如下:

  • 儀表板主題地區,您可以從官方提供的主題中按需選擇合適的儀表板主題,也可以選擇自訂建立的主題。

    • 官方主題:支援預設、深藍、星空、科技、活動、簡約、靛藍。

    • 自訂佈景主題:您可以選擇已有的自訂佈景主題。

      image.png

      組織管理員可以單擊自訂,進入報表主旨管理員頁,進行自訂佈景主題模板的管理。

      image.png

      說明

      Quick BI專業版支援自訂儀表板的主題

      • 如果您是組織管理員,可以選擇官方推薦主題或新增自訂佈景主題。

      • 如果您是非組織管理員,可以選擇官方推薦主題或已經存在的自訂佈景主題,不能新增自訂佈景主題。

  • 全域樣式中,設定主題的全域樣式。

    圖表配置項

    配置項說明

    主題模式

    支援淺色模式深色模式

    • 選用淺色模式時,儀表板背景色為白色。

      預設皮膚為淺色模式

    • 選用深色模式時,儀表板背景色為黑色。

    圖表色系

    支援系統配置模板色系以及自訂色系。

    • 當選擇圖表色系模板色系時,您可以在下拉式清單中選擇色系。

      image例如,色系選擇為進階灰調,切換後圖表如下所示。

      image

    • 當選擇圖表色系自訂時,您可以修改每一個色塊的顏色。

      image

      說明

      漸層色彩樣式作用於指示類、趨勢類以及比較類圖表。

    頁面字型

    配置圖表頁面字型類型

    卡片圓角

    配置圖表卡片邊角弧度,支援無圓角、小圓角或大圓角。

    間距

    支援緊湊、常規自訂三種方式。

    image

    卡片間間距

    僅在間距選擇自訂方式下可以設定,調整卡片行間距以及列間距。

    卡片內邊距

    僅在間距選擇自訂方式下可以設定,調整卡片內上下左右邊的距離。

    語義色

    在條件式格式設定、副指標展示等功能中,通常通過顏色來直觀傳遞資料的上漲、持平、下跌等資訊。在語義色配置項中,系統將會根據圖表色系中所選的主題,自動匹配不同的預設語義色,您也可以在此按需自訂資料漲跌、正負、狀態等含義的全域配色,使資料色系更貼合業務看數習慣。該配置項將對整個儀表板生效。111

  • 頁面配置地區,配置以下參數。

    圖表配置項

    配置項說明

    頁面配置

    選擇儀表板內容的布局方式,支援選適應內容適應視窗

    • 適應內容:根據儀表板內部所有組件(例如:圖表、查詢控制項等)的實際大小和位置,調整到能適應所有內容的尺寸。

    • 適應視窗:根據當前瀏覽器視窗的大小,自動調整尺寸。您還可以進一步設定頁面分欄的布局。111

    頁面資訊

    配置在儀表板中展示的頁面資訊,包括:標題區故事大綱頁尾

    • 標題區:設定是否顯示儀表板標題區。您可以在顯示標題區的前提下,通過點擊image表徵圖,對標題區進行以下配置。image

      • 顯示主標題:設定顯示或隱藏儀表板主標題。您可以在顯示主標題的前提下調整主標題文本的樣式,並按需配置Logo圖及內容對齊。111

      • 備忘:設定是否在主標題區顯示備忘資訊,您可以在顯示備忘的前提下通過點擊image表徵圖自訂設定備忘內容。image

      • 內容區下邊距:調整主標題區的下邊距。111

      • 封面背景:設定主標題區背景的顏色、疊加圖片及背景地區高度值。111

    • 故事大綱:設定是否在標題區下方插入故事大綱。選中後系統將會根據當前儀表板中已有圖表的布局順序自動產生故事大綱,您可以點擊故事節點旁的image表徵圖,在故事節點編輯彈窗中按需自訂編輯故事大綱。111

    • 頁尾:設定是否顯示儀表板頁尾地區。您可以在顯示頁尾區的前提下,通過點擊image表徵圖,對頁尾區進行以下配置。image

      • 頁尾常值內容:按需設定需要在頁尾地區顯示的常值內容。image

      • 頁尾區背景:設定頁尾區背景的顏色、疊加圖片及背景地區高度值。111

    頁面背景

    配置背景顏色,支援純色、漸層兩種方式,選擇是否疊加背景圖片。

    頁面寬度

    支援自適應、固定兩種方式。

    說明

    選擇固定方式時,需要設定頁面邊界左右像素大小,設定完成後頁面邊界設定時左右邊距固定不可調整。

    頁面邊界

    支援選擇常規、超寬頁面自訂三種方式。

    image

  • 儀表板背景地區,配置以下參數。

    圖表配置項

    配置項說明

    頂部圖片底部圖片

    選擇圖片時,您可以選擇已有圖片自訂圖片

    說明

    選擇自訂圖片時,可以選擇上傳本地圖片或則通過靶心圖表片的連結上傳。

  • 儀表板組件地區,配置以下參數。

    image.png

    圖表配置項

    配置項說明

    標題

    文本

    設定圖表標題的字型大小對齊

    分割線

    設定標題分割線顏色、寬度大小。

    自訂標題背景

    支援配置標題的背景及標題區位置。

    • 選擇單色時,您可以配置背景顏色

    • 選擇漸層時,您可以配置漸層配色漸層角度

    • 選擇疊加背景圖片時,您可以選擇使用素材或自訂圖片。

      說明

      選擇自訂圖片時,可以選擇上傳本地圖片或者通過靶心圖表片的連結上傳。

    • 標題區位置支援圖表內部、圖表邊緣圖表上方

    狀態icon

    您可以在此設定狀態icon懸停顯示或始終顯示並設定狀態icon的顏色。

    預覽態下,隱藏更多操作入口

    您勾選該配置項後,在預覽態頁面,將隱藏更多操作的選擇入口。

    背景樣式

    填充

    設定背景是否顯示填充顏色。

    疊加背景圖片

    為圖表背景疊加圖片素材或自訂圖片。image.png

    邊框

    設定背景是否顯示邊框以及邊框顏色。

    顯示陰影

    設定背景是否顯示陰影。

    空資料樣式

    文案內容

    支援自訂空資料內的文案提示標語,預設提示:資料返回為空白。image.png

    表徵圖樣式

    支援自訂設定空資料表徵圖樣式。image.png

    說明

    選擇自訂圖片時,可以選擇上傳本地圖片或者通過靶心圖表片的連結上傳。

    跳轉連結

    跳轉連結配置後,點擊表徵圖或文案,可跳轉連結地址。

  • 通用內容樣式地區,配置以下參數。

    圖表配置項

    配置項說明

    圖類樣式

    軸標題

    設定軸標題字型大小、顏色樣式等。

    軸標籤

    設定軸標籤字型大小、顏色樣式等。

    資料標籤

    設定資料標籤字型大小、顏色樣式等。

    工具提示

    設定工具提示字型大小、顏色樣式等。

    圖例

    設定圖例字型大小、顏色樣式等。

    表類樣式

    樣式設定

    您可以在此設定樣式,支援斑馬線、線框、簡版、極簡四種樣式。

    主色系

    您可以在此設定主色系,支援主題色、灰色、自訂三種色系。

    表頭

    設定表頭字型大小、顏色等。

    內容

    設定內容字型大小、顏色等。

  • TAB組件區,配置以下參數。

    表徵圖配置項

    配置項說明

    TAB選中樣式

    您可以在此設定TAB選中樣式,支援底線、分割線、選中塊三種樣式。

    Tab標籤樣式

    您可以在此設定tab標籤字型大小大小、預設態樣式、選中態樣式。

    顯示TAB內部可視化卡片邊框

    設定是否顯示TAB內部可視化卡片邊框,支援選擇顏色。

    自訂Tab內組件間距

    勾選後即可自訂輸入Tab內組件間的間距值,未勾選時將跟隨儀表板行列間距的配置。

    說明

    PC端可輸入的間距值範圍為-32px,移動端為0-20px。

  • 查詢控制項區,配置以下參數。

    image.png

    表徵圖配置項

    配置項說明

    邊框

    設定是否顯示查詢控制項邊框,支援選擇顏色。

    image.png

    互動按鈕

    支援設定互動按鈕顏色。

    image.png

    按鈕圓角

    支援設定互動按鈕圓角

    image.png

    條件間距

    支援設定條件間距

    image.png

    條件名稱

    支援設定條件名稱的文本樣式。

    image.png

    選框風格

    支援設定選框風格

    39.gif

    背景色

    支援設定選框的背景色

    image.png

    邊框

    支援設定選框的粗細和顏色。

    image.png

    圓角

    支援設定選框的圓角。

    image.png

    文本

    支援設定選框的文本顏色和字型大小。

    image.png

    說明

    查詢控制項區的配置項對全域的控制項生效,但單個查詢控制項設定了自訂的樣式配置,此處的配置將失效。例如,查詢控制項區的選框風格為填充,但查詢控制項A在樣式裡的選框風格為線框,此時,查詢控制項A的選框風格即為線框,查詢控制項區選框風格的配置項對查詢控制項A失效。

  • 配置完成後,單擊儲存