# 報表組件文檔 ## 柱狀圖  ##### 引用方式 ```js import Bar from '/@/components/chart/Bar.vue'; ``` ##### 參數列表 | 參數名 | 類型 | 必填 | 說明 | |------------|--------|----|------------| | chartData | array | ?? | 圖表數據源 | | option | object| | 圖表的配置項 | | width | string| | 圖表寬度 | | height | string| | 圖表高度 | ##### chartData 示例 ```json [ { "name": "1月", "value": 320 }, { "name": "2月", "value": 457 }, { "name": "3月", "value": 182 } ] ``` ##### 代碼示例 ```html <template> <Bar :chartData="chartData"></Bar> </template> <script lang="ts" setup> import Bar from '/@/components/chart/Bar.vue'; const chartData = [ { "name": "1月", "value": 320 }, { "name": "2月", "value": 457 }, { "name": "3月", "value": 182 } ] </script> <style></style> ``` ## 多列柱狀圖  ##### 引用方式 ```js import BarMulti from '/@/components/chart/BarMulti.vue'; ``` ##### 參數列表 | 參數名 | 類型 | 必填 | 說明 | |------------|--------|----|------------| | chartData | array | ?? | 圖表數據源 | | option | object| | 圖表的配置項 | | width | string| | 圖表寬度 | | height | string| | 圖表高度 | ##### chartData 示例 ```json [ { "name": "1月", "value": 320, "type": "2021" }, { "name": "2月", "value": 457, "type": "2021" }, { "name": "3月", "value": 182, "type": "2021" }, { "name": "1月", "value": 240, "type": "2022" }, { "name": "2月", "value": 357, "type": "2022" }, { "name": "3月", "value": 456, "type": "2022" } ] ``` ## 迷你柱狀圖 同柱形圖，修改配置即可 ## 面積圖  ##### 引用方式 ```js import Line from '/@/components/chart/Line.vue'; ``` ##### 參數列表 | 參數名 | 類型 | 必填 | 說明 | |------------|--------|----|------------| | chartData | array | ?? | 圖表數據源 | | option | object| | 圖表的配置項 | | width | string| | 圖表寬度 | | height | string| | 圖表高度 | ##### chartData 示例 ```json [ { "name": "1月", "value": 320 }, { "name": "2月", "value": 457 }, { "name": "3月", "value": 182 } ] ``` ## 多行折線圖  ##### 引用方式 ```js import LineMulti from '/@/components/chart/LineMulti.vue'; ``` ##### 參數列表 | 參數名 | 類型 | 必填 | 說明 | |------------|--------|----|------------| | chartData | array | ?? | 圖表數據源 | | option | object| | 圖表的配置項 | | width | string| | 圖表寬度 | | height | string| | 圖表高度 | ##### chartData 示例 同柱形圖 ## 餅狀圖  ##### 引用方式 ```js import Pie from '/@/components/chart/Pie' ``` ##### 參數列表 | 參數名 | 類型 | 必填 | 說明 | |------------|--------|----|------------| | chartData | array | ?? | 圖表數據源 | | option | object| | 圖表的配置項 | | width | string| | 圖表寬度 | | height | string| | 圖表高度 | ##### chartData 示例 ```json [ { "name": "一月", "value": 40 }, { "name": "二月", "value": 21 }, { "name": "三月", "value": 17 }, { "name": "四月", "value": 13 }, { "name": "五月", "value": 9 } ] ``` ## 雷達圖  ##### 引用方式 ```js import Radar from '/@/components/chart/Radar' ``` ##### 參數列表 | 參數名 | 類型 | 必填 | 說明 | |------------|--------|----|------------| | chartData | array | ?? | 圖表數據源 | | width | number | | 圖表寬度 | | height | number | | 圖表高度 | | option | object | | 配置項 | ##### chartData 示例 ```json [ { value: 75, name: '政治',type:'文綜',max:100 }, { value: 65, name: '歷史',type:'文綜',max:100 }, { value: 55, name: '地理',type:'文綜',max:100 }, { value: 74, name: '化學',type:'文綜',max:100 }, { value: 38, name: '物理',type:'文綜',max:100 }, { value: 88, name: '生物',type:'文綜',max:100 }, ] ``` ## 儀表盤  ##### 引用方式 ```js import Gauge from '/@/components/chart/Gauge' ``` ##### 參數列表 | 參數名 | 類型 | 必填 | 說明 | |------------|--------|----|------------| | chartData | array | ?? | 圖表數據源 | | option | object| | 圖表的配置項 | | width | string| | 圖表寬度 | | height | string| | 圖表高度 | ##### chartData 示例 ```json { name:'出勤率', value:70 } ``` ## 排名列表  ##### 引用方式 ```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 } ] ```