# 酷炫图表组件 (Chart Widget)
一个功能丰富的图表组件，基于 ECharts 5.x 构建，支持多种图表类型和丰富的配置选项。

### 特别说明
- 这是通过 Cursor 生成的一个自定义组件示例

## 功能特性

### 📊 支持的图表类型
- **折线图** - 适合展示趋势数据
- **柱状图** - 适合对比数据
- **饼图** - 适合展示占比数据
- **散点图** - 适合展示相关性数据
- **雷达图** - 适合多维度数据对比
- **仪表盘** - 适合展示单一指标
- **漏斗图** - 适合展示转化流程
- **桑基图** - 适合展示流向关系

### 🎨 样式特性
- 现代化渐变背景设计
- 毛玻璃效果
- 响应式布局
- 深色主题支持
- 悬停动画效果
- 专业配色方案

### ⚙️ 配置选项
- 图表类型切换
- 标题和副标题设置
- 尺寸自定义
- 颜色主题配置
- 图例、提示框、网格等显示控制
- 数据缩放功能
- 动画效果配置
- 交互行为设置

### 📝 数据配置
- 支持 JSON AMIS 表单配置
- 多种数据源类型（模拟数据、API接口、静态数据）
- 不同类型图表的专用数据配置
- 实时数据更新支持

## 使用方法

### 基础用法

```tsx
import ChartWidget from './components/chart-widget';

<ChartWidget
  chartType="line"
  title="销售趋势"
  subtitle="2025年数据"
  width={800}
  height={400}
  mockData={{
    xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
    series: [{
      name: '销售额',
      data: [120, 200, 150, 80, 70, 110]
    }]
  }}
/>
```

### 配置选项

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| chartType | string | 'line' | 图表类型 |
| title | string | '图表标题' | 主标题 |
| subtitle | string | '' | 副标题 |
| width | number | 800 | 图表宽度 |
| height | number | 400 | 图表高度 |
| theme | string | 'default' | 主题风格 |
| showLegend | boolean | true | 是否显示图例 |
| showTooltip | boolean | true | 是否显示提示框 |
| showDataZoom | boolean | false | 是否显示数据缩放 |
| showGrid | boolean | true | 是否显示网格 |
| backgroundColor | string | 'transparent' | 背景颜色 |
| textColor | string | '#333' | 文字颜色 |
| mockData | object | {} | 模拟数据 |
| dataConfig | object | {} | 数据配置 |

### 数据格式

#### 折线图/柱状图数据
```javascript
{
  xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
  series: [{
    name: '销售额',
    data: [120, 200, 150, 80, 70, 110]
  }]
}
```

#### 饼图数据
```javascript
{
  series: [{
    data: [
      { value: 1048, name: '搜索引擎' },
      { value: 735, name: '直接访问' },
      { value: 580, name: '邮件营销' }
    ]
  }]
}
```

#### 散点图数据
```javascript
{
  series: [{
    data: [
      [161.2, 51.6], [167.5, 59.0], [159.5, 49.2]
    ]
  }]
}
```

#### 雷达图数据
```javascript
{
  indicator: [
    { name: '销售', max: 6500 },
    { name: '管理', max: 16000 }
  ],
  series: [{
    value: [4200, 3000],
    name: '预算分配'
  }]
}
```

## 主题配置

组件支持多种主题风格：
- `default` - 默认主题
- `dark` - 深色主题
- `light` - 明亮主题
- `business` - 商务主题

## 响应式设计

组件自动适配不同屏幕尺寸，在移动端和桌面端都有良好的显示效果。

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 技术栈

- React 16.9+
- TypeScript
- ECharts 5.4+
- SCSS

## 开发说明

### 安装依赖
```bash
npm install
```

### 预览组件
```bash
npm run preview --cmpType=chart-widget
```

### 构建发布
```bash
npm run publish2oss
```

## 更新日志

### v1.0.0
- 初始版本发布
- 支持8种图表类型
- 完整的配置选项
- 响应式设计
- 现代化UI设计