旧版：该组件将迁移至扩展仓库以支持 Tailwind v4。

---

仅适用于 Vue >3.3

Charts 组件基于 Unovis（一个模块化数据可视化框架）构建，并受到 tremor 的启发。

图表类型

面积图

折线图

柱状图

环形图

安装

更新 css

将以下工具提示样式添加到您的 tailwind.css 文件中：

@layer base {
  :root {
    /* ... */
    --vis-tooltip-background-color: none !important;
    --vis-tooltip-border-color: none !important;
    --vis-tooltip-text-color: none !important;
    --vis-tooltip-shadow-color: none !important;
    --vis-tooltip-backdrop-filter: none !important;
    --vis-tooltip-padding: none !important;

    --vis-primary-color: var(--primary);
    /* 可更改为任意所需的 hsl 值 */
    --vis-secondary-color: 160 81% 40%;
    --vis-text-color: var(--muted-foreground);
  }
}

如果您没有为组件使用 css-variables，则需要将 --vis-primary-color 和 --vis-text-color 更新为您所需的 hsl 值。

您可以使用此工具来帮助您找到主色和文本色的 hsl 值。请确保同时提供 dark 模式的样式。

颜色

默认情况下，我们使用主主题色和辅助色（--vis-secondary-color）并调整不同透明度来构建图表。

但您始终可以将所需的 color 传递给每个图表。

<template>
  <AreaChart
    :data="data"
    :colors="['blue', 'pink', 'orange', 'red']"
  />
</template>

自定义工具提示

如果您想自定义图表的 Tooltip，可以传递 customTooltip 属性并提供一个自定义 Vue 组件。 该自定义组件将接收 title 和 data 属性，请查看 ChartTooltip.vue 组件作为示例。

预期的属性定义为：

defineProps<{
  title?: string
  data: {
    name: string
    color: string
    value: any
  }[]
}>()