React Metric Chart Plugin

一个灵活且可定制的 React 指标图表插件，直接支持 ECharts 配置和统计数据展示。

特性

• 🚀 开箱即用的图表组件
• 📊 直接支持 ECharts 配置选项
• 📈 内置统计数据表格
• 🎨 可定制的样式和主题
• 📱 响应式设计
• 🔍 内置数据过滤和搜索
• 🧪 完整的 TypeScript 支持
• 📋 支持数据导出功能

安装

npm install react-metric-chart-plugin
# 或
yarn add react-metric-chart-plugin

快速开始

import React from 'react';
import { MetricChartPlugin } from 'react-metric-chart-plugin';
import type { MetricStats } from 'react-metric-chart-plugin';

function App() {
  // ECharts 配置选项
  const chartOptions = {
    title: {
      text: '系统监控',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'time'
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'CPU使用率',
        type: 'line',
        data: [
          [new Date('2024-01-01 10:00:00').getTime(), 45.2],
          [new Date('2024-01-01 10:01:00').getTime(), 52.1],
          // 更多数据点...
        ],
        itemStyle: { color: '#1890ff' }
      }
    ]
  };

  // 统计数据
  const statsData: MetricStats[] = [
    {
      name: 'CPU使用率',
      current: 52.1,
      maximum: 65.3,
      minimum: 32.8,
      average: 48.7,
      color: '#1890ff'
    }
  ];

  return (
    <MetricChartPlugin
      chartOptions={chartOptions}
      statsData={statsData}
      title="系统监控"
      height={400}
      showTable={true}
      onRefresh={() => console.log('刷新数据')}
    />
  );
}

API 文档

MetricChartPluginProps

属性	类型	默认值	说明
chartOptions	any	-	ECharts 配置选项对象
statsData	MetricStats[]	[]	统计数据数组
title	string	'指标图表'	图表标题
height	number	400	图表高度
showControls	boolean	true	是否显示控制栏
showTable	boolean	true	是否显示数据表格
usePagination	boolean	true	表格是否使用分页
maxHeight	number	600	不使用分页时表格最大高度
onRefresh	() => void	-	刷新回调函数
onExport	(data: MetricStats[]) => void	-	导出回调函数

MetricStats

属性	类型	说明
name	string	指标名称
current	number	当前值
maximum	number	最大值
minimum	number	最小值
average	number	平均值
color	string	颜色（用于图表和表格）

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 运行测试
npm test

# 构建
npm run build

许可证

MIT