vue-data-ui-skilld

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

graphieros/vue-data-ui

vue-data-ui

graphieros/vue-data-ui

vue-data-ui

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

Version: 3.15.11 (Mar 2026) Tags: beta: 2.15.6-beta.3 (Jul 2025), next: 3.1.19-next.1 (Sep 2025), latest: 3.15.11 (Mar 2026)

References: Docs — API reference, guides

一款赋能用户的Vue 3数据可视化组件库，助力生动的数据叙事

版本： 3.15.11（2026年3月） 标签版本： beta: 2.15.6-beta.3（2025年7月）, next: 3.1.19-next.1（2025年9月）, latest: 3.15.11（2026年3月）

参考文档： 文档 — API参考、使用指南

API Changes

API变更

This section documents version-specific API changes for

vue-data-ui

v3.15.2 — prioritize recent v3.x releases.

NEW:
```
useCursorPointer
```
(opt-in) — default changed to
```
false
```
in v3.15.0; must be set to
```
true
```
in
```
userOptions
```
to enable pointer cursor on clickable elements source
NEW:
```
altCopy
```
action button — added to context menu in v3.15.0; exposes
```
dataset
```
and
```
config
```
in a callback to generate custom alt text source
NEW:
```
minimap
```
styling —
```
handleType
```
('grab', 'chevron', etc.),
```
handleWidth
```
, and
```
additionalHeight
```
added in v3.15.0 to customize zoom minimap handles source
NEW:
```
dashIndices
```
in
```
VueUiXy
```
— new dataset property in v3.15.0 allows displaying specific datapoints as dashed segments to indicate estimated data source
BREAKING:
```
locales
```
files removed — as of v3.14.3, individual locale files are removed in favor of
```
Intl
```
for computing time labels source
NEW:
```
isPrintingImg
```
and
```
isPrintingSvg
```
— booleans now exposed in the
```
#svg
```
slot since v3.14.10 to control content during print/export source
NEW:
```
zoomStart
```
,
```
zoomEnd
```
, and
```
zoomReset
```
— new emits added to
```
VueUiXy
```
in v3.14.9 to track zoom component interactions source
NEW:
```
selectAllToggle
```
in Legend — opt-in feature added in v3.13.0; displays a checkbox to select/unselect all series when more than 2 series exist source
NEW:
```
skeletonConfig
```
customization —
```
VueUiSparkline
```
now allows passing custom
```
skeletonConfig
```
and
```
skeletonDataset
```
in v3.13.7 source
NEW:
```
oklch
```
color support — added in v3.13.6, allowing the use of OKLCH color space across all components source
NEW:
```
side
```
in
```
zoom.customFormat
```
— the handle side ('left' | 'right') is now exposed in the zoom formatting callback since v3.13.5 source
NEW:
```
zoom.maxWidth
```
— added to multiple charts in v3.13.4 to control the maximum width of the zoom component source
NEW:
```
pulse
```
in
```
VueUiSparkline
```
— optional animated pulse effect with trail added to line mode in v3.13.3 source
NEW:
```
Annotator
```
modes — straight line and arrow modes added to the built-in annotator in v3.12.0 source

Also changed:

scaleMin

scaleMax

on minimap v3.11.1 ·

pulse

trail refinement v3.15.2 ·

zoom.startIndex

endIndex

support v2.4.42 ·

useCanvas

option (experimental) ·

Annotator

pixel labels v3.14.5 ·

dashIndices

in minimap v3.14.8

本节记录了

vue-data-ui

v3.15.2版本的特定API变更，请优先关注最新的v3.x版本更新。

新增：
```
useCursorPointer
```
（可选启用）——在v3.15.0版本中默认值改为
```
false
```
；需在
```
userOptions
```
中设置为
```
true
```
，才能为可点击元素启用指针光标 source
新增：
```
altCopy
```
操作按钮——在v3.15.0版本中添加到右键菜单；在回调中暴露
```
dataset
```
和
```
config
```
，用于生成自定义替代文本 source
新增：
```
minimap
```
样式定制——v3.15.0版本新增
```
handleType
```
（'grab'、'chevron'等）、
```
handleWidth
```
和
```
additionalHeight
```
，用于自定义缩放小地图的手柄样式 source
新增：
```
VueUiXy
```
中的
```
dashIndices
```
——v3.15.0版本新增的数据集属性，允许将特定数据点显示为虚线线段，以表示估算数据 source
破坏性变更：移除
```
locales
```
文件——从v3.14.3版本开始，移除了独立的语言环境文件，改用
```
Intl
```
来计算时间标签 source
新增：
```
isPrintingImg
```
和
```
isPrintingSvg
```
——从v3.14.10版本开始，在
```
#svg
```
插槽中暴露这两个布尔值，用于控制打印/导出期间的内容显示 source
新增：
```
zoomStart
```
、
```
zoomEnd
```
和
```
zoomReset
```
——v3.14.9版本为
```
VueUiXy
```
新增了这些事件，用于跟踪缩放组件的交互 source
新增：图例中的
```
selectAllToggle
```
——v3.13.0版本新增的可选功能；当系列数量超过2个时，显示一个复选框来全选/取消全选所有系列 source
新增：
```
skeletonConfig
```
定制——v3.13.7版本中
```
VueUiSparkline
```
现在允许传入自定义的
```
skeletonConfig
```
和
```
skeletonDataset
```
source
新增：
```
oklch
```
颜色支持——v3.13.6版本新增，允许在所有组件中使用OKLCH颜色空间 source
新增：
```
zoom.customFormat
```
中的
```
side
```
——从v3.13.5版本开始，在缩放格式化回调中暴露手柄的侧边（'left' | 'right'） source
新增：
```
zoom.maxWidth
```
——v3.13.4版本为多个图表新增了该属性，用于控制缩放组件的最大宽度 source
新增：
```
VueUiSparkline
```
中的
```
pulse
```
——v3.13.3版本为线条模式新增了可选的动画脉冲效果及轨迹 source
新增：
```
Annotator
```
模式——v3.12.0版本为内置注释工具添加了直线和箭头模式 source

其他变更： 小地图上的

scaleMin

scaleMax

（v3.11.1）·

pulse

轨迹优化（v3.15.2）· 支持

zoom.startIndex

endIndex

（v2.4.42）·

useCanvas

选项（实验性）·

Annotator

像素标签（v3.14.5）· 小地图中的

dashIndices

（v3.14.8）

Best Practices

最佳实践

Use
```
VueUiXyCanvas
```
for large datasets (1000+ points) with frequent updates (e.g., 100ms) to avoid browser performance bottlenecks from managing thousands of SVG DOM nodes source
Enable
```
responsive: true
```
specifically for
```
VueUiXy
```
and
```
VueUiDonut
```
when placing them in flexible containers, ensuring they correctly fill parent height (set
```
height: 100%
```
on parent) source
Programmatically control series visibility using the exposed
```
showSeries(name)
```
and
```
hideSeries(name)
```
methods instead of manipulating the dataset or triggering legend events source
Opt-in to the cursor pointer for clickable chart elements via
```
userOptions.useCursorPointer: true
```
, as it is disabled by default for better accessibility compliance source
Implement custom alt text for charts by enabling
```
userOptions.buttons.altCopy: true
```
and providing a tailored string through the
```
userOptions.callbacks.altCopy
```
callback source
Configure PDF export orientation and scaling directly in
```
userOptions.print
```
to handle different chart aspect ratios without requiring manual JsPDF wiring source
Signal estimated or projected data in
```
VueUiXy
```
by passing
```
dashIndices
```
in the dataset to render specific line segments as dashed source
Prevent label overlapping in dense charts by setting
```
hideLabelsUnderValue
```
(in Donut) or
```
hideUnderProportion
```
(in Treemap) to suppress labels for small segments source
Reverse the y-axis (e.g., for ranking) by providing negative values in the dataset and using absolute value
```
formatters
```
for grid labels and tooltips source

// Reversed y-axis via negative values and absolute formatting
const config = {
  chart: {
    grid: { labels: { yAxis: { formatter: ({ value }) => Math.abs(value) } } }
  }
}

Fine-tune the responsive behavior of table-based charts (like
```
VueUiCarouselTable
```
) by adjusting
```
responsiveBreakpoint
```
to control exactly when the layout switches for mobile source

对于包含1000+数据点且需要频繁更新（如100ms一次）的大型数据集，使用
```
VueUiXyCanvas
```
，避免因管理数千个SVG DOM节点导致浏览器性能瓶颈 source
当将
```
VueUiXy
```
和
```
VueUiDonut
```
放置在弹性容器中时，需专门启用
```
responsive: true
```
，并确保父容器设置
```
height: 100%
```
，以保证它们能正确填充父容器高度 source
使用暴露的
```
showSeries(name)
```
和
```
hideSeries(name)
```
方法以编程方式控制系列的可见性，而非操作数据集或触发图例事件 source
通过设置
```
userOptions.useCursorPointer: true
```
为可点击的图表元素启用指针光标，因为默认情况下该功能是禁用的，以更好地符合无障碍访问规范 source
通过启用
```
userOptions.buttons.altCopy: true
```
并在
```
userOptions.callbacks.altCopy
```
回调中提供定制字符串，为图表实现自定义替代文本 source
在
```
userOptions.print
```
中直接配置PDF导出的方向和缩放比例，以适配不同的图表宽高比，无需手动编写JsPDF代码 source
在
```
VueUiXy
```
中通过在数据集里传入
```
dashIndices
```
，将特定线段渲染为虚线，以此标记估算或预测数据 source
在密集图表中，通过设置
```
hideLabelsUnderValue
```
（适用于Donut图表）或
```
hideUnderProportion
```
（适用于Treemap图表）来隐藏小分段的标签，避免标签重叠 source
若要反转Y轴（如用于排名场景），可在数据集中传入负值，并为网格标签和提示框使用绝对值格式化器
```
formatters
```
source

// Reversed y-axis via negative values and absolute formatting
const config = {
  chart: {
    grid: { labels: { yAxis: { formatter: ({ value }) => Math.abs(value) } } }
  }
}

通过调整
```
responsiveBreakpoint
```
来微调基于表格的图表（如
```
VueUiCarouselTable
```
）的响应式行为，精确控制布局何时切换为移动端适配模式 source