React/Vue/Angular/Svelte可视化框架 Unovis 火了

大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 Unovis

Modular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript

Unovis 是一个适用于 React、Angular、Svelte、Vue 和 vanilla TypeScript 或 JavaScript 的模块化数据可视化框架，具有以下突出特征：

支持图表、地图、网络图等等

Tree-shakable 并支持单个组件导入以减少包大小

高度可定制，得益于 CSS 变量支持

使用 Typescript 构建，开箱即用

目前 Unovis 在 Github 开源，有超过 2k 的 star，是一个值得关注的前端开源项目。

如何使用 Unovis

Unovis 在 NPM 上有多个软件包，每个软件包都适用于特定的 UI 框架，包括：React、Angular、Svelte 或 Vue 等。 核心包 @unovis/ts 可以在没有 UI 框架的情况下使用，如果使用 UI 框架，则需要安装 @unovis/ts 以及框架特定的包：

npm install -P @unovis/ts @unovis/react// reactnpm install -P @unovis/ts @unovis/vue// vuenpm install -P @unovis/ts @unovis/// 其他

大多数 Unovis 组件都需要容器来进行渲染。有两种类型的容器可用：

XY 容器：设计用于管理多个 XY 组件，例如 Line、GroupedBar、Scatter 等以及可选的轴、工具提示和十字准线

单个容器：仅适用于单个组件，例如 Graph、Sankey 或 TopoJSONMap，还支持工具提示。

有些组件是独立的，不需要容器，比如：LeafletMap、LeafletFlowMap 和图例等。

下面是 React 中使用 Unovis 的示例：

import React, {useCallback} from 'react'import {VisXYContainer, VisAxis, VisArea, VisXYLabels} from '@unovis/react'import {data, formats, DataRecord, getLabels} from './data'export default function StackedArea : JSX.Element { const labels = getLabels(data) return ( <> d.year, [])} y={formats.map(g => useCallback((d: DataRecord) => d[g], []))}/> labels[d.year] ? d.year : undefined, [])} y={useCallback((d: DataRecord) => labels[d.year]?.value, [])} label={useCallback((d: DataRecord) => labels[d.year]?.label, [])} backgroundColor={useCallback((d: DataRecord) => labels[d.year]?.color ?? 'none', [])} clusterBackgroundColor="none" clusterLabel={ => ''} /> )}

下面是 Vue 框架中使用 Unovis 的示例：

在 Angular、Svelte 和 vanilla TypeScript 环境中集成 Unovis 也非常简单，本文不再过多展开，可以参考文末资料。

参考资料