115 lines
2.9 KiB
Markdown
115 lines
2.9 KiB
Markdown
# 组件文档
|
|
|
|
## 图表组件
|
|
|
|
### 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` 路由查看完整的图表示例。 |