# Charts Library ESM

一个基于 Angular 18+ 的图表库模块，提供多种类型的图表组件，功能性和美观性与 ECharts 类似。

## 功能特性

- **饼图组件**（5种样式）：
  - 基础饼图
  - 南丁格尔玫瑰图
  - 环形图
  - 渐变色饼图
  - 标签饼图

- **条形图组件**（5种样式）：
  - 基础条形图
  - 堆叠条形图
  - 渐变色条形图
  - 圆角条形图
  - 混合条形图

- **柱形图组件**（5种样式）：
  - 基础柱形图
  - 堆叠柱形图
  - 渐变色柱形图
  - 圆角柱形图
  - 混合柱形图

- **K线图组件**（5种样式）：
  - 基础K线图
  - K线图+均线
  - K线图+成交量
  - K线图+刷选
  - 动态K线图

## 安装

```bash
npm install
```

## 使用方法

### 在 Angular 项目中使用

1. 导入所需的图表组件：

```typescript
import { 
  PieChartBasicComponent,
  BarChartBasicComponent,
  ColumnChartBasicComponent,
  CandlestickChartBasicComponent
} from './lib';
```

2. 在组件中使用：

```html
<lib-pie-chart-basic [data]="pieData" [width]="600" [height]="400"></lib-pie-chart-basic>
<lib-bar-chart-basic [data]="barData" [width]="600" [height]="400"></lib-bar-chart-basic>
<lib-column-chart-basic [data]="columnData" [width]="600" [height]="400"></lib-column-chart-basic>
<lib-candlestick-chart-basic [data]="candlestickData" [width]="600" [height]="400"></lib-candlestick-chart-basic>
```

### 数据格式

#### 饼图数据格式
```typescript
const pieData = [
  { value: 1048, name: '搜索引擎' },
  { value: 735, name: '直接访问' },
  { value: 580, name: '邮件营销' }
];
```

#### 条形图/柱形图数据格式
```typescript
const barData = [
  { name: '周一', value: 120 },
  { name: '周二', value: 200 },
  { name: '周三', value: 150 }
];
```

#### K线图数据格式
```typescript
const candlestickData = [
  ['2023-01-01', 2320.26, 2320.26, 2287.3, 2362.94],
  ['2023-01-02', 2300, 2291.3, 2288.26, 2308.38],
  ['2023-01-03', 2295.35, 2346.5, 2295.35, 2346.92]
];
```

## 开发服务器

运行开发服务器：

```bash
npm start
```

访问 `http://localhost:4200/` 查看示例。

## 构建

构建生产版本：

```bash
npm run build
```

## 技术栈

- Angular 18+
- ECharts 5.5.0
- TypeScript 5.4.0
- SCSS

## 项目结构

```
charts-library-esm/
├── src/
│   ├── app/                    # 应用程序组件
│   ├── lib/                    # 图表库模块
│   │   ├── base-chart.component.ts
│   │   ├── pie-chart.ts
│   │   ├── bar-chart.ts
│   │   ├── column-chart.ts
│   │   ├── candlestick-chart.ts
│   │   ├── charts-library.module.ts
│   │   └── index.ts
│   ├── index.html
│   ├── main.ts
│   └── styles.scss
├── package.json
├── tsconfig.json
└── angular.json
```

## 特性

- 基于 ECharts，提供丰富的图表类型和配置选项
- 响应式设计，支持自适应布局
- 支持自定义数据、尺寸和样式
- 提供多种预设样式，开箱即用
- 完全使用 Angular Standalone Components
- 支持 ESM 模块化

## 许可证

ISC