oae-piwik-analytics-ui 是一个前端库，用于对 piwik 数据进行可视化分析。本文将介绍如何使用 npm 安装和使用该库。
安装
你可以使用 npm 进行安装。在终端里输入以下命令：
npm install oae-piwik-analytics-ui
使用
其中，oae-piwik-analytics-ui 包含两个部分：服务端和客户端。我们先假设你已经按照官方文档设置好服务端，在这里我们只讲客户端用法。
- 构建 HTML 页面
首先，我们来构建一个简单的 HTML 页面:
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------------------------
-------
------
---- ---------------------------
------- ------------------------------------------------------------------------------------
------- ------------------------
-------
-------这里我们在 head 标签里设置了标题，同时在 body 标签里创建了一个 div，用于容纳图表。
- 编写 app.js
在 app.js 里，我们会引入和初始化 oae-piwik-analytics-ui:
-- -------------------- ---- -------
----- ---------------- - ------------------------------------------
----- ---------------- - --- -----------------
---------------------------- -- -- ----- -----
-------------------- -- -------- --
------------------------ -- -- --- ------- ------ -----
--
-- -------------
-------------------------------------- ------ -- -
----- ----- - -----------------------------------
-------------------------------------------
-----
-------
-----------
--
---这里我们引入了 oae-piwik-analytics-ui 的默认导出（注意是默认导出），然后使用 new 运算符初始化。
在实例化时，我们设置了 Piwik 服务的地址，要分析的网站 ID，和 API 请求需要携带的 Bearer Token。这里的参数可以通过 Piwik 的官方文档获得。
接下来，我们调用 getPageviewsByDay 方法获取过去 30 天每天的 PV 数据。
最后，我们使用 generateLineChart 方法在指定的 div 容器内绘制折线图。你可以根据需要调用 generatePieChart、generateBarChart 等方法绘制不同类型的图表。
- 运行
在终端里输入以下命令：
node app.js
以上是使用 oae-piwik-analytics-ui 的一个简单例子，你可以在实际的项目中根据需要进行定制。
总结
在本文中，我们讲解了如何安装和使用 oae-piwik-analytics-ui。通过这个库，我们可以对 Piwik 服务的数据进行可视化分析，从而更好地把握项目的运行情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9d3d1de16d83a66fa2