全部產品
Search
文件中心

DataV:一鍵美化

更新時間:Nov 19, 2024

通過一鍵美化功能,您可以快速調整資料看板的布局,並通過內建樣式豐富資料看板的內容,快速解決在設計資料看板時遇到的整體樣式配置困難的問題。本文介紹DataV一鍵美化功能的使用方法。

使用流程

  1. 登入DataV控制台

  2. 工作台頁面,使用模板建立PC端看板或者單擊一個已有資料看板的編輯按鈕。

  3. 進入畫布編輯器頁面,單擊編輯器頁面上方的美化表徵圖image

  4. 單擊一鍵美化前的image表徵圖,啟用美化功能。

    說明

    一鍵美化功能介面顯示功能未啟用時,您可以選擇單擊未啟用表徵圖表徵圖或頁面內的快速開啟啟用該功能。

  5. 一鍵美化管理頁面,配置資料看板的整體的樣式和布局,詳情請參見模組配置

  6. 在畫布中預覽一鍵美化效果,滿意後,單擊右下方的確認應用image

    重要

    應用效果將覆蓋原有資料看板的配置,並可能對其內部組件變更操作,請確定後再進行操作。

  7. 資料看板一鍵美化功能配置完成後,可預覽並發布資料看板,線上展示資料看板的一鍵美化效果。

模組配置

一鍵美化頁面提供了選擇系統內建的多個配置項。在一鍵美化頁面,您可以設定以下配置項。

  • 整體樣式:在整體樣式處,單擊樣式列表中的image.png表徵圖,選擇一個樣式作為資料看板的整體樣式,單擊空白處即可完成樣式添加。

    說明
    • 當前整體樣式可選20種。

    • 更改整體樣式將會覆蓋並替換之前的整體樣式效果。

    image.png

    • 大標題:資料看板內視覺組的大標題樣式,單擊image表徵圖可取消或應用大標題樣式。

      參數

      說明

      副標題

      開啟開關,開啟大標題內副標題的樣式;關閉開關,關閉副標題。

      文本對齊

      大標題內文本的對齊,可選預設對齊靠左對齊置中對齊靠右對齊

    • 二級標題:資料看板內視覺組的二級標題樣式,單擊image表徵圖可取消或應用二級標題樣式。

      參數

      說明

      副標題

      開啟開關,開啟二級標題內副標題的樣式;關閉開關,關閉副標題。

      文本對齊

      二級標題內文本的對齊,可選預設對齊靠左對齊置中對齊靠右對齊

      排除類型

      選中被排除的組件類型,該類組件無法配置二級標題樣式,可選擇排除地圖數字翻牌器兩類組件;不選中組件,資料看板內所有組件統一配置二級標題樣式。

      說明

      地圖數字翻牌器組件類別以外的組件都必須統一選擇是否開啟二級標題樣式。

    • 二級背景:資料看板內視覺組的二級背景樣式,單擊image表徵圖可取消或應用二級背景樣式。

      排除類型:選中被排除的組件類型,該類組件無法配置二級背景樣式,可選擇排除地圖數字翻牌器兩類組件;不選中組件,資料看板內所有組件統一配置二級背景樣式。

      說明

      地圖數字翻牌器組件類別以外的組件都必須統一選擇是否開啟二級背景樣式。

  • 布局設定:設定資料看板內視覺組的整體布局的樣式。

    • 邊距:資料看板內視覺組多種邊距樣式。

      參數

      說明

      屏內邊距

      資料看板內視覺組與畫布四周的邊距值。

      組外邊距

      資料看板內視覺組之間的距離。

      組內邊距

      組件與視覺組邊框的距離。

    • 對齊閾值:對齊閾值主要用於最佳化頁面配置,調整此處參數使得組件間的對齊關係更加明顯。

      參數

      說明

      地區範圍-X或Y

      X或Y方向的合并閾值,主要用於視覺輔助線的合并。

      說明

      當資料看板中存在兩條獨立的視覺輔助線而導致組件間存在大面積間距時,可以使用該參數進行調整。

      吸附範圍-X或Y

      X或Y方向的吸附閾值,主要用於組件吸附視覺輔助線的閾值。

      說明

      當組件附近存在明顯的視覺輔助線,但組件卻沒有對齊時,使用該參數進行調整。

    • 維持原組:一鍵美化在對資料看板進行布局最佳化時,預設不考慮應用內組件的成組結構。開啟開關時,布局最佳化時會將資料看板內已成組的組件作為一個獨立的視覺組進行編組。當需要將多個組件使用一個視覺組呈現時,可以將多個組件和一個標題手動編組,並開啟此功能開關。

一鍵美化功能樣本

一鍵美化前image 一鍵美化選擇(整體樣式)後的預設狀態image 調整(將地區範圍-X從100px調整為163px)參數後的狀態image調整(將地區範圍-Y從100px調整為159px)參數後的狀態image 調整(將吸附範圍-X從100px調整為116px)參數後的狀態image調整(將吸附範圍-Y從100px調整為229px)參數後的狀態image

說明

您可以根據自我審美習慣,根據具體布局設定最佳閾值,以上僅為樣本。