328 lines
6.8 KiB
Markdown
328 lines
6.8 KiB
Markdown
# 报表组件文档
|
||
|
||
## 柱状图
|
||
|
||
##### 引用方式
|
||
|
||
```js
|
||
import Bar from '@/components/chart/Bar'
|
||
```
|
||
|
||
##### 参数列表
|
||
|
||
| 参数名 | 类型 | 必填 | 说明 |
|
||
|------------|--------|----|------------|
|
||
| title | string | | 报表标题 |
|
||
| dataSource | array | ✔️ | 报表数据源 |
|
||
| height | number | | 报表高度，默认254 |
|
||
|
||
##### dataSource 示例
|
||
|
||
```json
|
||
[
|
||
{
|
||
"x": "1月",
|
||
"y": 320
|
||
},
|
||
{
|
||
"x": "2月",
|
||
"y": 457
|
||
},
|
||
{
|
||
"x": "3月",
|
||
"y": 182
|
||
}
|
||
]
|
||
```
|
||
|
||
## 多列柱状图
|
||
|
||
##### 引用方式
|
||
|
||
```js
|
||
import BarMultid from '@/components/chart/BarMultid'
|
||
```
|
||
|
||
##### 参数列表
|
||
|
||
| 参数名 | 类型 | 必填 | 说明 |
|
||
|------------|--------|----|------------|
|
||
| title | string | | 报表标题 |
|
||
| fields | array | | 主列字段列表 |
|
||
| dataSource | array | | 报表数据源 |
|
||
| height | number | | 报表高度，默认254 |
|
||
|
||
##### fields 示例
|
||
|
||
```json
|
||
["Jan.", "Feb.", "Mar.", "Apr.", "May", "Jun.", "Jul.", "Aug."]
|
||
```
|
||
|
||
##### dataSource 示例
|
||
|
||
```json
|
||
[
|
||
{
|
||
"type": "Jeecg", // 列名
|
||
"Jan.": 18.9,
|
||
"Feb.": 28.8,
|
||
"Mar.": 39.3,
|
||
"Apr.": 81.4,
|
||
"May": 47,
|
||
"Jun.": 20.3,
|
||
"Jul.": 24,
|
||
"Aug.": 35.6
|
||
},
|
||
{
|
||
"type": "Jeebt",
|
||
"Jan.": 12.4,
|
||
"Feb.": 23.2,
|
||
"Mar.": 34.5,
|
||
"Apr.": 99.7,
|
||
"May": 52.6,
|
||
"Jun.": 35.5,
|
||
"Jul.": 37.4,
|
||
"Aug.": 42.4
|
||
}
|
||
]
|
||
```
|
||
|
||
## 迷你柱状图
|
||
|
||
不带标题和数据轴的柱状图
|
||
|
||
##### 引用方式
|
||
|
||
```js
|
||
import MiniBar from '@/components/chart/MiniBar'
|
||
```
|
||
|
||
##### 参数列表
|
||
|
||
| 参数名 | 类型 | 必填 | 说明 |
|
||
|------------|--------|----|---------------|
|
||
| width | number | | 报表宽度度，默认自适应宽度 |
|
||
| height | number | | 报表高度，默认200 |
|
||
| dataSource | array | | 报表数据源 |
|
||
|
||
##### dataSource 示例
|
||
|
||
```json
|
||
[
|
||
{
|
||
"x": "1月",
|
||
"y": 320
|
||
},
|
||
{
|
||
"x": "2月",
|
||
"y": 457
|
||
},
|
||
{
|
||
"x": "3月",
|
||
"y": 182
|
||
}
|
||
]
|
||
```
|
||
|
||
## 面积图
|
||
|
||
##### 引用方式
|
||
|
||
```js
|
||
import AreaChartTy from '@/components/chart/AreaChartTy'
|
||
```
|
||
|
||
##### 参数列表
|
||
|
||
| 参数名 | 类型 | 必填 | 说明 |
|
||
|------------|--------|----|------------|
|
||
| title | string | | 报表标题 |
|
||
| dataSource | array | ✔️ | 报表数据源 |
|
||
| height | number | | 报表高度，默认254 |
|
||
| lineSize | number | | 线的粗细，默认2 |
|
||
|
||
##### dataSource 示例
|
||
|
||
```json
|
||
[
|
||
{
|
||
"x": "1月",
|
||
"y": 320
|
||
},
|
||
{
|
||
"x": "2月",
|
||
"y": 457
|
||
},
|
||
{
|
||
"x": "3月",
|
||
"y": 182
|
||
}
|
||
]
|
||
```
|
||
|
||
## 多行折线图
|
||
|
||
##### 引用方式
|
||
|
||
```js
|
||
import LineChartMultid from '@/components/chart/LineChartMultid'
|
||
```
|
||
|
||
##### 参数列表
|
||
|
||
| 参数名 | 类型 | 必填 | 说明 |
|
||
|------------|--------|----|------------|
|
||
| title | string | | 报表标题 |
|
||
| fields | array | | 主列字段列表 |
|
||
| dataSource | array | | 报表数据源 |
|
||
| height | number | | 报表高度，默认254 |
|
||
|
||
##### fields 示例
|
||
|
||
```json
|
||
["jeecg", "jeebt"]
|
||
```
|
||
|
||
##### dataSource 示例
|
||
|
||
```json
|
||
[
|
||
{
|
||
"type": "Jan", // 列名
|
||
"jeecg": 7,
|
||
"jeebt": 3.9
|
||
},
|
||
{ "type": "Feb", "jeecg": 6.9, "jeebt": 4.2 },
|
||
{ "type": "Mar", "jeecg": 9.5, "jeebt": 5.7 },
|
||
{ "type": "Apr", "jeecg": 14.5, "jeebt": 8.5 },
|
||
{ "type": "May", "jeecg": 18.4, "jeebt": 11.9 },
|
||
{ "type": "Jun", "jeecg": 21.5, "jeebt": 15.2 },
|
||
{ "type": "Jul", "jeecg": 25.2, "jeebt": 17 },
|
||
{ "type": "Aug", "jeecg": 26.5, "jeebt": 16.6 },
|
||
{ "type": "Sep", "jeecg": 23.3, "jeebt": 14.2 },
|
||
{ "type": "Oct", "jeecg": 18.3, "jeebt": 10.3 },
|
||
{ "type": "Nov", "jeecg": 13.9, "jeebt": 6.6 },
|
||
{ "type": "Dec", "jeecg": 9.6, "jeebt": 4.8 }
|
||
]
|
||
```
|
||
|
||
## 饼状图
|
||
|
||
##### 引用方式
|
||
|
||
```js
|
||
import Pie from '@/components/chart/Pie'
|
||
```
|
||
|
||
##### 参数列表
|
||
|
||
| 参数名 | 类型 | 必填 | 说明 |
|
||
|------------|--------|----|------------|
|
||
| dataSource | array | | 报表数据源 |
|
||
| height | number | | 报表高度，默认254 |
|
||
|
||
##### dataSource 示例
|
||
|
||
```json
|
||
[
|
||
// 所有的 percent 相加等于 100
|
||
{ "item": "一月", "percent": 40 },
|
||
{ "item": "二月", "percent": 21 },
|
||
{ "item": "三月", "percent": 17 },
|
||
{ "item": "四月", "percent": 13 },
|
||
{ "item": "五月", "percent": 9 }
|
||
]
|
||
```
|
||
|
||
## 雷达图
|
||
|
||
##### 引用方式
|
||
|
||
```js
|
||
import Radar from '@/components/chart/Radar'
|
||
```
|
||
|
||
##### 参数列表
|
||
|
||
| 参数名 | 类型 | 必填 | 说明 |
|
||
|------------|--------|----|------------|
|
||
| dataSource | array | | 报表数据源 |
|
||
| height | number | | 报表高度，默认254 |
|
||
|
||
##### dataSource 示例
|
||
|
||
```json
|
||
[
|
||
// score 最小值为 0，最大值为 100
|
||
{ "item": "一月", "score": 40 },
|
||
{ "item": "二月", "score": 20 },
|
||
{ "item": "三月", "score": 67 },
|
||
{ "item": "四月", "score": 43 },
|
||
{ "item": "五月", "score": 90 }
|
||
]
|
||
```
|
||
|
||
## 进度条
|
||
|
||
##### 引用方式
|
||
|
||
```js
|
||
import MiniProgress from '@/components/chart/MiniProgress'
|
||
```
|
||
|
||
##### 参数列表
|
||
|
||
| 参数名 | 类型 | 必填 | 说明 |
|
||
|------------|--------|----|-------------------|
|
||
| percentage | number | | 当前进度百分比，默认0，最高100 |
|
||
| target | number | | 目标值，默认10 |
|
||
| height | number | | 进度条高度，默认10 |
|
||
| color | string | | 进度条颜色，默认 #13C2C2 |
|
||
|
||
## 仪表盘
|
||
|
||
##### 引用方式
|
||
|
||
```js
|
||
import DashChartDemo from '@/components/chart/DashChartDemo'
|
||
```
|
||
|
||
##### 参数列表
|
||
|
||
| 参数名 | 类型 | 必填 | 说明 |
|
||
|--------|--------|----|----------------|
|
||
| title | string | | 报表标题 |
|
||
| value | number | | 当前值，默认6.7，最大为9 |
|
||
| height | number | | 报表高度，默认254 |
|
||
|
||
## 排名列表
|
||
|
||
##### 引用方式
|
||
|
||
```js
|
||
import RankList from '@/components/chart/RankList'
|
||
```
|
||
|
||
##### 参数列表
|
||
|
||
| 参数名 | 类型 | 必填 | 说明 |
|
||
|--------|--------|----|--------------|
|
||
| title | string | | 报表标题 |
|
||
| list | array | | 排名列表数据 |
|
||
| height | number | | 报表高度，默认自适应高度 |
|
||
|
||
##### list 示例
|
||
|
||
```json
|
||
[
|
||
{
|
||
"name": "北京朝阳 1 号店",
|
||
"total": 1981
|
||
},
|
||
{ "name": "北京朝阳 2 号店", "total": 1359 },
|
||
{ "name": "北京朝阳 3 号店", "total": 1354 },
|
||
{ "name": "北京朝阳 4 号店", "total": 263 },
|
||
{ "name": "北京朝阳 5 号店", "total": 446 },
|
||
{ "name": "北京朝阳 6 号店", "total": 796 }
|
||
]
|
||
``` |