tremor

<br /> <br /> <p align="center"> <a href="https://tremor.so"> <picture> <source media="(prefers-color-scheme: dark)" srcset="images/tremor-logo-dark.svg"> <source media="(prefers-color-scheme: light)" srcset="images/tremor-logo-light.svg"> <img alt="Tremor 标志" src="https://yellow-cdn.veclightyear.com/835a84d5/2b80c282-55ed-4644-8482-fa0ccd91daff.svg" height="50"/> </picture> </a> </p> <div align="center"> <br /> <br /> <div align="center"> <a href="https://www.npmjs.com/package/@tremor/react"> <img alt="npm" src="https://img.shields.io/npm/dm/@tremor/react?color=3b82f6&label=npm&logo=npm&labelColor=334155"> </a> <a href="https://tremor.so/docs/getting-started/introduction"> <img alt="阅读文档" src="https://img.shields.io/badge/文档-blue?style=flat&logo=readthedocs&color=3b82f6&labelColor=334155&logoColor=f5f5f5" height="20" width="auto"> </a> <a href="https://github.com/tremorlabs/tremor/blob/main/License"> <img alt="Apache 2.0 许可证" src="https://yellow-cdn.veclightyear.com/835a84d5/26c16160-20f1-4904-9aac-2d310a3bd217.svg?style=flat&color=3b82f6&labelColor=334155 " height="20" width="auto"> </a> <a href="https://join.slack.com/t/tremor-community/shared_invite/zt-21ug6czv6-RckDPEAR6GdYOqfMGKOWpQ"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/8dfb9e19-29bb-4847-82e6-191857f38500.svg?color=4A154B&label=Slack&logo=slack&labelColor=334155&logoColor=f5f5f5" alt="加入 Slack" /> </a> <a href="https://twitter.com/intent/follow?screen_name=tremorlabs"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/ecba7097-d381-45d9-8193-a9a06c8d7ee5.svg?color=000000&label=@tremorlabs&logo=X&labelColor=334155&logoColor=f5f5f5" alt="关注 Tremorlabs" /> </a> </div> <h3 align="center"> <a href="https://www.tremor.so/docs/getting-started/installation">文档</a> • <a href="https://www.tremor.so">网站</a> </h3> <br /> <h1>用于构建图表和仪表板的 React 组件</h1> </div>

Tremor 是基于 Tailwind CSS 构建的 20 多个开源组件，旨在简化数据可视化。完全开源，由数据科学家和软件工程师制作，具有出色的设计感。

<br />

Tremor 横幅

<br />

入门指南

查看我们的安装指南。要使用该库，我们还需要在项目中设置 Tailwind CSS。

示例

使用 Tremor 创建分析界面很容易。

"use client";
import { AreaChart, Card } from "@tremor/react";

const chartdata = [
  {
    date: "1月23日",
    "路线请求": 289,
    "站点请求": 233,
  },
  // ...
  {
    date: "10月23日",
    "路线请求": 283,
    "站点请求": 247,
  },
];

export default function Example() {
  return (
    <Card className="max-w-4xl">
      <span className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
        总请求
      </span>
      <p className="text-tremor-metric font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">
        6,568
      </p>
      <AreaChart
        className="mt-2 h-80"
        data={chartdata}
        index="date"
        categories={["路线请求", "站点请求"]}
        colors={["indigo", "rose"]}
        yAxisWidth={33}
      />
    </Card>
  );
}