Initial commit of akmon project
This commit is contained in:
55
uni_modules/ak-charts/README.md
Normal file
55
uni_modules/ak-charts/README.md
Normal file
@@ -0,0 +1,55 @@
|
||||
# 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 插件说明
|
||||
1230
uni_modules/ak-charts/components/ak-charts.uvue
Normal file
1230
uni_modules/ak-charts/components/ak-charts.uvue
Normal file
File diff suppressed because it is too large
Load Diff
41
uni_modules/ak-charts/interface.uts
Normal file
41
uni_modules/ak-charts/interface.uts
Normal file
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* ak-charts UTS 插件主入口
|
||||
* 提供注册和渲染图表的基础接口
|
||||
*/
|
||||
|
||||
export type ChartType = 'bar' | 'line' | 'pie' | 'doughnut' | 'radar' | 'area' | 'horizontalBar' | 'multi';
|
||||
|
||||
export type ChartOption {
|
||||
type: ChartType;
|
||||
data: number[] | number[][];
|
||||
labels?: string[];
|
||||
color?: string | string[]; // 支持单色或多色配置
|
||||
seriesNames?: string[];
|
||||
seriesAxis?: string[];
|
||||
// 圆饼图和环形图特有配置
|
||||
centerX?: number;
|
||||
centerY?: number;
|
||||
radius?: number;
|
||||
innerRadius?: number; // 环形图内圆半径
|
||||
}
|
||||
export type Margin {
|
||||
top: number;
|
||||
right: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
}
|
||||
export class AkCharts {
|
||||
// 注册图表(可扩展)
|
||||
static register(type: ChartType, render: any): void {
|
||||
// 这里可以实现自定义图表类型注册
|
||||
}
|
||||
|
||||
// 渲染图表(实际渲染由组件完成)
|
||||
static render(option: ChartOption, canvasId: string): void {
|
||||
// 这里只做参数校验和分发,实际渲染由 ak-charts.vue 组件实现
|
||||
// 可通过 uni.$emit/uni.$on 或全局事件通信
|
||||
uni.$emit('ak-charts-render', { option, canvasId });
|
||||
}
|
||||
}
|
||||
|
||||
export default AkCharts;
|
||||
12
uni_modules/ak-charts/package.json
Normal file
12
uni_modules/ak-charts/package.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "ak-charts",
|
||||
"version": "0.1.0",
|
||||
"description": "一个简单的uni_modules图表插件,支持基础柱状图和折线图,UTS插件规范。",
|
||||
"uni_modules": {
|
||||
"uni_modules": true,
|
||||
"platforms": ["app", "h5", "mp-weixin"],
|
||||
"uts": true
|
||||
},
|
||||
"main": "index.uts",
|
||||
"keywords": ["charts", "canvas", "uni_modules", "uts"]
|
||||
}
|
||||
Reference in New Issue
Block a user