header-statistics v0.1.9

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=》展示百分比

[
  //分区一
  [
    {
      "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"
    }
  ]
] |