admin-plugin-measured 是一个基于 React 和 Ant Design 的 npm 包，可以快速构建一个以度量为中心的管理后台，让用户可以方便地查看各种数据的度量值。本文将介绍如何使用 admin-plugin-measured。
安装
在你的项目中使用以下命令安装 admin-plugin-measured：
npm install admin-plugin-measured --save
引入组件
在你的 React 组件中引入 MeasuredDashboard 组件：
import { MeasuredDashboard } from 'admin-plugin-measured'创建配置
在组件中创建一个配置对象，以指定各种度量值，示例如下：
-- -------------------- ---- -------
----- ------ - -
------------ -
------ ----------
----- -
------ -----
------ -----
---------- -
------- ------- ------ ------ ------ ------ -------
------- ----- ---- ---- ---- ----- -----
-
-
--
---------- -
------ --------
----- -
------ -----
------ -------
---------- -
------- ------- ------ ------ ------ ------ -------
------- ----- ----- ----- ----- ----- -----
-
-
-
-config 对象中包含两个度量值：personViews 和 postReads，它们的结构相同，包含一个 title 字段和一个 data 字段，其中 data 字段又包含一个 total 字段、一个 trend 字段和一个 chartData 字段。total 表示总数，trend 表示趋势，取值为 'up' 或 'down'，chartData 中包含一个 labels 数组和一个 values 数组，分别表示图表的横轴和纵轴数据。
渲染组件
将 MeasuredDashboard 组件放入你的 JSX 中，并将配置对象传递给它：
function App() {
return (
<div className="App">
<MeasuredDashboard config={config} />
</div>
);
}配置项
MeasuredDashboard 接收一个配置对象，用于指定各种度量值。下面是可能的配置项：
| 名称 | 类型 | 描述 |
|---|---|---|
| title | string | 度量值的标题 |
| data | object | 度量值的数据 |
| data.total | number | 度量值的总数 |
| data.trend | 'up' | 'down' | 度量值的趋势 |
| data.chartData | object | 图表的数据 |
| data.chartData.labels | string[] | 图表的横轴数据 |
| data.chartData.values | number[] | 图表的纵轴数据 |
示例代码
以下是完整的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------------- - ---- ------------------------
----- ------ - -
------------ -
------ ----------
----- -
------ -----
------ -----
---------- -
------- ------- ------ ------ ------ ------ -------
------- ----- ---- ---- ---- ----- -----
-
-
--
---------- -
------ --------
----- -
------ -----
------ -------
---------- -
------- ------- ------ ------ ------ ------ -------
------- ----- ----- ----- ----- ----- -----
-
-
-
-
-------- ----- -
------ -
---- ----------------
------------------ --------------- --
------
--
-
------ ------- ----以上内容希望能对初学者理解 npm 包 admin-plugin-measured 使用有所帮助，如果有任何疑问或需求，请参考 Ant Design 文档或 npm 官网。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005578f81e8991b448d48cc