石頭智能洗地機A10 Plus體驗：雙向自清潔治好了我的懶癌
一、前言和介紹專為家庭請假懶人而生的石頭科技在近日又帶來了自己的全新旗艦新品，石頭智能洗地機A10 Plus。從這個產品名上就不難看出，這次石頭推出的并不是常見的掃地機器
BI是商業智能(Business Intelligence)的縮寫，是一種將企業中現有的數據進行有效的整合的平臺，它可以幫助企業、組織和個人更好地了解其業務狀況、發現問題，并進行決策。BI產品普遍采用可視化的方式，可以幫助用戶更直觀、更高效、更智能地分析和呈現數據，從而提升數據驅動的決策能力，快速準確地提供報表并提供決策依據。
DataWind 是一款支持千億級別數據自助分析的一站式數據分析與協作平臺。可打通從數據接入、數據整合、查詢分析到全員協同共享的全流程，以數據門戶、數字大屏、管理駕駛艙等可視化形態，助力業務用戶實現智能洞察，讓數據發揮價值。
本文聚焦 DataWind 產品的核心可視化能力，并為您揭秘其實現原理。
圖表是 BI 產品中最常用的數據可視化工具之一。通過圖表，用戶可以更直觀地了解數據的趨勢、關系和分布。常見的圖表類型包括折線圖、柱狀圖、餅圖、散點圖等等。不同的圖表類型適用于不同的數據類型和分析目的。例如，折線圖可以展示時間序列數據的趨勢，柱狀圖可以比較不同類別的數據，餅圖可以顯示數據的占比等等，選擇適合的圖表類型對于用戶理解數據非常重要。
在DataWind產品中，為用戶提供了豐富的圖表類型供用戶使用，其中包括柱狀圖、條形圖、折線圖、面積圖、雙軸圖、餅圖、環形圖、玫瑰圖、散點圖、填充地圖、散點地圖、詞云圖、直方圖、雷達圖、漏斗圖、指標卡、儀表圖、進度圖、瀑布圖等，以及關系圖表類型桑基圖。
DataWind比較具有特色的是組合圖表與透視圖表。
組合圖表可以將多個笛卡爾坐標系下的圖表并列展示，方便用戶對相同維度下的不同指標進行對比觀察，組合圖不但提供基礎圖表的組合，還提供了與雙軸圖得組合。
而透視圖表是用來觀察一個整體的數據在多個維度下的切分的結果，反映在圖表上就是具有樹狀結構的圖表展示。用戶可以通過引入細分的維度，觀察數據在不同分面中的特征和趨勢，從而從更細粒度上了解數據中包含的信息。
圖片
（組合圖表及透視圖表）
在DataWind中，除了基礎了二維表格渲染以外，還為用戶在單元格內提供條件格式的功能，包括渲染圖標集、色階、數據圖等場景，以及將單元格渲染為圖片、視頻、鏈接、迷你圖表等需求。并且支持在表頭上進行排序、固定列、字段配置等功能菜單。
圖片
DataWind支持了透視表格的制作，透視表將數據按照列維度、行維度進行匯總計算和展現。通過簡單地配置列維度、行維度和指標，即可展示出透視表。與表格相比，透視表將維度區分成了行與列，在多維度情況下更利于表格呈現。并且同時支持了條件格式、內容渲染等二維表支持的特色功能。
圖片
此外DataWind還為用戶提供了趨勢分析表的功能，趨勢分析表可以支持查看核心指標按不同日期粒度聚合的數據，并可以對單個指標進一步的作對比、看趨勢、求均值。
圖片
DataWind提供了Gis 地圖來支持LBS需求，其中包括熱力地圖、散點地圖、飛線地圖、柱狀地圖等。
DataWind中豐富的可視化展現形式得益于開源可視化解決方案 VisActor，DataWind 重度使用了圖表組件VChart 和 多維表格組件庫 VTable。
同時DataWind 研發團隊與 VisActor 團隊深度合作，參與開源建設，使得一些個性化需求可以得到快速滿足。
VChart(https://www.visactor.io/vchart) 幾乎覆蓋了所有常見的統計圖表類型，并且提供了豐富的擴展接口。這使得 DataWind 在根據用戶反饋擴充圖表類型，增強圖表能力變得非常容易。
（VChart Gallery：https://www.visactor.io/vchart/example）
表格方面，VTable組件則完全承載了業務的需求，通過Canvas對表格進行高性能渲染。實現二維表、透視表、透視圖的能力以外，還支持了自定義單元格渲染，單元格渲染迷你圖，樹形展示、透視分析等高階功能。
圖片
（在線體驗：https://www.visactor.io/vtable/example）
而組合圖表與透視圖表的實現，則是結合了VChart與VTable各自的優勢特性合并而來，得益于VisActor統一的底層渲染實現，可以容易的使用VTable的布局能力，嵌套VChart的圖表渲染能力實現組合圖表與透視圖表。
通過在VTable上注冊VChart圖表組件，利用VTable的透視表布局能力，將VChart圖表組件渲染到單元格內，VTable則負責維護圖表實例以及事件更新。
圖片
例如上面展示的透視圖表完整實現：https://codesandbox.io/s/pivotchart-with-vtable-p8d6f6
代碼結構如下：
圖片
從代碼中我們可以看到通過行列的定義和數據配置，可以表達數據的透視結構，同時在統計圖表中使用的軸、圖例、標注等組件可以完美的融合在表格中，極大增強了表格的可視化擴展能力。
由于BI 系統的復雜性，以及需要通用圖表和表格能力之外的定制化可視化能力，DataWind 在VisActor的擴展機制基礎上，做了一層面向BI系統的可視化封裝。架構設計如下：
圖片
通過以上封裝，可以快速實現BI系統或類BI的指標報表平臺。
在DataWind產品中，面對不同的業務對象，往往采用的圖表設計也不盡相同。一個好的圖表應該具有清晰的結構、易于閱讀的標簽和軸線、合適的顏色和字體等等，并且要適配當前業務的特點。
DataWind 支持在多個層面上靈活配置圖表風格。
在圖表層面，支持一鍵替換圖表的數據色板：
圖片
在儀表盤層面，則支持為儀表盤整體設置統一的主題樣式。
圖片
DataWind的圖表主題設計遵循以下原則：
VisActor提供豐富的圖表樣式配置。不僅限于配色主題的自定義，更有文字自適應、布局排版、動畫配置等高定制內容，以適應DataWind產品中復雜的可視化需求。
下面以 VChart 的主題色板功能為例進行介紹。在對數據進行可視化的過程中，顏色是極為關鍵的元素。如何為圖表選擇合適的色彩，以突顯數據的特征并搭配得體，是數據可視化中的一門藝術。VChart 為用戶提供了強大且靈活的色板功能，能滿足各種應用場景下的色彩需求。
VChart 支持的色板分為兩大類：
其中，數據色板允許同時存在多套色板方案，具體應用哪個色板需要靠具體的條件（如數據類別的個數）來判斷。因此 VChart 可以很輕松地實現靈活的設計需求：
圖片
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）
除了設計好的圖表外，圖表的交互性也非常重要。通過圖表的交互功能，用戶可以更深入地了解數據，進行更復雜的分析和探索。
當用戶將鼠標懸停在圖表上時，可以顯示數據的詳細信息和標簽。即觸發圖表提示信息（Tooltip）。DataWind支持用戶對Tooltip進行富文本渲染，甚至支持了tooltip內渲染圖表的能力。
圖片
用戶可以通過縮放和平移圖表來查看更詳細的數據。
圖片
用戶可以選擇特定的數據點或區域，并對數據進行過濾和篩選。
圖片
VisActor中的大量組件都允許業務進行交互行為的定義，例如圖元的點擊、框選、懸停；數軸的縮放、選中；提示信息的展示、自定義；圖例的選中、取消等。
通過VisActor提供的圖表事件，DataWind實現了圖表的探索式分析。例如上卷下鉆、圖表標注、參考預警等功能。
圖片
DataWind中交互功能大部分基于 VisActor 提供的各種自定義擴展能力，下面舉例說明。
VisActor 內置支持的Tooltip功能有一定的自定義能力，同時還支持完全自定義渲染tooltip。DataWind便是利用了該能力進行tooltip高級定制。
通過VisActor提供的詳細全面的交互事件，DataWind得以基于這些事件開發對應的數據探索式分析流程。
// 注冊事件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參數鎖定發生交互的組件，通過event明確交互事件的類型。根據以上接口即可獲得用戶在圖表上進行的具體交互行為。詳細設置參考VisActor事件介紹：https://visactor.io/vchart/api/API/event。
圖片
以下演示了托管鼠標 hover 事件繪制自定義 tooltip 的能力，通過向圖表內注冊Tooltip觸發的事件，即可接收到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中需要將用戶對行為解析為具體的業務行為，例如點擊圖元發生的具體行為可能包括：圖表聯動、上卷下鉆、維度下鉆、圖表標注、跳轉等許多功能，通過提取事件內部的具體參數以及制定多個事件間的優先級，即可設定事件的觸發規則。
此外有些業務行為是多個行為的疊加組合而來，例如：圖表下鉆行為，需要在交互事件觸發時同時進行圖表維度的更換和范圍的篩選兩步行為即可實現。
因此，復雜的業務行為可以通過多個基礎事件的組合與疊加實現，這樣不但可以使交互邏輯清晰，也可以降低持續的維護成本。
DataWind 可以借助儀表盤進行靈活的可視化敘事。在單個圖表中，DataWind 的敘事重點主要是數據標注。通過數據標注，可以大大降低用戶閱讀圖表、報告或者儀表盤的成本，快速獲取洞察含義。
圖片
VisActor 的強大敘事能力為其提供了支撐。例如在圖表中添加自定義數據標注：
圖片
核心代碼如下：
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也可以通過動態圖表和動畫等功能進行獨立敘事。例如用帶有自動播放進度條的圖表表示數據隨時間遷移：
圖片
（完整示例：https://www.visactor.io/vchart/demo/storytelling/timeline-scatter)
以及和 VRender 結合，呈現更復雜的圖表敘事效果：
圖片
(完整示例：https://www.visactor.io)
智能化是BI產品的發展趨勢。當圖表中的字段確定后，選擇合適的圖表類型對數據進行展示，對于快速獲取數據中的洞察信息具有十分重要的意義。DataWind中的圖表推薦包括圖表類型的推薦和圖表字段的推薦。前者能夠根據當前選擇的維度和指標字段，推薦最適合進行數據展示的圖表類型；后者能夠在用戶切換圖表類型時，自動將數據字段分配到合適的視覺通道上，極大地增強用戶進行探索式分析的能力，輕松制作可視化報表。
圖片
DataWind 圖表推薦演示
@VisActor/VChart提供從數據到展現的全流程解決方案，以“可視化敘事”及“智能化”為核心競爭力。大語言模型強大的生成能力為VChart提供了一個自然語言的交互接口，允許用戶通過自然語言直接調用VChart的各項能力，簡單、快速、高質量地完成圖表生成與編輯。
@VisActor/VMind是基于VChart和大語言模型的圖表智能模塊，提供圖表智能推薦、智能配色、對話式圖表編輯等能力，能夠極大地降低VChart的使用門檻，提高用戶創作數據可視化作品的效率。
圖片
VMind中的圖表智能推薦功能能夠基于數據特性和用戶意圖，完成字段篩選、圖表類型推薦、視覺通道映射、圖表配色，從無到有生成數據圖表。
圖片
調用VMind 組件代碼示例如下：
import VMind from '@visactor/VMind'const vmind = new VMind(openAIKey) //傳入openAI keyconst data=`品牌名稱,市場份額,平均價格,凈利潤Apple,0.5,7068,314531Samsung,0.2,6059,362345Vivo,0.05,3406,234512Nokia,0.01,1064,-1345Xiaomi,0.1,4087,131345`const describe="展示各品牌市場占有率，森林風格"http://傳入csv格式的數據和圖表描述，返回圖表spec和圖表動畫時長const { spec, time } = await vmind.generateChart(data, describe); //調用VChart進行渲染const vchart = new VChart(spec, { dom: CONTAINER_ID });vchart.renderAsync();得益于可視化渲染引擎 VRender 的優越性能以及多種優化策略， VChart 與 VTable 提供了卓越的渲染性能以及流暢的交互體驗。
VChart 提供了 LTTB 的降采樣方案，通過較少數據量的數據點保持了原始數據的視覺特性，從而降低渲染的計算負擔。
除此之外，VChart 還支持漸進式渲染以避免大量圖形的繪制導致的頁面卡頓。通過渲染任務拆分，VChart 將創建好的圖形元素放置在多個幀內執行渲染，從而避免過長的同步計算任務阻塞住頁面邏輯，使得圖表呈現流暢自如。VChart 支持在任意圖表中開啟漸進式渲染配置，以下圖為例：
圖片
該示例核心代碼如下：
const spec = { type: 'common', data: [... ], series: [ { data: { id: 'data0' }, type: 'bar', xField: 'time', yField: 'value', /** 是否開啟大數據渲染模式，開啟后會降低渲染的精度 */ large: false, /** 開啟大數據渲染優化的閥值，對應的是data的長度;推薦 largeThreshold < progressiveThreshold */ largeThreshold: 500, /** 分片長度 */ progressiveStep: 100, /** 開啟分片渲染的閥值，對應的是單系列data的長度 */ progressiveThreshold: 1000, }, ... ],};（完整代碼：https://visactor.bytedance/vchart/guide/tutorial_docs/Progressive_Render）
VTable 支持大數據量的秒級渲染，能夠快速展示龐大的數據內容。即使面對百萬級數據，VTable 也能提供高效的渲染以及自由的交互體驗：
圖片
(體驗地址：https://visactor.io/vtable/demo/performance/100W)
除了VisActor本身的高性能渲染以外，VisActor還提供了Web Worker和圖表調度技術來提升圖表的并行渲染能力，以防止阻塞導致頁面掉幀、卡頓。
VisActor為了充分利用CPU多核性能，支持使用Web Worker進行圖表并行渲染，通過Web Worker不但可以充分利用客戶端性能，也可以從根源上避免頁面阻塞。DataWind 在此基礎上封裝了Worker Pool組件，模擬線程池概念，實現Worker的調度和復用。
此外，DataWind 還開發了圖表調度器，用于圖表渲染的異步調度工作，當頁面在短時間內同時進入大量的渲染任務時，圖表調度器將會按照圖表優先級以及內部策略，依次有序的進行渲染工作的調度與分配，并且會將重復的多次無效渲染任務取消或合并，降低渲染的性能開銷。
隨著移動設備的普及，越來越多的用戶需要在移動設備上使用BI產品。移動端環境下的BI產品需要考慮以下因素：
DataWind中的圖表和儀表盤均完美適配了移動端場景，隨時隨地查看數據報表，打破時間與空間的壁壘。
圖片
得益于圖形渲染庫VRender提供的強大跨端渲染能力，VChart圖表支持web、node、h5、小程序等多種場景。在跨端場景中，圖表可能擁有不同的交互響應和特性，適配觸摸屏等移動設備的交互方式和事件。
VChart提供了lark-vchart、taro-vchart封裝，使得在不同的跨端場景中使用VChart變得更加方便和簡單。
針對web場景，VChart提供了React-VChart封裝，它提供了一系列易于使用的 React 組件，用于方便的在 React 開發環境中創建各種類型的圖表。組件具有高度的可定制性和可擴展性，可以通過傳遞不同的參數和配置來實現不同的圖表效果，快速創建各種類型的圖表。
無論是在web端、移動端還是其它場景中，VChart圖表庫都能夠提供高質量的圖表渲染和交互效果，滿足用戶對數據可視化的需求。
以飛書小程序（小組件）為例，用戶可以通過VChart 提供的小組件開發模版，快速將圖表嵌入小組件中：
以下是小程序中的代碼示例:
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）
未來，隨著技術的發展和用戶需求的不斷增長，BI 產品對可視化的需求在交互、易用性、智能化、敘事特征等方面都會不斷發生變化，要求會越來越高。
VisActor作為一款免費開源可視化解決方案，經過火山引擎海量真實用戶場景的驗證和打磨。在功能性、美觀性、性能、跨端支持度上都做到了非常好的效果，能夠很好的助力業務實現可視化能力的增強和落地。
DataWind 擁抱開源，與VisActor 緊密合作，互相配合，為開源產品在商業場景中的落地做了很好的示范。
我們愿意和數據產品相關產品經理、設計師、研發同學一起做更加深入的探討和交流：
本文鏈接：http://www.tebozhan.com/showinfo-26-10442-0.html火山引擎 DataWind 產品可視化能力揭秘
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號