项目概述

Evil Charts 是由 Axiom 设计工程师 Gurbinder 开发的现代化开源 React 图表组件库，专为搭配 shadcn/ui 与 Tailwind CSS 设计。针对传统图表库粗糙生硬、千篇一律且缺乏生动动效的痛点，Evil Charts 采用“双引擎同一 API”架构，兼顾 Recharts（DOM/SVG 细粒度控制）与 Apache ECharts（Canvas 高并发海量数据渲染），并深度结合 Motion 弹性物理动画，让开发者只需复制粘贴代码即可在项目中交付令人眼前一亮的电影级数据可视化图表。

核心特性

⚡️ Recharts & ECharts 双引擎同构：每个图表均提供 Recharts 与 Apache ECharts 两套底层实现，共享完全相同的 Compound 组件 API 与配置格式，切换渲染引擎无需重构业务代码。
🎨 前沿动效与光影视觉：内置精致的渐变光晕（Glows）、平滑揭示动画（Reveal Animations）与暗黑模式自适应主题，无需编写复杂配置即可告别丑陋的默认图表。
📦 shadcn/ui 纯净所有权模式：遵循 Copy & Paste 代码范式，使用官方 CLI 即可将单文件 TSX 组件直接装入项目，100% 拥有源码控制权。
📊 丰富图表品类全覆盖：提供面积图（Area）、条形图（Bar）、曲线图（Line）、雷达图（Radar）、径向进度图（Radial）及复杂桑基图（Sankey）等全品类图表。

快速上手与示例代码

# 通过 shadcn CLI 安装 Recharts 版本的发光面积图
npx shadcn@latest add @evilcharts/recharts-area-chart

# 或安装适用于高频海量数据的 Apache ECharts 版本
npx shadcn@latest add @evilcharts/echarts-area-chart

import React from 'react';
import { EvilAreaChart } from '@/components/charts/recharts-area-chart';

const chartData = [
  { month: 'Jan', revenue: 186, profit: 80 },
  { month: 'Feb', revenue: 305, profit: 200 },
  { month: 'Mar', revenue: 237, profit: 120 },
  { month: 'Apr', revenue: 373, profit: 290 },
];

const chartConfig = {
  revenue: { label: '月营收', color: 'hsl(var(--primary))' },
  profit: { label: '净利润', color: 'hsl(var(--chart-2))' },
};

export function FinancialOverview() {
  return (
    <div className="p-6 rounded-2xl border bg-card">
      <h3 className="text-base font-semibold mb-4">企业财务走势图</h3>
      <EvilAreaChart data={chartData} config={chartConfig} />
    </div>
  );
}

技术选型建议与适用场景

非常适合：SaaS 数据分析后台、金融与财务仪表盘、高质感产品落地页（Landing Page）数据展示，以及对图表动效和暗黑模式有极致追求的技术团队。
与同类方案对比：相比于原生配置极其繁重晦涩的 Apache ECharts，或动画生硬粗糙的传统图表封装，Evil Charts 将顶级现代审美与 shadcn 模式完美结合，小数据量用 Recharts 兼顾样式，大数据量无缝切 ECharts 保证 60fps 性能。

Evil Charts

项目概述

核心特性

快速上手与示例代码

技术选型建议与适用场景

讨论与评价

相关组件推荐

23rd

Duolingo UI (ShadLingo)

Rewamp UI