图表

Alpha

功能强大的可视化工具，允许用户使用各种类型的图表来表示数据，以进行有效的分析。

图表组件构建在Unovis（一个模块化数据可视化框架）之上，并受tremor启发。

图表类型 ​

面积图

折线图

柱状图

环形图

安装 ​

更新 css ​

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

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);
    /* change to any hsl value you want */
    --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 传递到每个图表中。

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

自定义工具提示 ​

如果要自定义图表的 Tooltip，可以传递 customTooltip 道具，并使用自定义的 Vue 组件。自定义组件将接收 title 和 data 道具，查看ChartTooltip.vue 组件 示例。

预期的道具定义如下

ts
defineProps<{
  title?: string
  data: {
    name: string
    color: string
    value: any
  }[]
}>()
在 GitHub 上编辑此页面