引言

BI是商業(yè)智能(Business Intelligence)的縮寫，是一種將企業(yè)中現(xiàn)有的數(shù)據(jù)進(jìn)行有效的整合的平臺(tái)，它可以幫助企業(yè)、組織和個(gè)人更好地了解其業(yè)務(wù)狀況、發(fā)現(xiàn)問題，并進(jìn)行決策。BI產(chǎn)品普遍采用可視化的方式，可以幫助用戶更直觀、更高效、更智能地分析和呈現(xiàn)數(shù)據(jù)，從而提升數(shù)據(jù)驅(qū)動(dòng)的決策能力，快速準(zhǔn)確地提供報(bào)表并提供決策依據(jù)。

DataWind 是一款支持千億級別數(shù)據(jù)自助分析的一站式數(shù)據(jù)分析與協(xié)作平臺(tái)?？纱蛲◤臄?shù)據(jù)接入、數(shù)據(jù)整合、查詢分析到全員協(xié)同共享的全流程，以數(shù)據(jù)門戶、數(shù)字大屏、管理駕駛艙等可視化形態(tài)，助力業(yè)務(wù)用戶實(shí)現(xiàn)智能洞察，讓數(shù)據(jù)發(fā)揮價(jià)值。

本文聚焦 DataWind 產(chǎn)品的核心可視化能力，并為您揭秘其實(shí)現(xiàn)原理。

豐富的可視化展現(xiàn)形式

圖表是 BI 產(chǎn)品中最常用的數(shù)據(jù)可視化工具之一。通過圖表，用戶可以更直觀地了解數(shù)據(jù)的趨勢、關(guān)系和分布。常見的圖表類型包括折線圖、柱狀圖、餅圖、散點(diǎn)圖等等。不同的圖表類型適用于不同的數(shù)據(jù)類型和分析目的。例如，折線圖可以展示時(shí)間序列數(shù)據(jù)的趨勢，柱狀圖可以比較不同類別的數(shù)據(jù)，餅圖可以顯示數(shù)據(jù)的占比等等，選擇適合的圖表類型對于用戶理解數(shù)據(jù)非常重要。

可視化展現(xiàn)形式

1. 統(tǒng)計(jì)圖表

在DataWind產(chǎn)品中，為用戶提供了豐富的圖表類型供用戶使用，其中包括柱狀圖、條形圖、折線圖、面積圖、雙軸圖、餅圖、環(huán)形圖、玫瑰圖、散點(diǎn)圖、填充地圖、散點(diǎn)地圖、詞云圖、直方圖、雷達(dá)圖、漏斗圖、指標(biāo)卡、儀表圖、進(jìn)度圖、瀑布圖等，以及關(guān)系圖表類型?；鶊D。

DataWind比較具有特色的是組合圖表與透視圖表。

組合圖表可以將多個(gè)笛卡爾坐標(biāo)系下的圖表并列展示，方便用戶對相同維度下的不同指標(biāo)進(jìn)行對比觀察，組合圖不但提供基礎(chǔ)圖表的組合，還提供了與雙軸圖得組合。

而透視圖表是用來觀察一個(gè)整體的數(shù)據(jù)在多個(gè)維度下的切分的結(jié)果，反映在圖表上就是具有樹狀結(jié)構(gòu)的圖表展示。用戶可以通過引入細(xì)分的維度，觀察數(shù)據(jù)在不同分面中的特征和趨勢，從而從更細(xì)粒度上了解數(shù)據(jù)中包含的信息。

圖片

（組合圖表及透視圖表）

2. 表格

在DataWind中，除了基礎(chǔ)了二維表格渲染以外，還為用戶在單元格內(nèi)提供條件格式的功能，包括渲染圖標(biāo)集、色階、數(shù)據(jù)圖等場景，以及將單元格渲染為圖片、視頻、鏈接、迷你圖表等需求。并且支持在表頭上進(jìn)行排序、固定列、字段配置等功能菜單。

圖片

DataWind支持了透視表格的制作，透視表將數(shù)據(jù)按照列維度、行維度進(jìn)行匯總計(jì)算和展現(xiàn)。通過簡單地配置列維度、行維度和指標(biāo)，即可展示出透視表。與表格相比，透視表將維度區(qū)分成了行與列，在多維度情況下更利于表格呈現(xiàn)。并且同時(shí)支持了條件格式、內(nèi)容渲染等二維表支持的特色功能。

圖片

此外DataWind還為用戶提供了趨勢分析表的功能，趨勢分析表可以支持查看核心指標(biāo)按不同日期粒度聚合的數(shù)據(jù)，并可以對單個(gè)指標(biāo)進(jìn)一步的作對比、看趨勢、求均值。

圖片

3. Gis地圖

DataWind提供了Gis 地圖來支持LBS需求，其中包括熱力地圖、散點(diǎn)地圖、飛線地圖、柱狀地圖等。

實(shí)現(xiàn)揭秘

DataWind中豐富的可視化展現(xiàn)形式得益于開源可視化解決方案 VisActor，DataWind 重度使用了圖表組件VChart 和 多維表格組件庫 VTable。

同時(shí)DataWind 研發(fā)團(tuán)隊(duì)與 VisActor 團(tuán)隊(duì)深度合作，參與開源建設(shè)，使得一些個(gè)性化需求可以得到快速滿足。

VChart(https://www.visactor.io/vchart) 幾乎覆蓋了所有常見的統(tǒng)計(jì)圖表類型，并且提供了豐富的擴(kuò)展接口。這使得 DataWind 在根據(jù)用戶反饋擴(kuò)充圖表類型，增強(qiáng)圖表能力變得非常容易。

（VChart Gallery：https://www.visactor.io/vchart/example）

表格方面，VTable組件則完全承載了業(yè)務(wù)的需求，通過Canvas對表格進(jìn)行高性能渲染。實(shí)現(xiàn)二維表、透視表、透視圖的能力以外，還支持了自定義單元格渲染，單元格渲染迷你圖，樹形展示、透視分析等高階功能。

圖片

（在線體驗(yàn)：https://www.visactor.io/vtable/example）

而組合圖表與透視圖表的實(shí)現(xiàn)，則是結(jié)合了VChart與VTable各自的優(yōu)勢特性合并而來，得益于VisActor統(tǒng)一的底層渲染實(shí)現(xiàn)，可以容易的使用VTable的布局能力，嵌套VChart的圖表渲染能力實(shí)現(xiàn)組合圖表與透視圖表。

通過在VTable上注冊VChart圖表組件，利用VTable的透視表布局能力，將VChart圖表組件渲染到單元格內(nèi)，VTable則負(fù)責(zé)維護(hù)圖表實(shí)例以及事件更新。

圖片

例如上面展示的透視圖表完整實(shí)現(xiàn)：https://codesandbox.io/s/pivotchart-with-vtable-p8d6f6

代碼結(jié)構(gòu)如下：

圖片

從代碼中我們可以看到通過行列的定義和數(shù)據(jù)配置，可以表達(dá)數(shù)據(jù)的透視結(jié)構(gòu)，同時(shí)在統(tǒng)計(jì)圖表中使用的軸、圖例、標(biāo)注等組件可以完美的融合在表格中，極大增強(qiáng)了表格的可視化擴(kuò)展能力。

由于BI 系統(tǒng)的復(fù)雜性，以及需要通用圖表和表格能力之外的定制化可視化能力，DataWind 在VisActor的擴(kuò)展機(jī)制基礎(chǔ)上，做了一層面向BI系統(tǒng)的可視化封裝。架構(gòu)設(shè)計(jì)如下：

圖片

通過以上封裝，可以快速實(shí)現(xiàn)BI系統(tǒng)或類BI的指標(biāo)報(bào)表平臺(tái)。

適配不同場景的風(fēng)格以及主題自定義

在DataWind產(chǎn)品中，面對不同的業(yè)務(wù)對象，往往采用的圖表設(shè)計(jì)也不盡相同。一個(gè)好的圖表應(yīng)該具有清晰的結(jié)構(gòu)、易于閱讀的標(biāo)簽和軸線、合適的顏色和字體等等，并且要適配當(dāng)前業(yè)務(wù)的特點(diǎn)。

DataWind 中圖表樣式，主題配置

DataWind 支持在多個(gè)層面上靈活配置圖表風(fēng)格。

在圖表層面，支持一鍵替換圖表的數(shù)據(jù)色板：

圖片

在儀表盤層面，則支持為儀表盤整體設(shè)置統(tǒng)一的主題樣式。

圖片

DataWind的圖表主題設(shè)計(jì)遵循以下原則：

• 圖表的結(jié)構(gòu)和布局：圖表的結(jié)構(gòu)應(yīng)該清晰明了，不應(yīng)該有過多的元素和噪音。例如，柱狀圖的柱子應(yīng)該有一定的間隔，以便用戶更容易區(qū)分不同的數(shù)據(jù)。
• 標(biāo)簽和軸線的設(shè)計(jì)：標(biāo)簽和軸線應(yīng)該易于閱讀和理解。標(biāo)簽應(yīng)該清晰明了，軸線應(yīng)該有適當(dāng)?shù)目潭群蜆?biāo)簽。例如，時(shí)間軸應(yīng)該有適當(dāng)?shù)臅r(shí)間間隔和標(biāo)簽，以便用戶更好地理解數(shù)據(jù)的時(shí)間趨勢。
• 顏色和字體的選擇：顏色和字體應(yīng)該適合圖表的風(fēng)格和主題。顏色應(yīng)該有適當(dāng)?shù)膶Ρ榷群惋柡投?，字體應(yīng)該易于閱讀和理解。例如，某些圖表可能需要使用不同的顏色來區(qū)分不同的數(shù)據(jù)，而某些圖表可能需要使用相似的顏色來強(qiáng)調(diào)數(shù)據(jù)的關(guān)系。

實(shí)現(xiàn)揭秘

VisActor提供豐富的圖表樣式配置。不僅限于配色主題的自定義，更有文字自適應(yīng)、布局排版、動(dòng)畫配置等高定制內(nèi)容，以適應(yīng)DataWind產(chǎn)品中復(fù)雜的可視化需求。

下面以 VChart 的主題色板功能為例進(jìn)行介紹。在對數(shù)據(jù)進(jìn)行可視化的過程中，顏色是極為關(guān)鍵的元素。如何為圖表選擇合適的色彩，以突顯數(shù)據(jù)的特征并搭配得體，是數(shù)據(jù)可視化中的一門藝術(shù)。VChart 為用戶提供了強(qiáng)大且靈活的色板功能，能滿足各種應(yīng)用場景下的色彩需求。

VChart 支持的色板分為兩大類：

• 數(shù)據(jù)色板：根據(jù)數(shù)據(jù)類別的不同，為數(shù)據(jù)項(xiàng)分別賦予顏色。數(shù)據(jù)色板是一個(gè)包含了若干顏色的序列。
• 語義色板：支持將常用色值語義化并在圖表中隨處使用，以統(tǒng)一色彩風(fēng)格。也就是為顏色賦予有意義的名稱，從而方便維護(hù)和修改。

其中，數(shù)據(jù)色板允許同時(shí)存在多套色板方案，具體應(yīng)用哪個(gè)色板需要靠具體的條件（如數(shù)據(jù)類別的個(gè)數(shù)）來判斷。因此 VChart 可以很輕松地實(shí)現(xiàn)靈活的設(shè)計(jì)需求：

圖片

VChart 中注冊和應(yīng)用主題的代碼簡單直接：

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ù)，進(jìn)行更復(fù)雜的分析和探索。

提示信息

當(dāng)用戶將鼠標(biāo)懸停在圖表上時(shí)，可以顯示數(shù)據(jù)的詳細(xì)信息和標(biāo)簽。即觸發(fā)圖表提示信息（Tooltip）。DataWind支持用戶對Tooltip進(jìn)行富文本渲染，甚至支持了tooltip內(nèi)渲染圖表的能力。

圖片

縮放和平移

用戶可以通過縮放和平移圖表來查看更詳細(xì)的數(shù)據(jù)。

圖片

選擇和過濾

用戶可以選擇特定的數(shù)據(jù)點(diǎn)或區(qū)域，并對數(shù)據(jù)進(jìn)行過濾和篩選。

圖片

上卷下鉆

VisActor中的大量組件都允許業(yè)務(wù)進(jìn)行交互行為的定義，例如圖元的點(diǎn)擊、框選、懸停；數(shù)軸的縮放、選中；提示信息的展示、自定義；圖例的選中、取消等。

通過VisActor提供的圖表事件，DataWind實(shí)現(xiàn)了圖表的探索式分析。例如上卷下鉆、圖表標(biāo)注、參考預(yù)警等功能。

圖片

實(shí)現(xiàn)揭秘

DataWind中交互功能大部分基于 VisActor 提供的各種自定義擴(kuò)展能力，下面舉例說明。

VisActor 內(nèi)置支持的Tooltip功能有一定的自定義能力，同時(shí)還支持完全自定義渲染tooltip。DataWind便是利用了該能力進(jìn)行tooltip高級定制。

通過VisActor提供的詳細(xì)全面的交互事件，DataWind得以基于這些事件開發(fā)對應(yīng)的數(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ù)以上接口即可獲得用戶在圖表上進(jìn)行的具體交互行為。詳細(xì)設(shè)置參考VisActor事件介紹：https://visactor.io/vchart/api/API/event。

圖片

以下演示了托管鼠標(biāo) 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è)務(wù)行為，例如點(diǎn)擊圖元發(fā)生的具體行為可能包括：圖表聯(lián)動(dòng)、上卷下鉆、維度下鉆、圖表標(biāo)注、跳轉(zhuǎn)等許多功能，通過提取事件內(nèi)部的具體參數(shù)以及制定多個(gè)事件間的優(yōu)先級，即可設(shè)定事件的觸發(fā)規(guī)則。

此外有些業(yè)務(wù)行為是多個(gè)行為的疊加組合而來，例如：圖表下鉆行為，需要在交互事件觸發(fā)時(shí)同時(shí)進(jìn)行圖表維度的更換和范圍的篩選兩步行為即可實(shí)現(xiàn)。

因此，復(fù)雜的業(yè)務(wù)行為可以通過多個(gè)基礎(chǔ)事件的組合與疊加實(shí)現(xiàn)，這樣不但可以使交互邏輯清晰，也可以降低持續(xù)的維護(hù)成本。

靈活、生動(dòng)的敘事效果

DataWind敘事

DataWind 可以借助儀表盤進(jìn)行靈活的可視化敘事。在單個(gè)圖表中，DataWind 的敘事重點(diǎn)主要是數(shù)據(jù)標(biāo)注。通過數(shù)據(jù)標(biāo)注，可以大大降低用戶閱讀圖表、報(bào)告或者儀表盤的成本，快速獲取洞察含義。

圖片

實(shí)現(xiàn)揭秘

VisActor 的強(qiáng)大敘事能力為其提供了支撐。例如在圖表中添加自定義數(shù)據(jù)標(biāo)注：

圖片

核心代碼如下：

const spec = {
  type: 'line',
  markPoint: [
    {
      coordinate: {
        year: '1878',
        population: 100
      },
      itemContent: {//文字標(biāo)注
        offsetY: -100,
        type: 'richText',
        autoRotate: false,
        richText: {
          （...富文本配置略）
        }
      },
      itemLine: {// 線標(biāo)注
      ...
    },
    {
      (...)
    }
  ],
...
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderAsync();

（完整示例代碼可見：https://www.visactor.io/vchart/demo/marker/mark-point-basic）

VisActor也可以通過動(dòng)態(tài)圖表和動(dòng)畫等功能進(jìn)行獨(dú)立敘事。例如用帶有自動(dòng)播放進(jìn)度條的圖表表示數(shù)據(jù)隨時(shí)間遷移：

圖片

（完整示例：https://www.visactor.io/vchart/demo/storytelling/timeline-scatter)

以及和 VRender 結(jié)合，呈現(xiàn)更復(fù)雜的圖表敘事效果：

圖片

(完整示例：https://www.visactor.io)

懂?dāng)?shù)據(jù)更懂用戶的智能推薦

DataWind 圖表推薦

智能化是BI產(chǎn)品的發(fā)展趨勢。當(dāng)圖表中的字段確定后，選擇合適的圖表類型對數(shù)據(jù)進(jìn)行展示，對于快速獲取數(shù)據(jù)中的洞察信息具有十分重要的意義。DataWind中的圖表推薦包括圖表類型的推薦和圖表字段的推薦。前者能夠根據(jù)當(dāng)前選擇的維度和指標(biāo)字段，推薦最適合進(jìn)行數(shù)據(jù)展示的圖表類型；后者能夠在用戶切換圖表類型時(shí)，自動(dòng)將數(shù)據(jù)字段分配到合適的視覺通道上，極大地增強(qiáng)用戶進(jìn)行探索式分析的能力，輕松制作可視化報(bào)表。

圖片

DataWind 圖表推薦演示

實(shí)現(xiàn)揭秘

@VisActor/VChart提供從數(shù)據(jù)到展現(xiàn)的全流程解決方案，以“可視化敘事”及“智能化”為核心競爭力。大語言模型強(qiáng)大的生成能力為VChart提供了一個(gè)自然語言的交互接口，允許用戶通過自然語言直接調(diào)用VChart的各項(xiàng)能力，簡單、快速、高質(zhì)量地完成圖表生成與編輯。

@VisActor/VMind是基于VChart和大語言模型的圖表智能模塊，提供圖表智能推薦、智能配色、對話式圖表編輯等能力，能夠極大地降低VChart的使用門檻，提高用戶創(chuàng)作數(shù)據(jù)可視化作品的效率。

圖片

VMind中的圖表智能推薦功能能夠基于數(shù)據(jù)特性和用戶意圖，完成字段篩選、圖表類型推薦、視覺通道映射、圖表配色，從無到有生成數(shù)據(jù)圖表。

圖片

調(diào)用VMind 組件代碼示例如下：

import VMind from '@visactor/VMind'
const vmind = new VMind(openAIKey) //傳入openAI key
const data=`品牌名稱,市場份額,平均價(jià)格,凈利潤
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="展示各品牌市場占有率，森林風(fēng)格"
//傳入csv格式的數(shù)據(jù)和圖表描述，返回圖表spec和圖表動(dòng)畫時(shí)長
const { spec, time } = await vmind.generateChart(data, describe); 
//調(diào)用VChart進(jìn)行渲染
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderAsync();

追求極致性能

VisActor性能體驗(yàn)

得益于可視化渲染引擎 VRender 的優(yōu)越性能以及多種優(yōu)化策略， VChart 與 VTable 提供了卓越的渲染性能以及流暢的交互體驗(yàn)。

VChart 提供了 LTTB 的降采樣方案，通過較少數(shù)據(jù)量的數(shù)據(jù)點(diǎn)保持了原始數(shù)據(jù)的視覺特性，從而降低渲染的計(jì)算負(fù)擔(dān)。

除此之外，VChart 還支持漸進(jìn)式渲染以避免大量圖形的繪制導(dǎo)致的頁面卡頓。通過渲染任務(wù)拆分，VChart 將創(chuàng)建好的圖形元素放置在多個(gè)幀內(nèi)執(zhí)行渲染，從而避免過長的同步計(jì)算任務(wù)阻塞住頁面邏輯，使得圖表呈現(xiàn)流暢自如。VChart 支持在任意圖表中開啟漸進(jìn)式渲染配置，以下圖為例：

圖片

該示例核心代碼如下：

const spec = {
  type: 'common',
  data: [
...
  ],
  series: [
    {
      data: {
        id: 'data0'
      },
      type: 'bar',
      xField: 'time',
      yField: 'value',
      /** 是否開啟大數(shù)據(jù)渲染模式，開啟后會(huì)降低渲染的精度 */
      large: false,
      /** 開啟大數(shù)據(jù)渲染優(yōu)化的閥值，對應(yīng)的是data的長度;推薦 largeThreshold < progressiveThreshold  */
      largeThreshold: 500,
      /** 分片長度 */
      progressiveStep: 100,
      /** 開啟分片渲染的閥值，對應(yīng)的是單系列data的長度 */
      progressiveThreshold: 1000,
    },
 ...
  ],
};

（完整代碼：https://visactor.bytedance.net/vchart/guide/tutorial_docs/Progressive_Render）

VTable 支持大數(shù)據(jù)量的秒級渲染，能夠快速展示龐大的數(shù)據(jù)內(nèi)容。即使面對百萬級數(shù)據(jù)，VTable 也能提供高效的渲染以及自由的交互體驗(yàn)：

圖片

(體驗(yàn)地址：https://visactor.io/vtable/demo/performance/100W)

DataWind 性能優(yōu)化方案

除了VisActor本身的高性能渲染以外，VisActor還提供了Web Worker和圖表調(diào)度技術(shù)來提升圖表的并行渲染能力，以防止阻塞導(dǎo)致頁面掉幀、卡頓。

VisActor為了充分利用CPU多核性能，支持使用Web Worker進(jìn)行圖表并行渲染，通過Web Worker不但可以充分利用客戶端性能，也可以從根源上避免頁面阻塞。DataWind 在此基礎(chǔ)上封裝了Worker Pool組件，模擬線程池概念，實(shí)現(xiàn)Worker的調(diào)度和復(fù)用。

此外，DataWind 還開發(fā)了圖表調(diào)度器，用于圖表渲染的異步調(diào)度工作，當(dāng)頁面在短時(shí)間內(nèi)同時(shí)進(jìn)入大量的渲染任務(wù)時(shí)，圖表調(diào)度器將會(huì)按照圖表優(yōu)先級以及內(nèi)部策略，依次有序的進(jìn)行渲染工作的調(diào)度與分配，并且會(huì)將重復(fù)的多次無效渲染任務(wù)取消或合并，降低渲染的性能開銷。

友好、絲滑的跨端體驗(yàn)

隨著移動(dòng)設(shè)備的普及，越來越多的用戶需要在移動(dòng)設(shè)備上使用BI產(chǎn)品。移動(dòng)端環(huán)境下的BI產(chǎn)品需要考慮以下因素：

• 響應(yīng)式設(shè)計(jì)：BI產(chǎn)品的界面應(yīng)該具有響應(yīng)式設(shè)計(jì)，以適應(yīng)不同大小的移動(dòng)設(shè)備屏幕。圖表中的各個(gè)元素也需要進(jìn)行自適應(yīng)布局
• 移動(dòng)端適配：BI產(chǎn)品中圖表的渲染、事件等都需要針對移動(dòng)端進(jìn)行專門適配
• 移動(dòng)端優(yōu)化：BI產(chǎn)品的界面和功能應(yīng)該針對移動(dòng)設(shè)備進(jìn)行優(yōu)化。例如，圖表中數(shù)據(jù)的展示形式、各組件的布局方式都需要針對移動(dòng)端進(jìn)行專門優(yōu)化。

DataWind 移動(dòng)端體驗(yàn)

DataWind中的圖表和儀表盤均完美適配了移動(dòng)端場景，隨時(shí)隨地查看數(shù)據(jù)報(bào)表，打破時(shí)間與空間的壁壘。

圖片

實(shí)現(xiàn)揭秘

得益于圖形渲染庫VRender提供的強(qiáng)大跨端渲染能力，VChart圖表支持web、node、h5、小程序等多種場景。在跨端場景中，圖表可能擁有不同的交互響應(yīng)和特性，適配觸摸屏等移動(dòng)設(shè)備的交互方式和事件。

VChart提供了lark-vchart、taro-vchart封裝，使得在不同的跨端場景中使用VChart變得更加方便和簡單。

針對web場景，VChart提供了React-VChart封裝，它提供了一系列易于使用的 React 組件，用于方便的在 React 開發(fā)環(huán)境中創(chuàng)建各種類型的圖表。組件具有高度的可定制性和可擴(kuò)展性，可以通過傳遞不同的參數(shù)和配置來實(shí)現(xiàn)不同的圖表效果，快速創(chuàng)建各種類型的圖表。

無論是在web端、移動(dòng)端還是其它場景中，VChart圖表庫都能夠提供高質(zhì)量的圖表渲染和交互效果，滿足用戶對數(shù)據(jù)可視化的需求。

以飛書小程序（小組件）為例，用戶可以通過VChart 提供的小組件開發(fā)模版，快速將圖表嵌入小組件中：

以下是小程序中的代碼示例:

Page({
  data: {
    canvasId: 'chartId', // canvasId 圖表唯一Id
    events: [], // events 自定義事件
    styles: `
      height: 50vh;
      width: 100%
    `, // 樣式字符
    // 圖表配置項(xiàng)
    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）

總結(jié)

未來，隨著技術(shù)的發(fā)展和用戶需求的不斷增長，BI 產(chǎn)品對可視化的需求在交互、易用性、智能化、敘事特征等方面都會(huì)不斷發(fā)生變化，要求會(huì)越來越高。

VisActor作為一款免費(fèi)開源可視化解決方案，經(jīng)過火山引擎海量真實(shí)用戶場景的驗(yàn)證和打磨。在功能性、美觀性、性能、跨端支持度上都做到了非常好的效果，能夠很好的助力業(yè)務(wù)實(shí)現(xiàn)可視化能力的增強(qiáng)和落地。

DataWind 擁抱開源，與VisActor 緊密合作，互相配合，為開源產(chǎn)品在商業(yè)場景中的落地做了很好的示范。

歡迎交流

我們愿意和數(shù)據(jù)產(chǎn)品相關(guān)產(chǎn)品經(jīng)理、設(shè)計(jì)師、研發(fā)同學(xué)一起做更加深入的探討和交流：

1. 如果你對某一個(gè)方面細(xì)節(jié)的的解決方案感興趣，需要進(jìn)一步交流可以聯(lián)系我們。
2. 如果你愿意分享你的產(chǎn)品、場景和經(jīng)驗(yàn)，可以聯(lián)系我們。
3. 如果你在可視化應(yīng)用過程中有難解的問題，可以聯(lián)系我們一起討論、研究。