vue-data-ui：一个包装了 69 个 Vue 数据可视化组件，配置驱动 + 9 套主题
vue-data-ui 是一个 Vue 数据可视化组件库，定位是「让使用者自己掌控的数据叙事」——组件通过 config 和 dataset 两个 prop 驱动，颜色、主题、导出、tooltip、slot 都在配置层解决。仓库 stars 约 2.45k，语言 Vue。
- GitHub：https://github.com/graphieros/vue-data-ui
- 文档站：https://vue-data-ui.graphieros.com/
- 文档仓库：https://github.com/graphieros/vue-data-ui-doc
- Nuxt boilerplate：https://github.com/graphieros/vue-data-ui-nuxt
组件清单
一共 69 个组件，按用途分了 9 类。
Charts（常规图表，40 个）：VueUiAgePyramid、VueUiBump、VueUiCandlestick、VueUiChestnut、VueUiChord、VueUiCirclePack、VueUiDag、VueUiDonutEvolution、VueUiDonut、VueUiDumbbell、VueUiFlow、VueUiFunnel、VueUiGalaxy、VueUiGauge、VueUiHeatmap、VueUiHistoryPlot、VueUiHorizontalBar、VueUiMolecule、VueUiMoodRadar、VueUiNestedDonuts、VueUiOnion、VueUiParallelCoordinatePlot、VueUiQuadrant、VueUiQuickChart、VueUiRadar、VueUiRelationCircle、VueUiRidgeline、VueUiRings、VueUiScatter、VueUiStackbar、VueUiStackline、VueUiStripPlot、VueUiThermometer、VueUiTiremarks、VueUiTreemap、VueUiWaffle、VueUiWheel、VueUiWordCloud、VueUiXyCanvas、VueUiXy
Mini charts（迷你图，8 个）：VueUiSparkHistogram、VueUiSparkbar、VueUiSparkgauge、VueUiSparkline、VueUiSparkStackbar、VueUiSparkTrend、VueUiGizmo、VueUiBullet
3d：VueUi3dBar
Tables：VueUiTableHeatmap、VueUiTableSparkline、VueUiTable、VueUiCarouselTable
Rating：VueUiRating、VueUiSmiley
Maps：VueUiGeo、VueUiWorld
Productivity：VueUiHill
Utilities：VueUiAccordion、VueUiAnnotator、VueUiCursor、VueUiDashboard、VueUiDigits、VueUiIcon、VueUiKpi、VueUiMiniLoader、VueUiSkeleton、VueUiTimer
安装与引入
npm i vue-data-ui
全局注册：
import { createApp } from 'vue';
import App from './App.vue';
import 'vue-data-ui/style.css';
import { VueUiRadar } from 'vue-data-ui';
const app = createApp(App);
app.component('VueUiRadar', VueUiRadar);
app.mount('#app');
按需引入：
import { VueUiRadar, VueUiXy } from "vue-data-ui";
不要把 style.css 漏掉，否则组件的默认样式不会生效。
通用组件 VueDataUi
如果不想逐个 import 图表组件，可以用统一入口 VueDataUi，通过 component 指定要渲染的组件名：
例外是 Arrow、VueUiIcon、VueUiPattern，这三个不支持走通用组件，仍需单独 import。
TypeScript
类型定义在包内的 types 目录下，文件为 vue-data-ui.d.ts。
v2 到 v3 迁移
v3 没有破坏性变更，升级不用改 API。但部分图表的 padding 配置有调整，直接沿用 v2 的 config 可能出现 padding 过大的情况，需要重新核一下内边距。
v3 新增的能力：
config.loading：默认false，可手动切换加载态，显示与图表同布局的骨架屏；dataset为undefined时也会自动触发。config.debug：默认false，开发期在控制台输出警告。- 智能 label 缩放与自动旋转。
- 更多图表支持响应式尺寸。
- config 支持事件回调。
Nuxt
官方提供了 boilerplate 仓库（见文首链接），可以直接作为 Nuxt 项目的起点。
自定义 tooltip 与数据格式化
tooltip 内容可以通过 customFormat 自行拼 HTML：
customFormat: ({ seriesIndex, datapoint, series, config }) => `...
`
数值格式化用 formatter 配置项，v2.3.29 起所有图表都支持：
formatter: ({ value, config }) => `formatted ${value}`
Slots
#svg：大多数图表支持，用来往图里插入自定义 SVG，例如用foreignObject放说明文字。#legend：v2.0.41 起提供，除部分图表外都支持。用这个 slot 时建议在 config 里把 show legend 设为false，先隐藏默认图例。#tooltip、#tooltip-before、#tooltip-after。#watermark：回调带isPrinting布尔值，可在导出 PDF/图片时显示水印。#reset-action：VueUiXy、VueUiQuickChart 等图表可用，需要先在 config 里打开zoom.useResetSlot。
图例还有个批量切换开关：legend.selectAllToggle，当 series 数量大于 2 时显示「隐藏/显示全部系列」按钮。
配置兜底
想拿到某个组件的默认配置作为基准，用 getVueDataUiConfig：
import { getVueDataUiConfig } from 'vue-data-ui';
const defaultConfigXy = getVueDataUiConfig('vue_ui_xy');
主题
v2.2.9 起内置 9 种主题：default、dark、zen、hack、concrete、celebration、celebrationNight、minimal、minimalDark。通过 config.theme 指定。注意 dataset 里带的颜色会覆盖主题色。
需要微调主题时，把参数传给 getVueDataUiConfig 生成一份自定义主题，再用 mergeConfigs 合并：
const customTheme = getVueDataUiConfig('vue_ui_xy', {
colorBackground: '#1A1A1A',
colorTextPrimary: '#CD9077',
colorTextSecondary: '#825848',
colorGrid: '#CD9077',
colorBorder: '#CD9077'
});
mergeConfigs({ defaultConfig: customTheme, userConfig: { /* ... */ } });
适合与不适合
适合：Vue 3 项目里需要一次性凑齐多种非常规图表（和弦图、山脊图、词云、象限图、环形嵌套等），并且希望颜色、tooltip、导出、水印这些横切能力统一由 config 控制的场景；仪表盘、报表页、需要打印或导出图片的数据叙事页面。配合通用组件 VueDataUi 和 9 套主题，做成主题可切换的看板成本不高；配置兜底和 config.debug 对排查样式问题也有帮助。
不适合：只需要一条折线或一个柱状图、且对打包体积敏感的页面——为了单个图引入整套库并不划算；也不适合非 Vue 技术栈。另外从 v2 升级虽然无破坏性变更，但 padding 需要逐个图表对照检查，图表数量多时会有一轮视觉回归的工作量。