SuperAPI AI 工具集

unovis-ts-skilld

前端与建站

查看项目

更新于 10-16 06:14

技能介绍

用途:在原生 TypeScript/JavaScript 中用 @unovis/ts 构建图表、网络图、时间线和地图。包版本 1.7.0,Apache-2.0,仅 ES 模块,渲染 SVG,地图可搭配 Leaflet/MapLibre。

安装:npm install -P @unovis/ts。TypeScript 需在 compilerOptions 启用 allowSyntheticDefaultImports;若 tsconfig.json 显式列出 types,需加入 "topojson-client"。样式由 @emotion/css 在运行时注入,无 CSS 文件可导入,严格 CSP 站点需查阅官方 CSP 指南。

主要能力:三个构建块——容器持有 DOM 元素、数据、尺寸和渲染;组件由配置构造、不持有数据。XYContainer 支持多个 XY 组件与 xAxis、yAxis、tooltip、crosshair、annotations;SingleContainer 只放一个组件,如 Graph、Sankey、TopoJSONMap、Donut、Treemap。LeafletMap、LeafletFlowMap 和图例为独立组件。数据记录泛型,通过访问器(值或函数)读取。

使用方式:组件单独导入可 tree-shaking。数据在容器上,配置在组件上,需通过容器的 setData、updateContainer、updateComponents、update 更新,不要直接改 config;SingleContainer 用 updateComponent。批处理时可传 preventRender: true。销毁时调用 chart.destroy()。宽高支持像素或 CSS 单位但不支持 %,百分比请用容器 DOM 的 CSS 设置;sizing 可选 Sizing.Fit(默认)、Extend、FitWidth。tooltip 和 crosshair 放在容器配置中。事件用组件静态 selectors 声明,attributes 可作 E2E 稳定钩子。地图可使用内置 TopoJSON。

限制:面向浏览器,Node 环境需 DOM shim(官方测试用 Vitest 与 jsdom)。颜色访问器返回 null 时回退到容器调色板。容器 duration 覆盖组件 duration。

官方文档:https://unovis.dev/docs/intro,组件参考 https://unovis.dev/docs/components/<Name>,图库 https://unovis.dev/gallery。