大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
什么是 UnovisModular 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，是一个值得关注的前端开源项目。
如何使用 UnovisUnovis 在 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/<angular|svelte>// 其他大多数 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 ( <> <VisXYContainer data={data} height={'50vh'}> <VisArea x={useCallback((d: DataRecord) => d.year, [])} y={formats.map(g => useCallback((d: DataRecord) => d[g], []))}/> <VisAxis type='x' label='Year' numTicks={10} gridLine={false} domainLine={false}/> <VisAxis type='y' label='Revenue (USD, billions)' numTicks={10}/> <VisXYLabels x={useCallback((d: DataRecord) => 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={() => ''} /> </VisXYContainer> </> )}下面是 Vue 框架中使用 Unovis 的示例：
<script setup lang="ts">// 这里进行数据预处理</script><template> <VisXYContainer :data="data" :height="500"> <VisXYLabels v-bind="labelProps" clusterBackgroundColor="none" :clusterLabel="() =>''" /> <VisArea :x="x" :y="y" /> <VisAxis type='x' label='Year' :numTicks="10" :gridLine="false" :domainLine="false" /> <VisAxis type='y' label='Revenue (USD, billions)' :numTicks="10" /> </VisXYContainer></template>在 Angular、Svelte 和 vanilla TypeScript 环境中集成 Unovis 也非常简单，本文不再过多展开，可以参考文末资料。
参考资料https://github.com/f5/unovis
https://unovis.dev/
