# 组件文档

## 图表组件

### BaseEChart
基础图表组件，作为其他图表组件的基础组件。

#### 属性
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| options | ECharts 配置项 | Object | - |
| width | 图表宽度 | String | '100%' |
| height | 图表高度 | String | '350px' |
| theme | 图表主题 | String | '' |

#### 方法
| 方法名 | 说明 | 参数 |
|--------|------|------|
| getChart | 获取 ECharts 实例 | - |
| resize | 重置图表大小 | - |

### LineChart
折线图组件

#### 属性
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| data | 数据数组 | Array | - |
| xAxis | X轴数据 | Array | - |
| smooth | 是否平滑曲线 | Boolean | true |
| area | 是否显示面积 | Boolean | false |
| series | 系列配置 | Array | [] |
| title | 图表标题 | String | '' |

#### 使用示例
```vue
<line-chart
  :data="[150, 230, 224, 218, 135, 147, 260]"
  :xAxis="['周一', '周二', '周三', '周四', '周五', '周六', '周日']"
  :smooth="true"
  :area="true"
  title="销售趋势"
/>
```

### BarChart
柱状图组件

#### 属性
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| data | 数据数组 | Array | - |
| xAxis | X轴数据 | Array | - |
| showBackground | 是否显示背景 | Boolean | true |
| series | 系列配置 | Array | [] |
| title | 图表标题 | String | '' |
| barWidth | 柱子宽度 | Number | 30 |

#### 使用示例
```vue
<bar-chart
  :data="[320, 332, 301, 334]"
  :xAxis="['第一季度', '第二季度', '第三季度', '第四季度']"
  :showBackground="true"
  title="季度业绩"
/>
```

### PieChart
饼图组件

#### 属性
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| data | 数据数组，格式：[{name: '名称', value: 100}] | Array | - |
| ring | 是否显示为环形图 | Boolean | false |
| title | 图表标题 | String | '' |
| radius | 饼图半径 | String/Array | '70%' |
| showLegend | 是否显示图例 | Boolean | true |
| legendPosition | 图例位置，可选值：'right'/'bottom' | String | 'right' |

#### 使用示例
```vue
<pie-chart
  :data="[
    { value: 1048, name: '线上销售' },
    { value: 735, name: '门店销售' },
    { value: 580, name: '代理商' },
    { value: 484, name: '其他' }
  ]"
  :ring="false"
  title="收入来源分布"
/>
```

## 使用注意事项

1. 依赖安装
```bash
npm install echarts @vueuse/core
```

2. 自适应容器
所有图表组件都会自动适应容器大小，确保容器具有明确的宽高。

3. 主题定制
可以通过 BaseEChart 的 theme 属性设置主题，支持 ECharts 内置主题。

4. 性能优化
- 当图表不可见时会自动销毁实例
- 使用 v-if 而不是 v-show 来控制图表显示隐藏
- 数据量较大时建议使用防抖处理

5. 示例访问
可以通过访问 `/demo/charts` 路由查看完整的图表示例。