Chart 图表

基于 Unovis 的图表组件，涵盖面积 / 柱状 / 折线 / 环图等常规图表，以及漏斗、仪表盘、雷达、迷你图等扩展类型

何时使用

需要在后台展示趋势、对比、占比、转化漏斗、核心指标等数据时。
希望图表自动跟随应用明暗主题与设计 token（--chart-* / --vis-*）时。
需要 Unovis 未内置、但运营分析常用的图表类型（漏斗图 / 仪表盘 / 雷达图 / 迷你图）时。

导入

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartCrosshair,
  ChartLegend,
  ChartLegendContent,
  FunnelChart,
  GaugeChart,
  RadarChart,
  MiniChart,
  componentToString,
} from "@reglow/reui";
import type { ChartConfig } from "@reglow/reui";

图表底层使用 Unovis，使用前需安装 @unovis/vue（npm i @unovis/vue @unovis/ts）。

组件不封装 Unovis：你直接用 VisLine / VisArea / VisGroupedBar / VisStackedBar / VisDonut / VisScatter 等搭建图表，仅在需要时引入 ChartContainer、ChartCrosshair、ChartLegendContent 等增强组件。

快速开始

先用 ChartConfig 声明每个系列的名称与颜色（颜色取自数据色板 var(--chart-N)），再用 Unovis 组件搭建图表。

<script setup lang="ts">
import { VisGroupedBar, VisXYContainer } from "@unovis/vue";
import { ChartContainer } from "@reglow/reui";
import type { ChartConfig } from "@reglow/reui";

const data = [
  { month: "1月", desktop: 186, mobile: 80 },
  { month: "2月", desktop: 305, mobile: 200 },
  { month: "3月", desktop: 237, mobile: 120 },
];
type Datum = (typeof data)[number];

const config = {
  desktop: { label: "桌面端", color: "var(--chart-1)" },
  mobile: { label: "移动端", color: "var(--chart-2)" },
} satisfies ChartConfig;
</script>

<template>
  <ChartContainer :config="config" class="w-full">
    <VisXYContainer :data="data" :height="280">
      <VisGroupedBar
        :x="(d: Datum, i: number) => i"
        :y="[(d: Datum) => d.desktop, (d: Datum) => d.mobile]"
        :color="[config.desktop.color, config.mobile.color]"
        :rounded-corners="4"
      />
    </VisXYContainer>
  </ChartContainer>
</template>

在此基础上按需叠加 VisAxis（坐标轴）、ChartCrosshair（十字准线提示）、ChartLegendContent（图例）等组件，见下方各类型的完整示例。所有示例都已做响应式布局，随容器宽度自适应。

面积图

用 VisArea 展示趋势，配合 VisAxis 坐标轴、ChartCrosshair（悬停十字准线与提示）与 ChartLegendContent 图例。

<script setup lang="ts">
import { VisArea, VisAxis, VisXYContainer } from "@unovis/vue";
import {
  ChartContainer,
  ChartCrosshair,
  ChartLegendContent,
  ChartTooltip,
} from "@reglow/reui";
import type { ChartConfig } from "@reglow/reui";

const data = [
  { month: "1月", desktop: 186, mobile: 80 },
  { month: "2月", desktop: 305, mobile: 200 },
  { month: "3月", desktop: 237, mobile: 120 },
  { month: "4月", desktop: 173, mobile: 190 },
  { month: "5月", desktop: 209, mobile: 130 },
  { month: "6月", desktop: 264, mobile: 140 },
];
type Datum = (typeof data)[number];

const config = {
  desktop: { label: "桌面端", color: "var(--chart-1)" },
  mobile: { label: "移动端", color: "var(--chart-2)" },
} satisfies ChartConfig;
</script>

<template>
  <ChartContainer :config="config" class="w-full">
    <VisXYContainer :data="data" :height="280">
      <VisArea
        :x="(d: Datum, i: number) => i"
        :y="[(d: Datum) => d.desktop, (d: Datum) => d.mobile]"
        :color="[config.desktop.color, config.mobile.color]"
      />
      <VisAxis
        type="x"
        :tick-format="(i: number) => data[Math.round(i)]?.month ?? ''"
      />
      <VisAxis type="y" />
      <ChartTooltip />
      <ChartCrosshair />
    </VisXYContainer>
    <ChartLegendContent class="pt-3" />
  </ChartContainer>
</template>

柱状图

用 VisGroupedBar 做分组柱状对比；换用 VisStackedBar 即为堆叠柱状。bar-padding / group-padding / rounded-corners 可微调柱形外观。

<script setup lang="ts">
import { VisAxis, VisGroupedBar, VisXYContainer } from "@unovis/vue";
import {
  ChartContainer,
  ChartCrosshair,
  ChartLegendContent,
  ChartTooltip,
} from "@reglow/reui";
import type { ChartConfig } from "@reglow/reui";

const data = [
  { month: "1月", desktop: 186, mobile: 80 },
  { month: "2月", desktop: 305, mobile: 200 },
  { month: "3月", desktop: 237, mobile: 120 },
  { month: "4月", desktop: 173, mobile: 190 },
  { month: "5月", desktop: 209, mobile: 130 },
  { month: "6月", desktop: 264, mobile: 140 },
];
type Datum = (typeof data)[number];

const config = {
  desktop: { label: "桌面端", color: "var(--chart-1)" },
  mobile: { label: "移动端", color: "var(--chart-2)" },
} satisfies ChartConfig;
</script>

<template>
  <ChartContainer :config="config" class="w-full">
    <VisXYContainer :data="data" :height="280">
      <VisGroupedBar
        :x="(d: Datum, i: number) => i"
        :y="[(d: Datum) => d.desktop, (d: Datum) => d.mobile]"
        :color="[config.desktop.color, config.mobile.color]"
        :rounded-corners="4"
        :bar-padding="0.1"
        :group-padding="0"
      />
      <VisAxis
        type="x"
        :tick-format="(i: number) => data[Math.round(i)]?.month ?? ''"
      />
      <VisAxis type="y" :tick-format="() => ''" :grid-line="true" />
      <ChartTooltip />
      <ChartCrosshair />
    </VisXYContainer>
    <ChartLegendContent class="pt-3" />
  </ChartContainer>
</template>

折线图

用 VisLine 做折线对比；line-width 控制线宽，VisLine 支持多系列数组。

<script setup lang="ts">
import { VisAxis, VisLine, VisXYContainer } from "@unovis/vue";
import {
  ChartContainer,
  ChartCrosshair,
  ChartLegendContent,
  ChartTooltip,
} from "@reglow/reui";
import type { ChartConfig } from "@reglow/reui";

const data = [
  { month: "1月", desktop: 186, mobile: 80 },
  { month: "2月", desktop: 305, mobile: 200 },
  { month: "3月", desktop: 237, mobile: 120 },
  { month: "4月", desktop: 173, mobile: 190 },
  { month: "5月", desktop: 209, mobile: 130 },
  { month: "6月", desktop: 264, mobile: 140 },
];
type Datum = (typeof data)[number];

const config = {
  desktop: { label: "桌面端", color: "var(--chart-1)" },
  mobile: { label: "移动端", color: "var(--chart-2)" },
} satisfies ChartConfig;
</script>

<template>
  <ChartContainer :config="config" class="w-full">
    <VisXYContainer :data="data" :height="280">
      <VisLine
        :x="(d: Datum, i: number) => i"
        :y="[(d: Datum) => d.desktop, (d: Datum) => d.mobile]"
        :color="[config.desktop.color, config.mobile.color]"
        :line-width="2"
      />
      <VisAxis
        type="x"
        :tick-format="(i: number) => data[Math.round(i)]?.month ?? ''"
      />
      <VisAxis type="y" />
      <ChartTooltip />
      <ChartCrosshair />
    </VisXYContainer>
    <ChartLegendContent class="pt-3" />
  </ChartContainer>
</template>

环图 / 饼图

用 VisDonut（VisSingleContainer 内）做占比图；调小 arc-width 即为饼图，中心可叠加 HTML 覆盖层展示汇总值。

<script setup lang="ts">
import { VisDonut, VisSingleContainer } from "@unovis/vue";
import { ChartContainer, ChartLegendContent } from "@reglow/reui";
import type { ChartConfig } from "@reglow/reui";

const data = [
  { browser: "chrome", visitors: 275, color: "var(--chart-1)" },
  { browser: "safari", visitors: 200, color: "var(--chart-2)" },
  { browser: "firefox", visitors: 187, color: "var(--chart-3)" },
  { browser: "edge", visitors: 173, color: "var(--chart-4)" },
  { browser: "other", visitors: 90, color: "var(--chart-5)" },
];
type Datum = (typeof data)[number];

const config = {
  chrome: { label: "Chrome", color: "var(--chart-1)" },
  safari: { label: "Safari", color: "var(--chart-2)" },
  firefox: { label: "Firefox", color: "var(--chart-3)" },
  edge: { label: "Edge", color: "var(--chart-4)" },
  other: { label: "其他", color: "var(--chart-5)" },
} satisfies ChartConfig;

const total = data.reduce((sum, d) => sum + d.visitors, 0);
</script>

<template>
  <ChartContainer :config="config" class="w-full">
    <div class="flex w-full flex-col items-center gap-6 sm:flex-row sm:justify-center">
      <div class="relative w-full max-w-[240px]">
        <VisSingleContainer :data="data" :height="240">
          <VisDonut
            :value="(d: Datum) => d.visitors"
            :color="(d: Datum) => d.color"
            :arc-width="36"
          />
        </VisSingleContainer>
        <div class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
          <span class="text-2xl font-bold tabular-nums">{{ total.toLocaleString() }}</span>
          <span class="text-xs text-muted-foreground">总访问</span>
        </div>
      </div>
      <ChartLegendContent class="flex-col items-start gap-2 pt-0" />
    </div>
  </ChartContainer>
</template>

提示

ChartCrosshair 缺省使用 ChartTooltipContent 渲染浮层；通过 template + componentToString 可自定义文案（例如隐藏 label、数值千分位）。

十字准线浮层由**容器内的 ChartTooltip（Unovis VisTooltip）**承载：使用 ChartCrosshair 时必须在同一个容器内同时放一个 <ChartTooltip />，否则 hover 不会出现提示浮层。

<script setup lang="ts">
import { VisAxis, VisGroupedBar, VisXYContainer } from "@unovis/vue";
import {
  ChartContainer,
  ChartCrosshair,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
  componentToString,
} from "@reglow/reui";
import type { ChartConfig } from "@reglow/reui";

const data = [
  { month: "1月", desktop: 186, mobile: 80 },
  { month: "2月", desktop: 305, mobile: 200 },
  { month: "3月", desktop: 237, mobile: 120 },
  { month: "4月", desktop: 173, mobile: 190 },
  { month: "5月", desktop: 209, mobile: 130 },
  { month: "6月", desktop: 264, mobile: 140 },
];
type Datum = (typeof data)[number];

const config = {
  desktop: { label: "桌面端", color: "var(--chart-1)" },
  mobile: { label: "移动端", color: "var(--chart-2)" },
} satisfies ChartConfig;

const tooltipTemplate = componentToString(config, ChartTooltipContent, {
  hideLabel: true,
  valueFormatter: (value: number) => value.toLocaleString(),
});
</script>

<template>
  <ChartContainer :config="config" class="w-full">
    <VisXYContainer :data="data" :height="280">
      <VisGroupedBar
        :x="(d: Datum, i: number) => i"
        :y="[(d: Datum) => d.desktop, (d: Datum) => d.mobile]"
        :color="[config.desktop.color, config.mobile.color]"
        :rounded-corners="4"
      />
      <VisAxis
        type="x"
        :tick-format="(i: number) => data[Math.round(i)]?.month ?? ''"
      />
      <VisAxis type="y" />
      <ChartTooltip />
      <ChartCrosshair :template="tooltipTemplate" />
    </VisXYContainer>
    <ChartLegendContent class="pt-3" />
  </ChartContainer>
</template>

运营看板

趋势（面积图 + 十字准线 + 图例）+ 转化漏斗 + 指标仪表盘 + KPI 迷你趋势图，一套组合覆盖运营看板的主要诉求。

<script setup lang="ts">
import { VisArea, VisAxis, VisXYContainer } from "@unovis/vue";
import {
  ChartContainer,
  ChartCrosshair,
  ChartLegendContent,
  ChartTooltip,
  FunnelChart,
  GaugeChart,
  MiniChart,
} from "@reglow/reui";
import type { ChartConfig } from "@reglow/reui";

/** 全年趋势 */
const trend = [
  { m: "1月", pv: 3200, uv: 2100 },
  { m: "2月", pv: 2800, uv: 1900 },
  { m: "3月", pv: 4100, uv: 2700 },
  { m: "4月", pv: 4800, uv: 3200 },
  { m: "5月", pv: 5200, uv: 3600 },
  { m: "6月", pv: 6100, uv: 4100 },
  { m: "7月", pv: 6800, uv: 4600 },
  { m: "8月", pv: 6400, uv: 4300 },
  { m: "9月", pv: 7200, uv: 4900 },
  { m: "10月", pv: 8100, uv: 5400 },
  { m: "11月", pv: 9200, uv: 6100 },
  { m: "12月", pv: 10400, uv: 6900 },
];
type TrendDatum = (typeof trend)[number];

const trendConfig = {
  pv: { label: "访问量", color: "var(--chart-1)" },
  uv: { label: "独立访客", color: "var(--chart-2)" },
} satisfies ChartConfig;

/** 转化漏斗 */
const funnel = [
  { name: "曝光", value: 12000 },
  { name: "点击", value: 6400 },
  { name: "加购", value: 2800 },
  { name: "下单", value: 1200 },
  { name: "支付", value: 860 },
];

/** 核心指标 */
const gauges = [
  { label: "获客完成率", value: 78, color: "var(--chart-1)" },
  { label: "转化率", value: 42, color: "var(--chart-2)" },
  { label: "复购率", value: 68, color: "var(--chart-3)" },
  { label: "履约率", value: 93, color: "var(--chart-4)" },
];

/** KPI + 迷你趋势 */
const kpis = [
  { label: "GMV", value: "¥ 128.6w", delta: "+12.4%", up: true, color: "text-chart-1", spark: [12, 18, 15, 24, 30, 28, 36, 42, 39, 48] },
  { label: "订单量", value: "8,642", delta: "+6.8%", up: true, color: "text-chart-2", spark: [30, 34, 31, 38, 42, 40, 46, 44, 52, 56] },
  { label: "客单价", value: "¥ 148.7", delta: "-2.1%", up: false, color: "text-chart-5", spark: [46, 44, 45, 42, 40, 41, 38, 39, 36, 35] },
  { label: "退款率", value: "1.8%", delta: "-0.4%", up: true, color: "text-chart-4", spark: [26, 24, 25, 22, 21, 19, 20, 18, 17, 16] },
];
</script>

<template>
  <div class="space-y-6">
    <!-- KPI + 迷你图表 -->
    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
      <div v-for="kpi in kpis" :key="kpi.label" class="rounded-lg border p-3">
        <p class="text-xs text-muted-foreground">{{ kpi.label }}</p>
        <div class="mt-1 flex items-end justify-between gap-2">
          <span class="text-lg font-semibold tabular-nums">{{ kpi.value }}</span>
          <span class="text-xs tabular-nums" :class="kpi.up ? 'text-emerald-600' : 'text-destructive'">{{ kpi.delta }}</span>
        </div>
        <MiniChart :data="kpi.spark" type="area" class="mt-2 h-8 w-full" :class="kpi.color" />
      </div>
    </div>

    <!-- 趋势 -->
    <div class="rounded-lg border p-4">
      <p class="mb-2 text-sm font-medium">流量趋势</p>
      <ChartContainer :config="trendConfig" class="w-full">
        <VisXYContainer :data="trend" :height="260">
          <VisArea
            :x="(d: TrendDatum, i: number) => i"
            :y="[(d: TrendDatum) => d.pv, (d: TrendDatum) => d.uv]"
            :color="[trendConfig.pv.color, trendConfig.uv.color]"
          />
          <VisAxis type="x" :tick-format="(i: number) => trend[Math.round(i)]?.m ?? ''" />
          <VisAxis type="y" />
          <ChartTooltip />
          <ChartCrosshair />
        </VisXYContainer>
        <ChartLegendContent class="pt-3" />
      </ChartContainer>
    </div>

    <!-- 漏斗 + 仪表盘 -->
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
      <div class="rounded-lg border p-4">
        <p class="mb-2 text-sm font-medium">转化漏斗</p>
        <FunnelChart :data="funnel" :height="260" :value-formatter="(v: number) => v.toLocaleString()" />
      </div>
      <div class="rounded-lg border p-4">
        <p class="mb-2 text-sm font-medium">核心指标</p>
        <div class="grid grid-cols-2 gap-2">
          <GaugeChart
            v-for="gauge in gauges"
            :key="gauge.label"
            :value="gauge.value"
            :label="gauge.label"
            :color="gauge.color"
            :height="150"
          />
        </div>
      </div>
    </div>
  </div>
</template>

漏斗图

FunnelChart 为 reui 扩展组件（Unovis 未内置）：形状由 SVG 居中梯形绘制，标签用 HTML 覆盖层渲染，保证文字清晰。

<script setup lang="ts">
import { FunnelChart } from "@reglow/reui";

const data = [
  { name: "曝光", value: 12000 },
  { name: "点击", value: 6400 },
  { name: "加购", value: 2800 },
  { name: "下单", value: 1200 },
  { name: "支付", value: 860 },
];
</script>

<template>
  <FunnelChart
    :data="data"
    :height="280"
    :value-formatter="(v: number) => v.toLocaleString()"
  />
</template>

指标仪表盘

GaugeChart 基于 Unovis VisDonut 的 angleRange + showBackground 扩展，默认 270° 弧形仪表。

<template>
  <div class="flex flex-wrap gap-6">
    <GaugeChart :value="72" :max="100" label="完成率" :height="200" />
    <GaugeChart
      :value="26"
      :max="100"
      label="风险值"
      color="var(--destructive)"
      :height="200"
    />
    <GaugeChart
      :value="93"
      :max="100"
      label="履约率"
      color="var(--chart-2)"
      :height="200"
    />
  </div>
</template>

雷达图

RadarChart 为 reui 扩展组件（Unovis 未内置），用于多维度能力/评分对比。

<script setup lang="ts">
import { RadarChart } from "@reglow/reui";

const data = [
  { name: "性能", value: 86 },
  { name: "易用性", value: 72 },
  { name: "稳定性", value: 93 },
  { name: "成本", value: 58 },
  { name: "生态", value: 64 },
  { name: "安全", value: 88 },
];
</script>

<template>
  <RadarChart :data="data" :max="100" :height="300" />
</template>

中国地图

ChinaMap 为 reui 扩展组件（Unovis 未内置），用标准 GeoJSON 绘制省级色阶地图：内置墨卡托投影与等比适配，按数值调整填充深浅，支持悬浮提示、名称标签与值域图例。

边界数据通过 geo-json 传入（示例取自 DataV 全国省级 GeoJSON，已精简为文档站静态资源 public/china-geo.json，可直接替换为自有/合规数据）；行政区数据默认按 adcode 匹配，其次按名称匹配（广东、广东省 均可）。

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ChinaMap } from "@reglow/reui";

const geoJSON = ref(null);
onMounted(async () => {
  geoJSON.value = await (await fetch("/china-geo.json")).json();
});

const data = [
  { name: "广东", value: 1280 },
  { name: "江苏", value: 1150 },
  // …
];

const formatValue = (value: number) => `${value} 万元`;
</script>

<template>
  <ChinaMap
    :data="data"
    :geo-json="geoJSON"
    :height="460"
    show-labels
    :value-formatter="formatValue"
  />
</template>

迷你图表（Sparkline）

MiniChart 用于卡片、表格中的轻量趋势，无坐标轴与交互，颜色取 currentColor，可直接用文字色类控制。

<template>
  <div class="flex flex-col gap-4">
    <MiniChart
      :data="[12, 18, 15, 24, 30, 28, 36, 42, 39, 48]"
      type="area"
      class="h-10 w-40 text-chart-1"
    />
    <MiniChart
      :data="[42, 40, 44, 38, 35, 36, 30, 28, 31, 26]"
      type="line"
      class="h-10 w-40 text-chart-5"
    />
    <MiniChart
      :data="[18, 32, 24, 40, 30, 46, 38, 52]"
      type="bar"
      class="h-10 w-40 text-chart-2"
    />
  </div>
</template>

主题

图表主题完全由 CSS 变量驱动，自动跟随应用明暗主题：

数据色板为 --chart-1 ~ --chart-5（对应 shadcn-vue 的图表调色板），ChartConfig 里用 color: "var(--chart-N)" 引用；
ChartContainer 会把每个系列的颜色注入为 --color-{key}，因此图表里也可写 color="var(--color-desktop)"；
reui 把设计 token 映射到 Unovis 变量（--vis-color*、--vis-axis-*、--vis-tooltip-* 等），明暗切换自动生效。

const config = {
  desktop: {
    label: "桌面端",
    color: "var(--chart-1)",
    // 也可分别指定明暗主题
    theme: { light: "#2563eb", dark: "#60a5fa" },
  },
} satisfies ChartConfig;

如需定制，在任意作用域覆盖 --chart-* / --vis-* 即可，例如：

.my-dashboard {
  --chart-1: oklch(0.65 0.2 250);
  --vis-axis-grid-color: var(--border);
}

API

ChartContainer

参数	说明	类型	默认值
config	图表配置	`ChartConfig`	`{}`
id	容器 id（用于作用域样式）	`string`	自动生成
class	附加类名	`string`	-

ChartTooltip

Unovis VisTooltip 的薄封装，承载 ChartCrosshair 的浮层；需与 ChartCrosshair 一起放在图表容器内。

默认不注入 triggers / 延迟，浮层完全由 ChartCrosshair 驱动，因此鼠标在图表内移动时会持续显示（不会因为移到柱子/面积之间的空隙而隐藏）。 triggers、showDelay、hideDelay、allowHover 等 Unovis Tooltip 配置均可直接透传（例如 donut/pie 需要按扇区 hover 时显式传 triggers）。

ChartCrosshair

Unovis VisCrosshair 的封装，用于 XY 图表十字准线提示。需放在 VisXYContainer 内。

参数	说明	类型	默认值
config	图表配置	`ChartConfig`	容器注入值
template	自定义提示模板	`(...args) => HTMLElement \| string`	`ChartTooltipContent`
labelKey	label 字段	`string`	`date`
nameKey	name 字段	`string`	-
hideLabel	隐藏 label	`boolean`	`false`
hideIndicator	隐藏指示器	`boolean`	`false`

ChartTooltipContent

参数	说明	类型	默认值
config	图表配置	`ChartConfig`	-
payload	当前数据项	`object`	-
indicator	指示器样式	`dot \| line \| dashed`	`dot`
labelFormatter	自定义 label 文案	`(payload) => string`	-
valueFormatter	自定义值文案	`(value, key) => string`	-

ChartLegend

图例容器（居中排列），内容缺省使用 ChartLegendContent。

参数	说明	类型	默认值
config	图表配置	`ChartConfig`	容器注入值
hideIcon	隐藏图标	`boolean`	`false`
indicator	指示器样式	`dot \| line \| dashed`	`dot`

ChartLegendContent

参数	说明	类型	默认值
config	图表配置	`ChartConfig`	容器注入值
hideIcon	隐藏图标	`boolean`	`false`
indicator	指示器样式	`dot \| line \| dashed`	`dot`

ChartStyle

把 ChartConfig 的颜色注入为 --color-{key} 变量的样式组件（ChartContainer 内部已使用，一般无需手动引入）。

参数	说明	类型	默认值
id	容器 id	`string`	-
config	图表配置	`ChartConfig`	-

FunnelChart

参数	说明	类型	默认值
data	数据（按层顺序）	`FunnelDatum[]`	-
nameKey	名称字段	`string`	`name`
valueKey	数值字段	`string`	`value`
gap	段间距（% 高度）	`number`	`1`
showLabel	展示名称	`boolean`	`true`
showValue	展示数值	`boolean`	`true`
valueFormatter	数值格式化	`(value, datum) => string`	-
height	高度	`number \| string`	`280`

GaugeChart

参数	说明	类型	默认值
value	当前值	`number`	-
max	量程上限	`number`	`100`
label	中心副标题	`string`	-
color	进度色	`string`	`var(--primary)`
trackColor	轨道色	`string`	`var(--muted)`
arcWidth	弧宽	`number`	`14`
angleRange	角度范围（弧度）	`[number, number]`	270° 仪表
valueFormatter	数值格式化	`(value) => string`	百分比
height	高度	`number \| string`	`220`

RadarChart

参数	说明	类型	默认值
data	数据	`RadarDatum[]`	-
max	量程上限	`number`	数据最大值
levels	网格环数	`number`	`4`
color	主色	`string`	`var(--primary)`
fillOpacity	填充透明度	`number`	`0.25`
showLabels	展示轴标签	`boolean`	`true`
height	高度	`number \| string`	`280`

MiniChart

参数	说明	类型	默认值
data	数据点	`number[]`	-
type	类型	`line \| area \| bar`	`line`
color	颜色	`string`	`currentColor`
strokeWidth	线宽	`number`	`1.5`
showLastDot	显示末点圆点	`boolean`	`false`
width	视口宽度	`number`	`120`
height	视口高度	`number`	`36`

ChinaMap

参数	说明	类型	默认值
data	行政区数据（按 `adcode` 优先匹配）	`ChinaMapDatum[]`	-
geoJson	边界数据（标准 GeoJSON FeatureCollection）	`object`	-
nameKey	名称字段	`string`	`name`
adcodeKey	行政区划代码字段	`string`	`adcode`
valueKey	数值字段	`string`	`value`
color	数据主色（按数值调整透明度）	`string`	`var(--chart-1)`
emptyColor	无数据区域颜色	`string`	`var(--muted)`
valueFormatter	数值格式化	`(value, name) => string`	千分位
showLabels	展示名称标签	`boolean`	`false`
showLegend	展示值域图例	`boolean`	`true`
height	高度	`number \| string`	`480`

工具函数

导出	说明
`componentToString`	将组件转成 Unovis tooltip / crosshair 可用模板
`generateChartStyle`	由 config 生成 `--color-*` 变量 CSS
`getChartColor`	取某个系列颜色（`config` → `--color-{key}`）
`getColorVarMap`	生成 `key -> 颜色` 映射
`getPayloadConfigFromPayload`	从 payload 解析配置项

Carousel 轮播图

Chat 聊天

AI 聊天界面组件集合：消息列表、输入框、思考过程、工具调用等。