歡迎小伙伴們收看《B 端數據可視化設計經驗分享第四彈：圖表設計》，本節內容將帶領小伙伴們從零開始認識圖表，了解圖表在數據可視化中的作用，圖表的構成等等。希望大家看完后能對圖表有個相對完整的認知，在以后的工作中可以得心應手。

往期回顧；

一、什么是圖表？

大家對圖表一定不陌生，圖表（chart）就是一種通過圖形化的方式呈現和分析數據的工具，就是將表格中的數據進行二次加工，將復雜的業務數據轉化為更加直觀的、有趨勢性、有時間線、空間性的圖形數據，協助用戶根據數據變動而變更相關決策，最終以實現降本提效的目的。

不同部門或者角色在公司中會需要各種類型的數據信息，以支持其業務運營和領導層決策需求。這些數據信息的準確性和及時性對于公司的發展和競爭優勢至關重要。

產品部門關注的主要是用戶行為數據、收入數據、用戶量數據；運營部門關注用戶活躍度數據、營銷效果數據和用戶反饋數據；技術部門關注系統運行數據、技術指標數據；用戶增長部門關注用戶生命周期數據等。

二、一個優秀圖表設計的標準是什么？

要看一個圖表是否優秀，主要看它是否符合 GLAD 原則。GLAD 原則是一個在數據可視化設計中常用來確保圖表質量和有效性的方法論，它主要包括以下四個要素：

GLAD原則

G 原則：優質數據和洞察

G 原則是指 Good Data and Insight。G 原則在探索性數據分析過程中著重提升圖表的商業價值，G 原則的關鍵是“有價值的商業信息”，這一點就要求在準備數據的時候，應該剔除那些商業分析價值不大的部分，而主要留下的是有高價值密度的信息。除了要求有高價值的信息之外，還需要有比較好的 Insight，也就是能洞察數據中的高價值信息，并以較為通俗易懂的形式在圖表中表達出來。

優化前

例圖點評：雖然圖表本身看上去好像并沒什么問題，圖形選擇的也對、顏色搭配也得體，讀者也能理解圖本身要表達的意思。但是，沒有商業價值，即我能看出茅臺拿鐵賣的最好，然后呢？這是哪個階段的數據？不知道。有沒有持續的表現數據？也不知道。

優化后

例圖點評：修改后，從數據中提煉出更有價值的商業數據，在時間維度和空間維度都有體現，簡潔明了的同時，也具有商業參考價值。

L 原則：更少的視覺噪音

L 原則是指 Less Noise。簡單說就是視覺降噪。B 端產品是高度商業化的產品，有用有效遠大于好看，這要求 B 端設計師對藝術的追求要適可而止，商業數據分析不是追求藝術造詣，不是做一張海報去吸引人的眼球，而是提供商業價值并能快速讓人理解。過于酷炫、花哨、浮夸的修飾并不會給圖表帶來任何附加值，反而會增加讀者的閱讀負擔。

例圖1

例圖點評：修改前，有些國家由于人口稀少，導致相關數據也非常小，難以在圖表中展示，造成整個圖表花里胡哨且復雜。修改后，把過小數據的選項折疊為“其他”，默認顯示主要幾個較大國家的數據，當點擊“其他”圖例的時候，再顯示詳細的數據信息，使數據展示更具有側重點。

例圖2

例圖點評：圖例 2 是 dribbble 上的圖表作品，左側是 K 線圖，右側是柱狀圖，它們的問題在于花里胡哨，卻缺少必要的刻度，形式大于內容，過于追求好看的反面案例。

A 原則：準確的表達

A 原則是指 Accurate Expression。通俗講，就是要根據不同的數據類型和不同的商業目的，采用正確的、適合的圖表類型，如表現占比就要用餅圖、百分比柱形圖，表現趨勢就要用折線圖、面積圖等，且要保證圖例的清晰性、刻度的準確性，避免模棱兩可的圖例和不準確的刻度。

錯誤例圖

正確例圖

例圖點評：圖例的本意是對比 2023 和 2024 年不同品牌手機的銷售額占比，是基于時間維度的對比圖，但錯誤圖例卻用了兩個餅圖，無法直觀的表現特定品牌在不同年度的銷售額占比的對比情況。正確的圖例則直接用了柱狀對比圖，一目了然。

D 原則：明確的標記

D 原則是指 Dinstinct Mark。D 原則的作用是幫助讀者加快理解信息的速度，它強調突出重點，需要把通過數據比較得到的差異部分、體現洞察信息的內容利用明顯不同的顏色、形狀、文字標注等手段進行區別，讓讀者的視線聚焦到那里去。

三、圖表的構成要素

圖表是由：標題、圖例、縱軸、橫軸、圖形、圖表范圍及其他輔助元素（如水位線、網格線、刻度值、提示信息等）構成，每一個元素都有它存在的意義。不過在實際使用中不一定非得把元素全部展示出來，精簡化顯示想要展示的內容即可。

圖表的構成

1. 標題

標題即圖表的名字，是圖表必不可少的元素。標題要求簡短明確通俗易懂，視覺上通常需要字體加粗。標題下面也可以跟一行副標題，用作對標題的補充說明。

1. 信息類標題：提供理解數據所需的所有信息，回答「何事」、「何地」、「何時」這三個問題
2. 描述類標題：突出圖表中顯示的主要數據模式或趨勢，描繪出圖表所要講述的故事

標題常用的位置有 3 種，左上、頂居中、底居中。

標題常用位置

2. 圖例

圖例的作用：

1. 區分不同類別數據的標志
2. 開啟/隱藏類別顯示

如果圖表中只有一個數據系列，則可以不用顯示圖例。

常見圖例展現形式

圖例的位置

圖例的位置并沒有嚴格限制與要求，常見位置是上、下、右。

圖例的位置

圖例的顏色

在選擇圖例顏色時，不要用色相過于接近的顏色，否則會容易看混或看錯。

要規范圖例顏色使用，一般分為兩種情況：

1. 常用的圖例顏色（顏色本身代表著行業中的某種含義），此類顏色需要是固定色值，無論哪個 chart 中，都是這個顏色；
2. 無特殊含義的圖例，可以規范出一個圖例顏色的使用順序表。那些無特殊含義的 chart 可以按順序使用圖例顏色，圖例整齊劃一。

值得一提的是，為了照顧色弱、色盲群體，有些產品會增加無障礙花紋來進行輔助識別，提高辨識度。這種設計很有溫度，畢竟設計以人為本。

Echarts的無障礙花紋樣式

圖例的數量

一般來說圖例不要過多，基本要遵循米勒定律，即 7±2 法則。

米勒定律

所以，5 個以內是最佳圖例數量。如果遇到比較復雜的圖表，則可以嘗試進行圖例合并，如上面講 GLAD 原則的時候的 L 原則案例，除了多個圖表可以共用一組圖例（前提是圖例代表的意思一致），還可以把過于零碎的不重要的數據圖例合并為一個“其他”。

如果圖表中只有一個圖例的話，則可以不顯示。

圖例名稱的長度

根據不同使用場景，為了更好的展示效果，要給圖例名稱設置一個最大值，超過最大值后省略展示，鼠標 hover 時再顯示完整名稱。

3. 坐標軸

什么是坐標軸

坐標軸是定義域軸（叫什么）和值域軸（有多少）的統稱。由于可視化圖表繪制的數據大部分都有一定的現實意義，因此我們可以根據坐標軸對應的變量是連續數據還是離散數據，將坐標軸分成連續軸、時間軸、分類軸三大類。軸的類型不同在設計處理上也有差異。

坐標軸分類

常見坐標軸組合方式

常見二維圖表坐標軸分為 X 軸（橫軸）和 Y 軸（縱軸），多用于表示趨勢、排名、比較的數據結構。常見搭配是 1 個 X 軸+1 個 Y 軸。不過特殊情況下也會用到 2X+Y 或 X+2Y。

軸的常見組合方式

在三維圖表里，會多一個 Z 軸。

坐標軸容易被忽略的設計細節

① 軸線一般只考慮是否顯示，例如柱狀圖、折線圖等，在有背景網格線的情況下，會隱藏 y 軸線，條形圖則是隱藏 x 軸線，以達到信息降噪，突出視覺重點的目的。

② 軸刻度通常不顯示，只有在肉眼無法定位到某個標簽對應的數據點時，會顯示刻度線，輔助用戶定位，比如折線圖，或抽樣顯示的柱狀圖。

③ 網格線用于定位數據點的值域范圍，跟隨值域軸的位置單向顯示，柱狀圖采用水平網格，條形圖采用垂直網格。樣式為虛實線的最多，斑馬線由于感知過強，一般不用。

④ 軸標題/單位主要用于說明定義域軸、值域軸的數據含義。當可視化圖表標題、圖例、軸標簽已經能充分表達數據含義，無需單獨顯示標題/單位，「如無必要，勿增實體」。

沒有必要就不要多此一舉

⑤ 連續軸/時間軸進行適當抽樣。連續軸/時間軸，是由一組前后包含同等差值的等差數列組成，缺少幾個數值也能明顯看出中間的對應關系。當多個標簽在容器內全顯示發生重疊，我們可以利用抽樣顯示的手段來避免這種情況。常見的抽樣方式是等分抽樣：當多個標簽在 x 軸無法完全顯示，優先保留首尾標簽，其余標簽按同等步長間隔顯示。間隔等分的前提是間隔數是合數，能被 1 和其本身以外的數整除。如果間隔數為質數，就需要「-1」轉成合數。

舉個例子：9 個標簽，間隔數是 8，能被 2 或 4 整除，即分成 2 等分和 4 等分。8 個標簽，間隔數是 7，無法等分，需要在間隔數基礎上再「-1」，轉成合數 6 后再等分，此時最后一個標簽顯示在倒 數第二個數據點上。

⑥ 分類軸是由幾組離散數據組成，獨立存在無緊密邏輯關聯。若采用抽樣規則，隱藏一些標簽，用戶對圖表認知就會有困難，違背了數據可視化清晰、有效的設計原則。分類軸最佳處理方式是標簽旋轉 45 度，若 45 度仍顯示不下，繼續旋轉 90 度。如果 90 度還是放不下就要考慮結合圖表交互或反轉圖表。

⑦ 分類軸標簽字段有長有短，長文本標簽直接旋轉不僅影響美觀，而且也不利于用戶閱讀。如果數據量比較少只有 2~4 個，長文本標簽更適合水平展示，顯示不下省略即可；如果數據量比較多，就限定字符數后旋轉。

4. 圖形數據

圖形數據是圖表中最為明顯的地方，即圖表的核心元素，如折線圖中的折線，柱狀圖中的柱，餅狀圖中的圓。

圖形數據的使用規則：

1. 邊界要清晰，不可虛化；
2. 多個數據同時顯示的時候，要保證每個數據都能清晰的看到，可以采用透明度來保證所有數據的顯示。

關于圖形的選擇，第四章會著重介紹。

5. 提示信息

提示信息用來標識出圖表中重要點的數據信息，相當于一個 popover 浮窗，鼠標指針在圖形中 hover 的地方通常就是該點的數據信息。需要注意的是：重要信息盡量簡化，只需要展示重要字段。

6. 水位線

根據不同產品的使用場景，有的時候會用到閾值，當達到某個閾值后，就會觸發某種聯動效果。這個時候就需要有個水位線了，它起到警示的作用。

水位線的表現形式有兩種，實線和虛線，顏色的選取則取決于產品的警告級別。

水位線可以是一個，也可以是多個，視情況而定。

7. 圖表范圍

圖表范圍就是時間宏變量，用來切換數據的時間區間，如今天、本周（最近 7 天）、本月（最近 30 天）、本年等。

四、常見圖形分類及使用場景

圖形種類多種多樣，個個身懷絕技，而設計師則是作為挑選者。想要做好圖表設計，就需要對不同圖形有較為深入的了解，并對數據進行正確理解后，與之匹配正確的圖形，用可視化的方式將數據表現出來。

大多數人可能熟悉折線圖、餅狀圖、柱狀圖，但是對其他的圖形可能就不太了解了。本章節將帶大家了解更多的圖形和對應的特性，以便更好的運用和設計。

常見的圖形可以分為七大類：趨勢類、比較類、排名類、占比類、流程類、分布類、關系類。

1. 趨勢類圖形

趨勢類圖形指的是對一段時間內數據的展示，如單個或多個分類數據之間的趨勢變化和比較。常見的趨勢圖形有折線圖、柱狀圖、堆積柱狀圖、面積圖、蠟燭圖、瀑布圖等。

折線圖

折線圖（Line Chart）常用于顯示數據在連續時間上的趨勢變化。通過折線連接各數據點，突出數據的上升或下降趨勢，適合用于時間序列數據的展示。

折線圖構成

柱狀圖

柱狀圖（Basic Column Chart）用于展示多個分類的數據變化和同類別各變量之間的比較。

柱狀圖構成

如例圖，既能展示店鋪每天銷售額所對應的數據，也能反映出每天的銷售額的對比情況，并能通過圖形能夠快速了解銷售額最多和最少的日期。

柱狀圖還有個進階用法，就是折柱混合圖。顧名思義，就是折線+柱狀圖的組合。折柱混合圖通常使用在多組數據進行對比的情景下，如商場物品銷售數據增長或減少，商品價格走勢比較等，它可以非常直觀的展示數據與數據的比較，這樣就能一眼查看到不同時間段的數據值，通過折線和柱狀的形式展現出來。

如例圖，通過柱狀圖能看出每個月的銷售數據，而折線圖能體現出利潤率。當鼠標移入對應位置就可以看到詳細數據。

堆積柱狀圖

堆積柱狀圖（Stacked Bar Chart）是柱狀圖的變種，可以展示兩個或多個數據的變化，以及數據之間的綜合比較情況。

堆積柱狀圖構成

如例圖所示，兩個店鋪每月總銷售額用堆積圖展示，在坐標軸上的每個品類都有兩個數據，可以直觀的展示每個品類的數據總量。

面積圖

面積圖（Area Chart）是折線圖的變種。與折線圖不同的是，其變量數據和坐標軸之間有顏色田中，這樣可以更加突出數據的變化趨勢，更加直觀的體現量的變化。

面積圖構成

需要注意的是，填充的顏色要有 30%左右的透明度，這樣在展示多組數據的時候不會互相遮蓋彼此信息。

蠟燭圖

蠟燭圖也叫 K 線圖（K Chart），常用于股市或期貨市場（近期炒股的同學可能看到 K 線圖心里會一咯噔）。K 線是圍繞開盤價、最高價、最低價、收盤價等反映市場趨勢和價格信息的。

蠟燭圖構成

瀑布圖

瀑布圖也叫階梯圖，顧名思義，瀑布圖的形狀像掛在高山上的瀑布流水。瀑布圖也可以呈現隨時間變化的數據，但不同于堆積柱狀圖的是，瀑布圖能夠重點突出數據變化的結果，以強調多個特定數據之間的變化關系。

2. 比較類圖形

比較類圖形主要用于兩個或兩個以上的類別數據進行比較。常見的類別比較圖形有柱狀圖、分組柱狀圖、氣泡圖、多條折線圖、子彈圖等。

柱狀圖

這里的柱狀圖與前面講的柱狀圖的區別在于 X 軸是表現類別的，前面例圖的 X 軸是表現時間的。

分組柱狀圖

分組柱狀圖（Grouped Bar Chart）是柱狀圖的延伸，它可以在同一數軸上展示各個分類下不同分組的數據情況。如例圖為三家企業在產研部、設計部、商務部的人數對比情況，由此可以清晰的看出企業丙設計部人數最少，商務部人數最多的結論。

氣泡圖

氣泡圖（Bubble Chart）是是散點圖的變體，由卡迪爾坐標系（直角坐標系）和大小不一的圓組成，通常每一個氣泡都代表著一組三個維度的數據。其中兩個決定了氣泡在笛卡爾坐標系中的位置（即 x，y 軸上的值），另外一個則通過氣泡的大小來表示。

氣泡圖構成

如例圖，x 軸表示季度，y 軸表示銷售額，氣泡大小代表產品所占全年銷售額百分比。

多條折線圖

多條折線圖除了可以表示數據隨時間的變化趨勢，還可以展示多組數據的對比情況。如例圖所示，圖為某 app 經營情況的分析，在時間維度上對比下載量、注冊量、成交量三組數據及變化趨勢。

子彈圖

子彈圖（Bullet Graph）顧名思義，就是像子彈發射軌道的圖表。它的數據展示類似儀表盤，優勢在于可以表達豐富的數據信息，且占用的空間相對較小。子彈圖的數據值是需要提前設計好的。

子彈圖構成

如例圖所示，差、良、優和目標值、實際值都是作為動態數據呈現的。相較于餅圖，子彈圖可以更高效的傳遞信息。

3. 排名類圖形

排名圖形可以為分類數據進行排排坐，它可以直觀的展示最大值和最小值。它的特點是“有序”，數值往往是從高到底依次排列，類似榜單。

有序條形圖

有序條形圖主要用于展示各個分類的數據排名，它是最常用的排名圖形，因為是線性結構，對于微小數據間的對比會有很好的易讀性。

有序柱狀圖

有序柱狀圖和有序條形圖一樣，都可以表現數據的排名情況。區別在于一個是橫向對比圖，一個是縱向對比圖。

4. 占比類圖形

占比圖形是大家最常見的圖形了，主要用于表現分類數據占整體的百分比情況。常見的圖形有餅圖、環形圖、堆積面積圖、矩形樹圖、旭日圖等。

餅圖

餅圖（Pie Chart）是展示占比數據最最直觀的圖形了，它是通過餅塊的大小來直觀的表示分類的占比。但是餅圖也有一定局限性，即當占比數值比較接近或者占比分類比較多時，在視覺上就不太容易分辨各個類別的占比情況。

環形圖

環形圖（Donut Chart）的作用和餅圖一樣，但是環形圖的特點是中間區域是空的，所以視覺表現上比餅圖要弱一些，中間空心區域還可以用來放標題、圖標、數據等。

堆積面積圖

堆積面積圖（Stacked Area Chart）就是疊加數據，不同顏色之間的數據并沒有疊加關系，它的整體色塊面積是數據總量，不同的分類數據可展示不同的占比情況。如例圖，不僅可以展示全球能源消耗總量，切換百分比模式還能展示不同國家消耗能源的占比情況。

矩形樹圖

矩形樹圖（Treemap）由馬里蘭大學教授 Ben Shneiderman 于上個世紀 90 年代提出，起初是為了找到一種有效了解磁盤空間使用情況的方法。 矩形樹圖適合展現具有層級關系的數據，能夠直觀體現同級之間的比較。

矩形樹圖的好處在于，相比起傳統的樹形結構圖，矩形樹圖能更有效得利用空間，并且擁有展示占比的功能。矩形樹圖的缺點在于，當分類占比太小的時候文本會變得很難排布。相比起分叉樹圖，矩形樹圖的樹形數據結構表達的不夠直觀、明確。

旭日圖

旭日圖（Sunburst Chart）是一種現代餅圖，它超越傳統的餅圖和環圖，能表達清晰的層級和歸屬關系，以父子層次結構來顯示數據構成情況。旭日圖中，離遠點越近表示級別越高，相鄰兩層中，是內層包含外層的關系。

如例圖，對醫院進行看病、掛號、取藥的流程，用旭日圖呈現。比如取藥是等號、排隊、拿藥的父級，其中等號占取藥的比重最大。

5. 流程類圖形

流程類圖形用來顯示流程流轉和流程流量。一般流程都會呈現出多個環節，每個環節之間會有相應的流量關系，這類圖形可以很好的表示這些關系。常見的流程類圖形有漏斗圖和桑基圖。

漏斗圖

漏斗圖（Funnel Chart）適用于業務流程比較規范、周期長、環節多的單流程單向分析，通過漏斗各環節業務數據的比較能夠直觀地發現和說明問題所在的環節，進而做出決策。漏斗圖用梯形面積表示某個環節業務量與上一個環節之間的差異。漏斗圖從上到下，有邏輯上的順序關系，表現了隨著業務流程的推進業務目標完成的情況。

漏斗圖總是開始于一個 100%的數量，結束于一個較小的數量。在開始和結束之間由 N 個流程環節組成。每個環節用一個梯形來表示，梯形的上底寬度表示當前環節的輸入情況，梯形的下底寬度表示當前環節的輸出情況，上底與下底之間的差值形象的表現了在當前環節業務量的減小量，當前梯形邊的斜率表現了當前環節的減小率。 通過給不同的環節標以不同的顏色，可以幫助用戶更好的區分各個環節之間的差異。漏斗圖的所有環節的流量都應該使用同一個度量。

漏斗圖構成

桑基圖

桑基圖 (Sankey Diagram)，是一種特定類型的流圖，用于描述一組值到另一組值的流向。因為首次使用它的人是一名叫 Sankey 的愛爾蘭土木工程師，所以就叫桑基圖。

桑基圖通常應用于能源、材料成分、金融等數據的可視化分析。

桑基圖的構成

如例圖所示，可以清晰的看到，從搜索框直接搜索進入酒店詳情頁的流量是最大的。充分說明了搜索是剛需。

6. 分布類圖形

分布圖形主要用于展示每個數值在數據集中出現的頻次和數量，常見類型有散點圖、氣泡圖、熱力圖、直方圖、箱型圖、等高線圖等

散點圖

散點圖 Scatter Chart，也叫 X-Y 圖，它將所有的數據以點的形式展現在笛卡爾坐標系上，以顯示變量之間的相互影響程度，點的位置由變量的數值決定。

例圖展示的是 AB 兩國男性的身高和體重數據，通過散點圖中的數據點分布情況可看出，B 國男性的身高遠大于 A 國。

氣泡圖

前面 4.2.3 里講過單維度數據的氣泡圖，這里是多維度的氣泡圖案例。如例圖所示，圖中展示了 5 個維度的數據，氣泡的代表地區類別，氣泡的大小代表人口總數，氣泡顏色代表國家類別，X 軸代表人均國內生產總值，Y 軸代表人均壽命。

需要注意的是，氣泡圖的數據大小容量有限，氣泡太多會使圖表難以閱讀。但是可以通過增加一些交互行為彌補：隱藏一些信息，當鼠標點擊或者懸浮時顯示，或者添加一個選項用于重組或者過濾分組類別。另外，氣泡的大小是映射到面積而不是半徑或者直徑繪制的。因為如果是基于半徑或者直徑的話，圓的大小不僅會呈指數級變化，而且還會導致視覺誤差。

熱力圖

熱力圖就是使用冷色到暖色的不同顏色表示數據從大到小的權重，或用同色系顏色的深淺來表示數據的多少。熱力圖可以在坐標軸上呈現數據的大小分布，也可以在地圖或圖片上使用。

如例圖，杭州實時旅游熱點區域的熱力圖，顏色越偏紅的區域人流量越大，顏色越偏藍人流量越小。

直方圖

直方圖（Histogram）形狀上看上去好像就是柱狀圖，但是含義卻完全不同。直方圖能夠顯示各組頻數或數量分布的情況，易于顯示各組之間頻數或數量的差別。通過直方圖還可以觀察和估計哪些數據比較集中，異常或者孤立的數據分布在何處。

直方圖構成

如例圖所示，繪制了鉆石的全深比數據的統計直方圖，從圖中可以看出在 66 附近有兩個孤立值

箱型圖

箱形圖（Box Chart）又稱盒須圖、盒式圖或箱線圖，是一種用作顯示一組數據分布情況的統計圖。

箱形圖多用于數值統計，雖然相比于直方圖和密度曲線較原始簡單，但是它不需要占據過多的畫布空間，空間利用率高，非常適用于比較多組數據的分布情況。

箱型圖構成

箱型圖的最大特點是可以過濾掉異常值的影響，準確的展示數據的分布情況。如例圖所示，后端工程師波動值最大，UI 設計師平均工資高于交互設計師，產品經理有一項異常值，即產品經理中存在超高薪資的人，其數據不具備參考性，故算作異常值不在正常統計中。

7. 關系類圖形

關系類圖形可以表示數據之間相互關系。 使用圖形的嵌套和位置表示數據之間的關系，通常用于表示數據之間的前后順序、父子關系以及相關性。常見的關系圖有桑基圖、和弦圖、韋恩圖等。

桑基圖

桑基圖前面 4.5.2 講過它在表示流程關系的案例，這里不再贅述。

和弦圖

和弦圖(chord Diagram)，是一種顯示矩陣中數據間相互關系的可視化方法，節點數據沿圓周徑向排列，節點之間使用帶權重（有寬度）的弧線鏈接。

和弦圖的構成

和弦圖用于探索實體組之間的關系。 它們被生物科學界廣泛用于可視化基因數據，在 Wired，New York Times 和 American Scientist 等刊物上也被稱為信息圖表(info graphics)。和弦圖常用于兩種情況，一是展示層次結構中的依賴關系，二是展示統計實體之間的流通關系。

如例圖所示，展示了某個時段用戶使用 uber 軟件在美國舊金山各個城市之間乘車交通的情況，圖中的節點表示城市，節點大小表示了交通流量的多少，從圖中可以看出，交通行為主要發生在市南區、西增區、市中心、金融區、碼頭和警局六個地方。邊連接了有交通行為的兩個地方，節點上邊的條數表示與當前地區有交通行為的地方的數量，邊的初始寬度表示從當前地區到目標地區的流通量，邊的結束寬度表示從目標地區到當前地區的流通量，從圖中可以看出，從 市南區到金融區的流量最大。

韋恩圖

維恩圖(Venn)，也叫溫氏圖、維恩圖、范氏圖，通過圖形與圖形之間的層疊關系，來表示集合與集合之間的相交關系。

五、圖表開源組件庫

AntV，螞蟻金服全新一代數據可視化解決方案

ECharts，一個基于 JavaScript 的開源可視化圖表庫

花火數圖

隨著AI和大數據技術的演進，數據可視化將如何進化？圖表設計是否會變得更智能、更個性化？讓我們持續探索，用設計思維擁抱變化，共同塑造B端可視化的未來。