SuperAPI AI 工具集

unovis-vue-skilld

前端与建站

查看项目

更新于 10-16 00:21

技能介绍

用途:@unovis/vue 为 Unovis 模块化数据可视化框架提供 Vue 3 包装组件,每个 Vis* 组件对应一个 @unovis/ts 核心类,用于在 Vue 3 中构建图表。

安装与版本:需同时安装 @unovis/ts 与 @unovis/vue,且版本必须完全一致,命令为 npm install -P @unovis/ts @unovis/vue。@unovis/ts 的 peer 依赖锁定为精确 1.7.0,vue 为 ^3。包为 ESM,无 CSS 导入,样式由 JS 运行时注入。

主要能力:提供两类容器 VisXYContainer(XY 图表)与 VisSingleContainer(单图加可选 tooltip)。XY 组件含 VisArea、VisLine、VisScatter、VisStackedBar、VisGroupedBar、VisBoxplot、VisTimeline、VisXYLabels;辅助组件含 VisAxis、VisCrosshair、VisTooltip、VisBrush、VisFreeBrush、VisPlotband、VisPlotline、VisAnnotations;单容器组件含 VisDonut、VisNestedDonut、VisRadialBar、VisHeatmap、VisTreemap、VisSankey、VisChordDiagram、VisGraph、VisTopoJSONMap;独立组件含 VisBulletLegend、VisFlowLegend、VisRollingPinLegend、VisLeafletMap、VisLeafletFlowMap。

使用方式:props 与核心配置接口一一对应,脚本用 camelCase、模板用 kebab-case;访问器以函数形式作为 prop 传入;data 可放在容器或组件上,容器数据与所有子组件共享,子组件仅在容器无数据时回退到自身数据。配置变更调用 setConfig 后 render,数据变更调用 setData,均原地更新不重挂载。每个包装组件通过 defineExpose 暴露 component(核心实例引用),可用模板 ref 调用核心方法。各模块还导出 selectors,配合 events 与 tooltip 触发器使用。容器通过 provide/inject 收集子组件,子组件放入默认插槽。图例与地图为独立组件,需放在容器外。

限制与注意:@unovis/ts 与 @unovis/vue 版本必须精确一致,否则 peer 解析失败。VisCrosshair、VisTimeline、VisBoxplot 仅声明 data 为 Vue prop,其他配置以属性传递。轴标签被裁剪时可增大容器 margin。Nuxt/SSR 下核心自 1.6.4 起支持 SSR,若出现 hydration 或 document 错误可用 <ClientOnly> 包裹;Node 20+ 无头渲染需使用单独的 @unovis/ssr 包。严格 CSP 需在导入库前设置 window.UNOVIS_NONCE。暗色主题在 body 添加 theme-dark 类。文档见 https://unovis.dev/docs/intro。