圖表作為數據可視化的重要工具，是對原始數據進行深度加工與解讀的有效手段，它助力我們洞悉數據背後的真相，使我們能更好地適應這個由數據驅動的世界。無論是工作彙報、項目實施、產品設計、後台界面還是數據大屏展示，圖表都扮演着至關重要的角色。
然而，在實際工作過程中，我發現許多開發人員或者產品經理對於圖表設計的理解與運用並不深入，同時市場上關於圖表設計的系統化資料也相對不夠系統化，難以形成完整的產品設計體系。因此，我基於自身的產品設計經驗和理解，整理撰寫了這篇文章，旨在為設計師們提供有益的指導與幫助。

一、圖表的組成

當我們對圖表的結構進行深入拆解後，會發現一個完整圖表組件實際上是由多個細小的部分組合而成的，它們分別是：標題、軸、圖形、圖例、標籤以及提示信息，如下圖所示：

• 圖標-對圖表組件起美化作用
• 標題 - 描述圖表核心內容
• 副標題-對圖表進行相關的描述説明
• 數據畫布-對數據進行圖像化、圖形化的展示
• 提示信息 - 當tap或者hover的時候，以交互提示信息的形式展示該點的數據詳情
• 軸 - 用來定義座標系中數據在方向和值的映射關係，包括數字、分類等
• 圖例 - 對不同數據之間的示例展示
除了樣子以外，每個圖都含有自己的信息量，我們需要選擇合適類型的圖形用於展示不同的內容，這個這個就要看我們主要想表達什麼內容了，四個數據圖表都是用的一樣基礎數據，只是在展示的類型、細分配置方式上不同，所表現出來的效果就不同。

那麼，接下來，我會一點一點地為大家講解它們。

二、圖表詳解

1、標題配置

作為產品設計人員，我深知一個明確且與內容相符的標題對於圖表的重要性。它能夠迅速幫助用户理解圖表所要傳達的信息。通常，我們會根據圖表的內容來確定其標題，這看似簡單，但實際上卻有不少講究。

標題配置包括：標題的icon 圖標展示、主標題內容、副標題內容設置，如上圖所示：相同的數據集（內容）得到不同的展示效果。

2、圖表組件

不同類型的組件表達的內容形態不同，大致分為幾個類型的圖表，包括分類對比、趨勢展現、組成分析、數據分佈等幾個方面

按照組件原子化的思路來定義現在千奇百怪的圖表，大致可以分為六種基礎樣式：折線，面積，散點，氣泡，餅/環，柱形，條形。

3、圖表主題

主題用於圖表之間的顏色展示的，可以對單一組件進行主題色 設置，可以對整個頁面設置統一的主題色，系統定義了一系列的主題色系，也提供了可以自定義的主題顏色。

主題除了設置顏色，還可以設置顏色的漸變等效果

4、圖例設置

圖例用於展示數據對比的説明

5、軸的設置

軸是能夠使每個數據能有效的按照空間概念分佈展開，數軸在數據量大的時候尤為重要，如下圖所示，

其實兩個折線圖都是一樣的數據，只是第二個折線圖設置了數據縮放功能，用户在查看的時候既可以保持整體的趨勢判斷，又可以查看細節的數據展示。

三、選擇合適的圖表

在數據分析領域，我們常常説“眼見為實”，這強調了圖表作為數據可視化工具的重要性。選對了圖表，就能讓數據信息的傳達變得更為迅速且直觀。
要選擇適合的圖表，我認為可以遵循以下三個步驟：
明確核心信息：首先要清楚你想要通過圖表傳達的核心數據或信息是什麼。
分析數據關係：接着要判斷數據之間的比較或關聯類型，比如是顯示佔比關係、數量對比，還是趨勢變化等。
選定圖表類型：最後，根據數據的含義和比較關係，選擇最合適的圖表類型來呈現，比如餅圖適合展示佔比，柱狀圖適合數量對比，折線圖則適合展示趨勢變化等。

1. 確定核心內容

同一組數據用不同的角度看，有不同的主題，比如下面這組數據：

左圖的柱狀圖主要展示出來的每個月數據的增長量，右圖展示的數據增長的同時，主要是來源於哪些數據類型。
綜上所述，選擇合適圖表的關鍵，最初也是最重要的，就是明確要用圖表傳達的核心信息。

2. 判斷比較關係

在實際工作中需要用圖表反映數據的場景各種各樣的，但按數據關係分類大致分為以下幾種情況：

國外專家整理了一份圖表類型選擇指南圖示（如下圖），他把數據的關係分成了4種類型，幫助我們去選出合適的圖表來呈現。

所有的這些組件，可以參考echarts 的組件，這樣可以快速很多

四、常見的可視化圖表問題：

1. 關於數據的密集型思考

折線圖是一種常用於數據可視化分析的圖表類型，它通過將數據點以線段連接起來，以展示數據隨着某個變量（通常是時間或另一個連續變量）的變化而變化的趨勢。

使用建議，使用合適的時間間隔，使鋸齒狀的線條平滑。
如果折線圖上下浮動過於劇烈，那麼可以嘗試拉長時間間隔，比如不每天採樣而以周為單位來採樣。用户不太原因去閲讀鋸齒狀的線條，或者説他們不會喜歡這樣的圖表。

開啓後數據縮放後，使用用户可以通過鼠標滑輪控制展示數據範圍，可以拖動展示時間窗口觀察小範圍的數據

2、圖表的佈局模式？

可視化的佈局模式可以是瀑布流式佈局，也可以採用圖層的方式進行任意佈局，兩種方式各有優劣。瀑布流配置簡單，圖層佈局配置複雜，需要考慮到圖層的上下級關係等控制。所以在我設計的產品體系內，把兩種方式做成兩個配置器，圖表是瀑布式佈局，大屏採用 圖層模式佈局，因為圖表是簡單，大屏是需要效果。

大屏配置器中，就存在多個圖層的配置，上下重疊等業務配置。除了圖層，還存在多個頁面之間的切換，那麼這裏就涉及到畫布了：

3、組件之間對齊

在圖表中對齊是系統默認的把窗口設置後成了24個柵格，這樣，各個組件只能在各自的柵格使用，這樣也好實現屏幕的適配性。但是在大屏中，圖像就是自動拉動大小，靠考慮組件之間對齊的問題。

4、顏色效果的細節控制

建議採用多種精細化的顏色控制器進行顏色效果的設計，甚至可以提供一些暗花、水印等花紋的配置

5、數據之間的聯動控制

當一個圖表的數據發生變化時，另一個圖表中的數據也會自動更新。在對應的圖表，選擇“交互”裏的聯動，點擊配置聯動行為

設置聯動的字段，讓兩個字段關聯起來

五、後記

以上就是本篇文章的全部內容，關於可視化相關的知識還有很多沒有涉及到，例如可視化圖表的配色、商務儀表盤、以及其他的圖表運用場景等等都還未講到。以後有時間慢慢整理分享，大家也可以通過在線demo提前學習，https://bi.bctools.cn，謝謝閲讀！