大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
什么是 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
// react
npm install -P @unovis/ts @unovis/vue
// vue
npm 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 的示例：
<script setup lang="ts">
// 这里进行数据预处理
</script>
在 Angular、Svelte 和 vanilla TypeScript 环境中集成 Unovis 也非常简单，本文不再过多展开，可以参考文末资料。
参考资料
https://github.com/f5/unovis
https://unovis.dev/