火山引擎 DataWind 產(chǎn)品可視化能力揭秘
引言
BI是商業(yè)智能(Business Intelligence)的縮寫，是一種將企業(yè)中現(xiàn)有的數(shù)據(jù)進行有效的整合的平臺，它可以幫助企業(yè)、組織和個人更好地了解其業(yè)務狀況、發(fā)現(xiàn)問題，并進行決策。BI產(chǎn)品普遍采用可視化的方式，可以幫助用戶更直觀、更高效、更智能地分析和呈現(xiàn)數(shù)據(jù)，從而提升數(shù)據(jù)驅動的決策能力，快速準確地提供報表并提供決策依據(jù)。
DataWind 是一款支持千億級別數(shù)據(jù)自助分析的一站式數(shù)據(jù)分析與協(xié)作平臺。可打通從數(shù)據(jù)接入、數(shù)據(jù)整合、查詢分析到全員協(xié)同共享的全流程，以數(shù)據(jù)門戶、數(shù)字大屏、管理駕駛艙等可視化形態(tài)，助力業(yè)務用戶實現(xiàn)智能洞察，讓數(shù)據(jù)發(fā)揮價值。
本文聚焦 DataWind 產(chǎn)品的核心可視化能力，并為您揭秘其實現(xiàn)原理。
豐富的可視化展現(xiàn)形式
圖表是 BI 產(chǎn)品中最常用的數(shù)據(jù)可視化工具之一。通過圖表，用戶可以更直觀地了解數(shù)據(jù)的趨勢、關系和分布。常見的圖表類型包括折線圖、柱狀圖、餅圖、散點圖等等。不同的圖表類型適用于不同的數(shù)據(jù)類型和分析目的。例如，折線圖可以展示時間序列數(shù)據(jù)的趨勢，柱狀圖可以比較不同類別的數(shù)據(jù)，餅圖可以顯示數(shù)據(jù)的占比等等，選擇適合的圖表類型對于用戶理解數(shù)據(jù)非常重要。
可視化展現(xiàn)形式
1. 統(tǒng)計圖表
在DataWind產(chǎn)品中，為用戶提供了豐富的圖表類型供用戶使用，其中包括柱狀圖、條形圖、折線圖、面積圖、雙軸圖、餅圖、環(huán)形圖、玫瑰圖、散點圖、填充地圖、散點地圖、詞云圖、直方圖、雷達圖、漏斗圖、指標卡、儀表圖、進度圖、瀑布圖等，以及關系圖表類型桑基圖。
DataWind比較具有特色的是組合圖表與透視圖表。
組合圖表可以將多個笛卡爾坐標系下的圖表并列展示，方便用戶對相同維度下的不同指標進行對比觀察，組合圖不但提供基礎圖表的組合，還提供了與雙軸圖得組合。
而透視圖表是用來觀察一個整體的數(shù)據(jù)在多個維度下的切分的結果，反映在圖表上就是具有樹狀結構的圖表展示。用戶可以通過引入細分的維度，觀察數(shù)據(jù)在不同分面中的特征和趨勢，從而從更細粒度上了解數(shù)據(jù)中包含的信息。
圖片
（組合圖表及透視圖表）
2. 表格
在DataWind中，除了基礎了二維表格渲染以外，還為用戶在單元格內(nèi)提供條件格式的功能，包括渲染圖標集、色階、數(shù)據(jù)圖等場景，以及將單元格渲染為圖片、視頻、鏈接、迷你圖表等需求。并且支持在表頭上進行排序、固定列、字段配置等功能菜單。
圖片
DataWind支持了透視表格的制作，透視表將數(shù)據(jù)按照列維度、行維度進行匯總計算和展現(xiàn)。通過簡單地配置列維度、行維度和指標，即可展示出透視表。與表格相比，透視表將維度區(qū)分成了行與列，在多維度情況下更利于表格呈現(xiàn)。并且同時支持了條件格式、內(nèi)容渲染等二維表支持的特色功能。
圖片
此外DataWind還為用戶提供了趨勢分析表的功能，趨勢分析表可以支持查看核心指標按不同日期粒度聚合的數(shù)據(jù)，并可以對單個指標進一步的作對比、看趨勢、求均值。
圖片
3. Gis地圖
DataWind提供了Gis 地圖來支持LBS需求，其中包括熱力地圖、散點地圖、飛線地圖、柱狀地圖等。
實現(xiàn)揭秘
DataWind中豐富的可視化展現(xiàn)形式得益于開源可視化解決方案 VisActor，DataWind 重度使用了圖表組件VChart 和 多維表格組件庫 VTable。
同時DataWind 研發(fā)團隊與 VisActor 團隊深度合作，參與開源建設，使得一些個性化需求可以得到快速滿足。
VChart(https://www.visactor.io/vchart) 幾乎覆蓋了所有常見的統(tǒng)計圖表類型，并且提供了豐富的擴展接口。這使得 DataWind 在根據(jù)用戶反饋擴充圖表類型，增強圖表能力變得非常容易。
（VChart Gallery：https://www.visactor.io/vchart/example）
表格方面，VTable組件則完全承載了業(yè)務的需求，通過Canvas對表格進行高性能渲染。實現(xiàn)二維表、透視表、透視圖的能力以外，還支持了自定義單元格渲染，單元格渲染迷你圖，樹形展示、透視分析等高階功能。
圖片
（在線體驗：https://www.visactor.io/vtable/example）
而組合圖表與透視圖表的實現(xiàn)，則是結合了VChart與VTable各自的優(yōu)勢特性合并而來，得益于VisActor統(tǒng)一的底層渲染實現(xiàn)，可以容易的使用VTable的布局能力，嵌套VChart的圖表渲染能力實現(xiàn)組合圖表與透視圖表。
通過在VTable上注冊VChart圖表組件，利用VTable的透視表布局能力，將VChart圖表組件渲染到單元格內(nèi)，VTable則負責維護圖表實例以及事件更新。
圖片
例如上面展示的透視圖表完整實現(xiàn)：https://codesandbox.io/s/pivotchart-with-vtable-p8d6f6
代碼結構如下：
圖片
從代碼中我們可以看到通過行列的定義和數(shù)據(jù)配置，可以表達數(shù)據(jù)的透視結構，同時在統(tǒng)計圖表中使用的軸、圖例、標注等組件可以完美的融合在表格中，極大增強了表格的可視化擴展能力。
由于BI 系統(tǒng)的復雜性，以及需要通用圖表和表格能力之外的定制化可視化能力，DataWind 在VisActor的擴展機制基礎上，做了一層面向BI系統(tǒng)的可視化封裝。架構設計如下：
圖片
通過以上封裝，可以快速實現(xiàn)BI系統(tǒng)或類BI的指標報表平臺。
適配不同場景的風格以及主題自定義
在DataWind產(chǎn)品中，面對不同的業(yè)務對象，往往采用的圖表設計也不盡相同。一個好的圖表應該具有清晰的結構、易于閱讀的標簽和軸線、合適的顏色和字體等等，并且要適配當前業(yè)務的特點。
DataWind 中圖表樣式，主題配置
DataWind 支持在多個層面上靈活配置圖表風格。
在圖表層面，支持一鍵替換圖表的數(shù)據(jù)色板：
圖片
在儀表盤層面，則支持為儀表盤整體設置統(tǒng)一的主題樣式。
圖片
DataWind的圖表主題設計遵循以下原則：
- 圖表的結構和布局：圖表的結構應該清晰明了，不應該有過多的元素和噪音。例如，柱狀圖的柱子應該有一定的間隔，以便用戶更容易區(qū)分不同的數(shù)據(jù)。
- 標簽和軸線的設計：標簽和軸線應該易于閱讀和理解。標簽應該清晰明了，軸線應該有適當?shù)目潭群蜆撕灐＠纾瑫r間軸應該有適當?shù)臅r間間隔和標簽，以便用戶更好地理解數(shù)據(jù)的時間趨勢。
- 顏色和字體的選擇：顏色和字體應該適合圖表的風格和主題。顏色應該有適當?shù)膶Ρ榷群惋柡投龋煮w應該易于閱讀和理解。例如，某些圖表可能需要使用不同的顏色來區(qū)分不同的數(shù)據(jù)，而某些圖表可能需要使用相似的顏色來強調數(shù)據(jù)的關系。
實現(xiàn)揭秘
VisActor提供豐富的圖表樣式配置。不僅限于配色主題的自定義，更有文字自適應、布局排版、動畫配置等高定制內(nèi)容，以適應DataWind產(chǎn)品中復雜的可視化需求。
下面以 VChart 的主題色板功能為例進行介紹。在對數(shù)據(jù)進行可視化的過程中，顏色是極為關鍵的元素。如何為圖表選擇合適的色彩，以突顯數(shù)據(jù)的特征并搭配得體，是數(shù)據(jù)可視化中的一門藝術。VChart 為用戶提供了強大且靈活的色板功能，能滿足各種應用場景下的色彩需求。
VChart 支持的色板分為兩大類：
- 數(shù)據(jù)色板：根據(jù)數(shù)據(jù)類別的不同，為數(shù)據(jù)項分別賦予顏色。數(shù)據(jù)色板是一個包含了若干顏色的序列。
- 語義色板：支持將常用色值語義化并在圖表中隨處使用，以統(tǒng)一色彩風格。也就是為顏色賦予有意義的名稱，從而方便維護和修改。
其中，數(shù)據(jù)色板允許同時存在多套色板方案，具體應用哪個色板需要靠具體的條件（如數(shù)據(jù)類別的個數(shù)）來判斷。因此 VChart 可以很輕松地實現(xiàn)靈活的設計需求：
圖片
VChart 中注冊和應用主題的代碼簡單直接：
const theme = {
name: "dark",
background: "#202020",
colorScheme: {
default: {
palette: {
titleFontColor: "#e2e3e6",
labelFontColor: "#888c93",
labelReverseFontColor: "#202020",
axisGridColor: "#404349",
axisDomainColor: "#55595f",
backgroundColor: "#202020"
}
}
}
};
// 注冊主題
VChart.ThemeManager.registerTheme("dark_tmp", theme);
const vchart = new VChart(spec, { dom: "container" });
vchart.renderAsync();
// 主題熱更新
vchart.setCurrentTheme("dark_tmp");（VChart 主題完整示例地址：https://codesandbox.io/s/dark-theme-whm775）
簡單易用的交互形式
DataWind 交互形式
除了設計好的圖表外，圖表的交互性也非常重要。通過圖表的交互功能，用戶可以更深入地了解數(shù)據(jù)，進行更復雜的分析和探索。
提示信息
當用戶將鼠標懸停在圖表上時，可以顯示數(shù)據(jù)的詳細信息和標簽。即觸發(fā)圖表提示信息（Tooltip）。DataWind支持用戶對Tooltip進行富文本渲染，甚至支持了tooltip內(nèi)渲染圖表的能力。
圖片
縮放和平移
用戶可以通過縮放和平移圖表來查看更詳細的數(shù)據(jù)。
圖片
選擇和過濾
用戶可以選擇特定的數(shù)據(jù)點或區(qū)域，并對數(shù)據(jù)進行過濾和篩選。
圖片
上卷下鉆
VisActor中的大量組件都允許業(yè)務進行交互行為的定義，例如圖元的點擊、框選、懸停；數(shù)軸的縮放、選中；提示信息的展示、自定義；圖例的選中、取消等。
通過VisActor提供的圖表事件，DataWind實現(xiàn)了圖表的探索式分析。例如上卷下鉆、圖表標注、參考預警等功能。
圖片
實現(xiàn)揭秘
DataWind中交互功能大部分基于 VisActor 提供的各種自定義擴展能力，下面舉例說明。
VisActor 內(nèi)置支持的Tooltip功能有一定的自定義能力，同時還支持完全自定義渲染tooltip。DataWind便是利用了該能力進行tooltip高級定制。
通過VisActor提供的詳細全面的交互事件，DataWind得以基于這些事件開發(fā)對應的數(shù)據(jù)探索式分析流程。
// 注冊事件
chart.on(event: string, callback: (params: EventParams) => void): void;
chart.on(event: string, query: EventQuery, callback: (params: EventParams) => void): void;
// 卸載事件
chart.off(event: string, callback: (params: EventParams) => void): void;如以上接口所示：通過query參數(shù)鎖定發(fā)生交互的組件，通過event明確交互事件的類型。根據(jù)以上接口即可獲得用戶在圖表上進行的具體交互行為。詳細設置參考VisActor事件介紹：https://visactor.io/vchart/api/API/event。
圖片
以下演示了托管鼠標 hover 事件繪制自定義 tooltip 的能力，通過向圖表內(nèi)注冊Tooltip觸發(fā)的事件，即可接收到Tooltip繪制或更新的消息，并且可以通過解析該消息獲得圖表hover的具體信息。
示例代碼如下：
vchart.setTooltipHandler({
showTooltip: (activeType, tooltipData, params) => {
const tooltip = document.getElementById('tooltip');
tooltip.style.left = params.event.x + 'px';
tooltip.style.top = params.event.y + 'px';
let data = [];
if (activeType === 'dimension') {
data = tooltipData[0]?.data[0]?.datum ?? [];
} else if (activeType === 'mark') {
data = tooltipData[0]?.datum ?? [];
}
tooltipChart.updateData(
'tooltipData',
data.map(({ type, value, month }) => ({ type, value, month }))
);
tooltip.style.visibility = 'visible';
},
hideTooltip: () => {
const tooltip = document.getElementById('tooltip');
tooltip.style.visibility = 'hidden';
},
release: () => {
tooltipChart.release();
const tooltip = document.getElementById('tooltip');
tooltip.remove();
}
});效果如下：
圖片
（完整示例：https://visactor.io/vchart/demo/tooltip/custom-tooltip-handler）
在BI中需要將用戶對行為解析為具體的業(yè)務行為，例如點擊圖元發(fā)生的具體行為可能包括：圖表聯(lián)動、上卷下鉆、維度下鉆、圖表標注、跳轉等許多功能，通過提取事件內(nèi)部的具體參數(shù)以及制定多個事件間的優(yōu)先級，即可設定事件的觸發(fā)規(guī)則。
此外有些業(yè)務行為是多個行為的疊加組合而來，例如：圖表下鉆行為，需要在交互事件觸發(fā)時同時進行圖表維度的更換和范圍的篩選兩步行為即可實現(xiàn)。
因此，復雜的業(yè)務行為可以通過多個基礎事件的組合與疊加實現(xiàn)，這樣不但可以使交互邏輯清晰，也可以降低持續(xù)的維護成本。
靈活、生動的敘事效果
DataWind敘事
DataWind 可以借助儀表盤進行靈活的可視化敘事。在單個圖表中，DataWind 的敘事重點主要是數(shù)據(jù)標注。通過數(shù)據(jù)標注，可以大大降低用戶閱讀圖表、報告或者儀表盤的成本，快速獲取洞察含義。
圖片
實現(xiàn)揭秘
VisActor 的強大敘事能力為其提供了支撐。例如在圖表中添加自定義數(shù)據(jù)標注：
圖片
核心代碼如下：
const spec = {
type: 'line',
markPoint: [
{
coordinate: {
year: '1878',
population: 100
},
itemContent: {//文字標注
offsetY: -100,
type: 'richText',
autoRotate: false,
richText: {
（...富文本配置略）
}
},
itemLine: {// 線標注
...
},
{
(...)
}
],
...
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderAsync();（完整示例代碼可見：https://www.visactor.io/vchart/demo/marker/mark-point-basic）
VisActor也可以通過動態(tài)圖表和動畫等功能進行獨立敘事。例如用帶有自動播放進度條的圖表表示數(shù)據(jù)隨時間遷移：
圖片
（完整示例：https://www.visactor.io/vchart/demo/storytelling/timeline-scatter)
以及和 VRender 結合，呈現(xiàn)更復雜的圖表敘事效果：
圖片
(完整示例：https://www.visactor.io)
懂數(shù)據(jù)更懂用戶的智能推薦
DataWind 圖表推薦
智能化是BI產(chǎn)品的發(fā)展趨勢。當圖表中的字段確定后，選擇合適的圖表類型對數(shù)據(jù)進行展示，對于快速獲取數(shù)據(jù)中的洞察信息具有十分重要的意義。DataWind中的圖表推薦包括圖表類型的推薦和圖表字段的推薦。前者能夠根據(jù)當前選擇的維度和指標字段，推薦最適合進行數(shù)據(jù)展示的圖表類型；后者能夠在用戶切換圖表類型時，自動將數(shù)據(jù)字段分配到合適的視覺通道上，極大地增強用戶進行探索式分析的能力，輕松制作可視化報表。
圖片
DataWind 圖表推薦演示
實現(xiàn)揭秘
@VisActor/VChart提供從數(shù)據(jù)到展現(xiàn)的全流程解決方案，以“可視化敘事”及“智能化”為核心競爭力。大語言模型強大的生成能力為VChart提供了一個自然語言的交互接口，允許用戶通過自然語言直接調用VChart的各項能力，簡單、快速、高質量地完成圖表生成與編輯。
@VisActor/VMind是基于VChart和大語言模型的圖表智能模塊，提供圖表智能推薦、智能配色、對話式圖表編輯等能力，能夠極大地降低VChart的使用門檻，提高用戶創(chuàng)作數(shù)據(jù)可視化作品的效率。
圖片
VMind中的圖表智能推薦功能能夠基于數(shù)據(jù)特性和用戶意圖，完成字段篩選、圖表類型推薦、視覺通道映射、圖表配色，從無到有生成數(shù)據(jù)圖表。
圖片
調用VMind 組件代碼示例如下：
import VMind from '@visactor/VMind'
const vmind = new VMind(openAIKey) //傳入openAI key
const data=`品牌名稱,市場份額,平均價格,凈利潤
Apple,0.5,7068,314531
Samsung,0.2,6059,362345
Vivo,0.05,3406,234512
Nokia,0.01,1064,-1345
Xiaomi,0.1,4087,131345
`
const describe="展示各品牌市場占有率，森林風格"
//傳入csv格式的數(shù)據(jù)和圖表描述，返回圖表spec和圖表動畫時長
const { spec, time } = await vmind.generateChart(data, describe);
//調用VChart進行渲染
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderAsync();追求極致性能
VisActor性能體驗
得益于可視化渲染引擎 VRender 的優(yōu)越性能以及多種優(yōu)化策略， VChart 與 VTable 提供了卓越的渲染性能以及流暢的交互體驗。
VChart 提供了 LTTB 的降采樣方案，通過較少數(shù)據(jù)量的數(shù)據(jù)點保持了原始數(shù)據(jù)的視覺特性，從而降低渲染的計算負擔。
除此之外，VChart 還支持漸進式渲染以避免大量圖形的繪制導致的頁面卡頓。通過渲染任務拆分，VChart 將創(chuàng)建好的圖形元素放置在多個幀內(nèi)執(zhí)行渲染，從而避免過長的同步計算任務阻塞住頁面邏輯，使得圖表呈現(xiàn)流暢自如。VChart 支持在任意圖表中開啟漸進式渲染配置，以下圖為例：
圖片
該示例核心代碼如下：
const spec = {
type: 'common',
data: [
...
],
series: [
{
data: {
id: 'data0'
},
type: 'bar',
xField: 'time',
yField: 'value',
/** 是否開啟大數(shù)據(jù)渲染模式，開啟后會降低渲染的精度 */
large: false,
/** 開啟大數(shù)據(jù)渲染優(yōu)化的閥值，對應的是data的長度;推薦 largeThreshold < progressiveThreshold */
largeThreshold: 500,
/** 分片長度 */
progressiveStep: 100,
/** 開啟分片渲染的閥值，對應的是單系列data的長度 */
progressiveThreshold: 1000,
},
...
],
};（完整代碼：https://visactor.bytedance.net/vchart/guide/tutorial_docs/Progressive_Render）
VTable 支持大數(shù)據(jù)量的秒級渲染，能夠快速展示龐大的數(shù)據(jù)內(nèi)容。即使面對百萬級數(shù)據(jù)，VTable 也能提供高效的渲染以及自由的交互體驗：
圖片
(體驗地址：https://visactor.io/vtable/demo/performance/100W)
DataWind 性能優(yōu)化方案
除了VisActor本身的高性能渲染以外，VisActor還提供了Web Worker和圖表調度技術來提升圖表的并行渲染能力，以防止阻塞導致頁面掉幀、卡頓。
VisActor為了充分利用CPU多核性能，支持使用Web Worker進行圖表并行渲染，通過Web Worker不但可以充分利用客戶端性能，也可以從根源上避免頁面阻塞。DataWind 在此基礎上封裝了Worker Pool組件，模擬線程池概念，實現(xiàn)Worker的調度和復用。
此外，DataWind 還開發(fā)了圖表調度器，用于圖表渲染的異步調度工作，當頁面在短時間內(nèi)同時進入大量的渲染任務時，圖表調度器將會按照圖表優(yōu)先級以及內(nèi)部策略，依次有序的進行渲染工作的調度與分配，并且會將重復的多次無效渲染任務取消或合并，降低渲染的性能開銷。
友好、絲滑的跨端體驗
隨著移動設備的普及，越來越多的用戶需要在移動設備上使用BI產(chǎn)品。移動端環(huán)境下的BI產(chǎn)品需要考慮以下因素：
- 響應式設計：BI產(chǎn)品的界面應該具有響應式設計，以適應不同大小的移動設備屏幕。圖表中的各個元素也需要進行自適應布局
- 移動端適配：BI產(chǎn)品中圖表的渲染、事件等都需要針對移動端進行專門適配
- 移動端優(yōu)化：BI產(chǎn)品的界面和功能應該針對移動設備進行優(yōu)化。例如，圖表中數(shù)據(jù)的展示形式、各組件的布局方式都需要針對移動端進行專門優(yōu)化。
DataWind 移動端體驗
DataWind中的圖表和儀表盤均完美適配了移動端場景，隨時隨地查看數(shù)據(jù)報表，打破時間與空間的壁壘。
圖片
實現(xiàn)揭秘
得益于圖形渲染庫VRender提供的強大跨端渲染能力，VChart圖表支持web、node、h5、小程序等多種場景。在跨端場景中，圖表可能擁有不同的交互響應和特性，適配觸摸屏等移動設備的交互方式和事件。
VChart提供了lark-vchart、taro-vchart封裝，使得在不同的跨端場景中使用VChart變得更加方便和簡單。
針對web場景，VChart提供了React-VChart封裝，它提供了一系列易于使用的 React 組件，用于方便的在 React 開發(fā)環(huán)境中創(chuàng)建各種類型的圖表。組件具有高度的可定制性和可擴展性，可以通過傳遞不同的參數(shù)和配置來實現(xiàn)不同的圖表效果，快速創(chuàng)建各種類型的圖表。
無論是在web端、移動端還是其它場景中，VChart圖表庫都能夠提供高質量的圖表渲染和交互效果，滿足用戶對數(shù)據(jù)可視化的需求。
以飛書小程序（小組件）為例，用戶可以通過VChart 提供的小組件開發(fā)模版，快速將圖表嵌入小組件中：
以下是小程序中的代碼示例:
Page({
data: {
canvasId: 'chartId', // canvasId 圖表唯一Id
events: [], // events 自定義事件
styles: `
height: 50vh;
width: 100%
`, // 樣式字符
// 圖表配置項
spec: {
type: 'pie',
data: [
{
id: 'data1',
values: [
...]
}
],
}
},
onLoad: function (options) {}
});（完整教程:https://www.visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/mini-app/lark）
總結
未來，隨著技術的發(fā)展和用戶需求的不斷增長，BI 產(chǎn)品對可視化的需求在交互、易用性、智能化、敘事特征等方面都會不斷發(fā)生變化，要求會越來越高。
VisActor作為一款免費開源可視化解決方案，經(jīng)過火山引擎海量真實用戶場景的驗證和打磨。在功能性、美觀性、性能、跨端支持度上都做到了非常好的效果，能夠很好的助力業(yè)務實現(xiàn)可視化能力的增強和落地。
DataWind 擁抱開源，與VisActor 緊密合作，互相配合，為開源產(chǎn)品在商業(yè)場景中的落地做了很好的示范。
歡迎交流
我們愿意和數(shù)據(jù)產(chǎn)品相關產(chǎn)品經(jīng)理、設計師、研發(fā)同學一起做更加深入的探討和交流：
- 如果你對某一個方面細節(jié)的的解決方案感興趣，需要進一步交流可以聯(lián)系我們。
- 如果你愿意分享你的產(chǎn)品、場景和經(jīng)驗，可以聯(lián)系我們。
- 如果你在可視化應用過程中有難解的問題，可以聯(lián)系我們一起討論、研究。
