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

什么是 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/<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/