# Chart.js ESM 封装层 (@web/chart)

基于 **Chart.js 4.x** 的原生 ESM 封装，专为数据驱动的 UI 架构设计。支持“用户侧零打包”引入，通过 `DataChart` 类实现高性能、响应式的图表渲染。

## 1. 核心设计原则
- **原生 ESM**: 源码与产物均为标准 ESM 格式。
- **数据驱动**: 状态变更时调用 `update(data)`，严禁频繁销毁/重建实例。
- **极致性能**: 自动处理组件生命周期，内置 Chart.js 核心控制器。

## 2. 快速开始

### 2.1 引入方式
推荐通过 `importmap` 或 `loader.js` 引入：

```html
<script type="importmap">
{
  "imports": {
    "@web/chart": "https://cdn.example.com/chart/dist/chart.js"
  }
}
</script>
```

### 2.2 基础用法

```javascript
import { DataChart } from '@web/chart'

const canvas = document.getElementById('myChart')
const chart = new DataChart(canvas, {
  type: 'line',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{
      label: '销售额',
      data: [12, 19, 3, 5]
    }]
  },
  options: {
    responsive: true
  }
})

// 响应式更新数据
chart.update({
  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
  datasets: [{
    label: '销售额',
    data: [15, 25, 10, 8]
  }]
})
```

## 3. API 参考

### `DataChart(canvas: HTMLCanvasElement, config: Object)`
构造函数，初始化图表。
- `config.type`: 图表类型 (`'line'`, `'bar'`, `'pie'`, `'doughnut'`)。
- `config.data`: Chart.js 标准数据格式。
- `config.options`: Chart.js 标准配置。

### `update(data?: Object)`
平滑更新图表。
- `data`: (可选) 新的数据对象。若不传，则强制触发现有数据的重绘。

### `destroy()`
销毁图表实例，释放内存。

## 4. 支持的图表类型
内置集成了以下控制器，无需额外注册：
- Line (折线图)
- Bar (柱状图)
- Pie / Doughnut (饼图/环形图)
- Tooltip & Legend 插件

## 5. 开发与测试
- **测试靶场**: `test/index.html` (支持热更新调试)
- **单元测试**: `npm run test` (基于 Playwright)
- **构建**: `npm run build` (产出 `chart.js` 与 `chart.min.js`)