header-statistics 统计数据综合展示组件

如何安装

• 如果你使用npm

npm i header-statistics --save

• 或者使用yarn

yarn add header-statistics

header-statistics组件展示

header-statistics组件的配置

statisticsData参数是一个数组，通过对象数组进行分组

1. name=》展示名称
2. value=》展示值
3. unit=》展示单位
4. proportional=》展示百分比

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 使用方式 | | :-------: | :-------------------------: | :-----: | :--------------------------------: | :------------------------------------------: | :-------------------------------------------------------------------------------: | | statisticsData | 组件整体展示数据 | Array | —— | [] | [ //分区一 [ { "code": "keyBoatTotal", "id": "991651748306911232", "name": "重点渔船数", // 展示名称 "proportional": "", //展示百分比 "unit": "艘", //展示单位 "value": "73" //展示值 }, { "code": "keyBoatPower", "id": "991651748827004928", "name": "重点渔船功率", "proportional": "", "unit": "KW", "value": "2819" } ], //分区二 [ { "code": "keyOceanShow", "id": "991651750966099968", "name": "海洋重点渔船", "proportional": "", "unit": "艘", "value": "59" }, { "code": "keyInlandShow", "id": "991651751385530368", "name": "内陆重点渔船", "proportional": "", "unit": "艘", "value": "14" } ], //分区三 [ { "code": "moveBoatShow", "id": "991651754141188096", "name": "自动标注", "proportional": "", "unit": "艘", "value": "1" }, { "code": "artificialShow", "id": "991651753272967168", "name": "人工标注", "proportional": "", "unit": "艘", "value": "72" } ], //分区四 [ { "code": "keyInPortShow", "id": "991651757643431936", "name": "在港重点渔船", "proportional": "75%", "unit": "艘", "value": "3" }, { "code": "keyOutPortShow", "id": "991651757676986368", "name": "离港重点渔船", "proportional": "25%", "unit": "艘", "value": "1" } ] ] |