Part01
————————
前言

EasyV作為一個低代碼數(shù)字孿生可視化搭建平臺，其圖表組件作為可視化項目建設的基礎構成發(fā)揮著重要的作用

經(jīng)過多年可視化項目交付經(jīng)驗，沉淀了一套形態(tài)多樣、樣式精細、高配置度的數(shù)據(jù)可視化圖表。
?

Figma開源文件社區(qū)鏈接

https://www.figma.com/community/file/1222735688427337392

EasyV產(chǎn)品官網(wǎng)

https://easyv.cloud/?t=figmaplugin

使用反饋表單

https://apps.dtable.cloud/share/vslgE9a4OgBB0ci4T
?

Part02
————————
EasyV Charts Components是什么？

基于EasyV圖表組件的Figma圖表組件體系庫
?

2.1 支持

-包含常用24種可視化圖表：柱狀圖、堆疊柱狀圖、立體柱狀圖、立體堆疊柱狀圖、水平條形圖、水平堆疊條形圖、象形圖、折線圖、面積圖、餅圖、環(huán)圖、玫瑰圖、萬用圖……

-所有圖表的樣式均可根據(jù)尺寸自適應

-內置10套B端可視化設計主題配色：深色8?淺色2

-易拓展：配置化快速調整圖表樣式，例如：數(shù)值標簽、坐標軸…

-可落地：圖表設計可通過EasyV數(shù)字孿生可視化搭建平臺快速落地

2.2 提效

基于EasyV的可視化項目交付包含需求調研、原型設計、頁面設計、頁面搭建、數(shù)據(jù)接入等環(huán)節(jié)，EasyV Charts component 幫助在原型設計、頁面設計、頁面搭建這些關鍵節(jié)點提效，提升40%可視化圖表設計效率，提升10%的可視化項目交付效率。

Part03
————————
設計語言

設計關鍵詞
- 易讀性、簡潔、繼承性、拓展性、復用率、靈活性、可維護性

?

功能點
- 全局變量、形狀可控、顯隱、圓角、占比可配、一鍵換膚

3.1 色彩

色彩作為突出重點、區(qū)分數(shù)據(jù)類別、傳達情感和引導觀眾注意力的部分，我們內置了可視化設計VED團隊自有的設計作品中十套滿足常用場景的配色方案，與EasyV中的主題配色一一對應。

?

3.2 布局

3.2.1 圖表構成

通過對圖形語法的啟示，我們從設計的角度對圖表進行了原子級別的拆分和抽象，從而形成了一套通用的組件，其中包括軸線、圖例、圖表和信息提示等。

?

3.2.2 響應式

絕對像素布局
優(yōu)勢：精確地控制圖表元素的位置和大小，保障圖形特征；
挑戰(zhàn)：項目硬件分辨率差異較大時，圖表會失去復用性，需要設計者對展示的不足做點狀修補；

百分比布局
優(yōu)勢：根據(jù)顯示區(qū)域自適應圖表信息密度，有限的空間內幫助用戶更快地理解信息和獲取洞見；
挑戰(zhàn)：圖形表達的精細化顆粒度配置困難；
?

?

在EasyVxFigma的可視化體系中，以柱狀圖為例，我們選用了使圖表元素在各種屏幕尺寸下具有更好的可讀性和可用性的百分比布局，這與EasyV圖表組件的布局邏輯保持了一致；

?

我們從圖表整體、圖表內原子組件梳理了適用于各元素組件的布局適應體系（響應策略），如下：

· 軸

① 縱軸
?

- 固定columns間間距為0，縱軸組為等距；根據(jù)父級容器尺寸自適應每個column的寬高；

- 參網(wǎng)格線和軸標簽始終水平居中于column；參考線長度適應父級容器，軸標簽始終居于column底部；

?

?

② 橫軸
?

- rows為固定寬（top、bottom為中間段row寬度的1/2），rows間間距動態(tài)值，由父級容器尺寸決定；

- 參網(wǎng)格線和軸標簽始終垂直居中于row；參考線長度適應父級容器，軸標簽始終居于row左側；

- 若顯示z軸，不會影響row總長，z軸標簽始終位于row右側；

?

③ 坐標軸
?

- 橫縱軸在整個圖表容器中布局約束均為左右拉伸+上下拉伸；

· 圖例

- 橫向圖例組設為三種布局方式：左對齊、居中對齊、右對齊；圖標與文本間間距為固定值；

- 圖例始終居于圖表容器的頂部，寬度適應容器 ，不改變原布局方式；

- 由于沒有更多輔助信息幫助數(shù)據(jù)表達，餅圖、環(huán)圖的圖例相較于軸類的圖例被寄予了更高的期望；除了圖標與類目文本外，供給使用者是否顯示類目對應的占比以及實際數(shù)值情況，其約束方式最大程度上保障圖表元素間的平衡，若整體拖拽比例較大時，需要手動校準；

· 圖表
?

- 各類型圖表元素在整個圖表容器中布局約束均為左右拉伸+上下拉伸，不改變子級布局方式；

· 信息提示與參考線

- 信息提示和參考線的適應方式具有一定的局限性，圖表整體拖拽比例較大時，需要手動校準；

- 信息提示布局約束為鎖定左側和上間距；

- 參考線約束為左右拉伸；網(wǎng)格線適應容器，文本始終位于右側；

?

3.2.3 字體

?

對于常規(guī)1920x1080的屏幕來說，正文14-18px，小標題文字18-24px，最小字號不低于12px;

?

行距通常設置為文本字號的1.5倍，比如14px字體行距為22px，16px字體行距為24px；

?

基于這一設計標準下，圖表中的軸標簽與數(shù)值標簽應用了12px字體，信息提示框中圖例需要強調數(shù)值的部分應用了14px，餅圖和指標圖中的指標數(shù)值應用了24px字號；

?

?

?

Part04
————————
圖表組件

4.1 折線圖/曲線圖

?

反映數(shù)據(jù)隨時間變化趨勢，或用于展示比率、比值等數(shù)據(jù)

?

- 提供三種折線/曲線樣式，可任意組合

- 線圖、面積圖，折線圖、曲線圖，均可一鍵切換

- 線的點數(shù)可配置為（6，7，8，12，∞），點數(shù)需要跟x軸軸線數(shù)量保持一致

- 數(shù)值標簽、點位顯隱可控

?

?

?

?

- 更靈活：保留了對于【線】水平位置和高度占比的可配置性，更精準的把控圖表的視覺平衡

?

?

4.2 柱狀圖/排行條形圖

?

柱狀圖一般用于展現(xiàn)數(shù)據(jù)的變化和對比；橫向的排行條形圖一般用于展現(xiàn)數(shù)據(jù)的排名對比

?

- 基本柱狀圖、堆疊柱狀圖、基本條形圖、水平堆疊條形圖、雙向水平條形圖一鍵切換

- 柱子數(shù)可配置為（4，5，6，8， 12），數(shù)量與x軸預設數(shù)量為一一對應

- 數(shù)值標簽顯隱可控

?

?

- 更垂直：基于EasyV柱圖組件的形態(tài)，提供了“立體柱”、“象形圖”、“圖片素材”等樣式風格，且頭部圖片可配置顯隱，落地更高效

?

?

- 更靈活：保留了對于有效柱形高度的配置、以及類目柱間間距、系列柱間間距的可配置性，更好的詮釋數(shù)據(jù)之美

4.3 餅圖/占比圖

?

用來表示每一個數(shù)值相對于總值的大??；當需要呈現(xiàn)的類目超過7/8，并數(shù)據(jù)的間的差異不大，建議使用柱圖作為數(shù)據(jù)呈現(xiàn)的方式

?

- 基本餅圖、多色玫瑰餅圖、基本環(huán)圖、輪播環(huán)圖一鍵切換

- 餅圖系列數(shù)(2，3，4，5），需要跟圖例數(shù)量保持一致

- 餅圖間間隙顯隱可控

- 圖例內容數(shù)量 (1，2，3），系列數(shù)量 (1， 2，3，4，5)

- 數(shù)值標簽內容數(shù)（1，2)，位置（左上，右上，右下，左下）

- 輪播環(huán)圖下可配當前值

?

- 更精細化：占比、半徑可控，更貼合實際業(yè)務場景?

4.3 組合圖（萬用圖）

供復合場景使用，通常使用多縱軸來輔助表現(xiàn)多維度的數(shù)據(jù)呈現(xiàn)

4.4 指標
通常用于核心指標

4.5 其他
除上述圖表類型外，還提供了輪播表格，滿足展示明細數(shù)據(jù)的使用場景

Part05
————————
寫在最后

據(jù) IBM 稱，我們的世界每天要創(chuàng)建出高達 2.5 萬億字節(jié)的數(shù)據(jù)。人腦很難直接理解所有數(shù)據(jù)，但是可視化設計師可以通過圖表設計在用戶和數(shù)據(jù)之間建立對話。

?

作為設計師，設計圖表的工作重點在于如何讓復雜、混亂的數(shù)據(jù)更簡單的呈現(xiàn)給用戶。并且讓用戶能夠快速、高效的理解分析數(shù)據(jù)從而做出正確的反饋，最終將構建一個回合的交互行為。

?

這次我們通過EasyV Charts Component探索了可視化設計中圖表組件體系的構建，結合了可視化項目中圖表設計規(guī)范，希望輔助其他設計師更好的通過圖表設計表達、詮釋數(shù)據(jù)之美?；贓asyV Charts Component提高設計師的設計效率，通過EasyV提升落地效率，把更多的時間用在更有價值體現(xiàn)的部分上。

?

此外，我們未來也會結合圖表插件拓展產(chǎn)品能力，提升可視化項目頁面搭建效率。

Figma開源文件社區(qū)鏈接

https://www.figma.com/community/file/1222735688427337392

?

EasyV產(chǎn)品官網(wǎng)

https://easyv.cloud/?t=figmaplugin

?

使用反饋表單

https://apps.dtable.cloud/share/vslgE9a4OgBB0ci4T