npm 包 react-kpiwidget 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

在前端开发中，经常需要使用到 KPI 指标组件以展示关键数据指标。而 react-kpiwidget 就是一个 npm 包提供了 KPI 指标组件的实现方案，能够快速帮助前端开发者构建漂亮的 KPI 指标组件。

安装

react-kpiwidget 这个 npm 包的安装非常简单，只需要使用 npm 安装命令即可：

npm install react-kpiwidget

使用

导入 KPI 组件

在你的组件中导入 KPI 组件：

import KpiWidget from 'react-kpiwidget'

使用 KPI 组件

在 render 函数中使用 KPI 组件：

render() {
  return (
    <KpiWidget title="My KPI Widget" value="10" />
  )
}

属性

react-kpiwidget 的 KPI 组件提供以下属性进行个性化定制：

title: 指标的标题
value: 指标的值
icon: 指标前面的图标
bgColor: 指标背景的颜色
textColor: 指标文字的颜色
isUp: 是否显示表示涨跌的箭头
overdueColor: 是否使用过期的颜色

示例代码

以下代码展示了如何使用 react-kpiwidget 实现一个简单的 KPI 指标组件：

-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ------------------

-------- ----- -
  ------ -
    ---- ----------------
      ----------
        -------------
        --------------
        -------- -------------- --------------------
        -----------------
        -------------------
        -----------
        --------------------
      --
    ------
  --
-

------ ------- ----

运行以上代码，你将会得到一个图标为折线图、背景颜色为灰色、文字颜色为蓝色的 KPI 指标组件，它的标题为 Sales，它的值为 $8,912，它将显示一个向上的箭头，表示指标有所上升。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60067357890c4f7277583cc8