55 lines
1.2 KiB
Markdown
55 lines
1.2 KiB
Markdown
# ak-charts
|
||
|
||
一个功能完整的 uni_modules 图表插件，支持多种图表类型，UTS 插件规范。
|
||
|
||
## 支持的图表类型
|
||
|
||
- `bar` - 垂直条形图
|
||
- `horizontalBar` - 水平条形图
|
||
- `line` - 折线图
|
||
- `area` - 面积图
|
||
- `pie` - 饼图
|
||
- `doughnut` - 环形图
|
||
- `radar` - 雷达图
|
||
|
||
## 使用方法
|
||
|
||
1. 在页面中引用组件：
|
||
````vue
|
||
<ak-charts :option="option" canvas-id="my-canvas"></ak-charts>
|
||
````
|
||
|
||
2. 通过 AkCharts.render(option, canvasId) 进行全局渲染调用。
|
||
|
||
option 示例：
|
||
```js
|
||
{
|
||
type: 'area', // 或其他支持的类型
|
||
data: [75, 80, 85, 90, 87, 92, 88],
|
||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||
color: '#6366F1' // 或颜色数组 ['#FF6384', '#36A2EB', ...]
|
||
}
|
||
```
|
||
|
||
## 图表特性
|
||
|
||
### 面积图 (area)
|
||
- 适合显示趋势数据
|
||
- 支持渐变填充
|
||
- 自动生成网格线和标签
|
||
|
||
### 水平条形图 (horizontalBar)
|
||
- 适合显示分类数据对比
|
||
- 支持渐变填充
|
||
- 标签显示在左侧
|
||
|
||
### 环形图 (doughnut)
|
||
- 支持多色配置
|
||
- 自动计算百分比
|
||
- 包含图例显示
|
||
|
||
## 目录结构
|
||
- interface.uts 类型定义
|
||
- components/ak-charts.uvue 图表组件
|
||
- package.json 插件描述
|
||
- README.md 插件说明 |