简介
在前端开发中，经常需要使用到 KPI 指标组件以展示关键数据指标。而 react-kpiwidget 就是一个 npm 包提供了 KPI 指标组件的实现方案，能够快速帮助前端开发者构建漂亮的 KPI 指标组件。
安装
react-kpiwidget 这个 npm 包的安装非常简单，只需要使用 npm 安装命令即可：
--- ------- ---------------
使用
导入 KPI 组件
在你的组件中导入 KPI 组件：
------ --------- ---- -----------------
使用 KPI 组件
在 render 函数中使用 KPI 组件：
-------- -
------ -
---------- --------- --- ------- ---------- --
-
-属性
react-kpiwidget 的 KPI 组件提供以下属性进行个性化定制：
title: 指标的标题value: 指标的值icon: 指标前面的图标bgColor: 指标背景的颜色textColor: 指标文字的颜色isUp: 是否显示表示涨跌的箭头overdueColor: 是否使用过期的颜色
示例代码
以下代码展示了如何使用 react-kpiwidget 实现一个简单的 KPI 指标组件：
------ ----- ---- --------
------ --------- ---- ------------------
-------- ----- -
------ -
---- ----------------
----------
-------------
--------------
-------- -------------- --------------------
-----------------
-------------------
-----------
--------------------
--
------
--
-
------ ------- ----运行以上代码，你将会得到一个图标为折线图、背景颜色为灰色、文字颜色为蓝色的 KPI 指标组件，它的标题为 Sales，它的值为 $8,912，它将显示一个向上的箭头，表示指标有所上升。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067357890c4f7277583cc8