@classic-homes/charts-反应
为经典主题设计系统反应ECharts组件. 图表取出经典的光和暗的主题 @classic-homes/charts-core。 。 。 .
安装
npm install @classic-homes/charts-react echarts react react-dom
同伴依赖性 : echarts@^5.5.0, (中文(简体) ), react@^18 || ^19, (中文(简体) ), react-dom@^18 || ^19。 。 。 .
快速启动
import { LineChart } from '@classic-homes/charts-react';
const data = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
series: [
{ name: '2024', data: [120, 132, 101, 134, 90, 230] },
{ name: '2025', data: [220, 182, 191, 234, 290, 330] },
],
};
export function RevenueChart() {
return <LineChart data={data} />;
}
出口
- 核心图表数字 :
LineChart, (中文(简体) ),BarChart, (中文(简体) ),PieChart, (中文(简体) ),AreaChart, (中文(简体) ),ScatterChart, (中文(简体) ),DonutChart - 扩展图表数字 :
RadarChart, (中文(简体) ),FunnelChart, (中文(简体) ),GaugeChart, (中文(简体) ),HeatmapChart, (中文(简体) ),TreemapChart, (中文(简体) ),CandlestickChart, (中文(简体) ),SankeyChart - 基本构成部分数字 :
ChartContainer, (中文(简体) ),ChartSkeleton, (中文(简体) ),ChartError, (中文(简体) ),ChartEmpty, (中文(简体) ),ChartLegend - 钩子数字 :
useChart, (中文(简体) ),useChartTheme, (中文(简体) ),useChartResize, (中文(简体) ),useReducedMotion, (中文(简体) ),registerClassicThemes, (中文(简体) ),useChartLegend - 公用事业数字 :
cn - 类型: 组件道具(
LineChartComponentProps, 以及从@classic-homes/charts-core
图表数据和选项类型来自 @classic-homes/charts-core/types。 。 。 .
import type { LineChartData } from '@classic-homes/charts-core/types';