图片
（组合图表及透视图表）
在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内渲染图表的能力。
图片
用户可以通过缩放和平移图表来查看更详细的数据。
图片
以下演示了托管鼠标 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(); }});效果如下：
图片
核心代码如下：
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也可以通过动态图表和动画等功能进行独立叙事。例如用带有自动播放进度条的图表表示数据随时间迁移：
图片
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="展示各品牌市场占有率，森林风格"//传入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 支持在任意图表中开启渐进式渲染配置，以下图为例：
图片
得益于图形渲染库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.28at.com/showinfo-26-10442-0.html火山引擎 DataWind 产品可视化能力揭秘
声明：本网页内容旨在传播知识，不代表本站观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。