使用 ECharts 和 InfluxDB 可视化时间序列数据
作者：社区 / 用例, 产品
2022 年 10 月 28 日
导航至
本文最初发表于 The New Stack，并经许可在此处转载。向下滚动查看作者的简介和照片。
如何设置基本的 React 应用程序，从 InfluxDB Cloud 查询数据，并使用查询的数据使用 Apache ECharts 填充结果。
您使用的每个应用程序、设备或服务都需要特定的软件架构才能高效运行。其中最重要的是数据库层。
数据库类型的选择取决于您处理的数据类型、您期望的检索延迟以及您将执行的操作类型。
很多数据总是具有时间属性，或者换句话说，它自然地按时间排序。这种自然的时间顺序有利于优化需要随时间进行搜索和聚合的数据的性能。时间序列数据库旨在利用这种自然的时间顺序。
InfluxDB 通过独特的 存储引擎、时间序列索引、分片技术、快速数据摄取 等方法，解决了大规模处理时间序列数据的问题。最重要的是，InfluxDB 可以与大多数编程框架和语言（如 Python、Node.js、Scala 和 Go）无缝集成。
在本文中，您将学习如何设置基本的 React 应用程序，从 InfluxDB Cloud 查询数据，并使用查询的数据使用 Apache ECharts 填充结果。您还将学习如何设置 InfluxDB Cloud 帐户，创建存储桶并编写 Flux 查询。
什么是 InfluxDB？
如上所述，InfluxDB 具有 一系列功能，并为最流行的语言和框架提供了官方 客户端库。您可以使用设计良好且成熟的查询语言（如 InfluxQL 和 Flux）查询您的数据。但是，将数据摄取到 InfluxDB 中最快的方法是轻量级的基于文本的协议 InfluxDB Line Protocol。
当处理实时金融系统（如股票市场和加密货币）以及用于 物联网应用程序（用于 GPS、天文、交通和天气数据）的数据时，InfluxDB 表现出色。
由于 InfluxDB 是一个开源数据库，您可以自行部署它，也可以使用 InfluxDB Cloud 在您选择的云平台（如 Azure、Google Cloud 或 Amazon Web Services (AWS)）上部署 InfluxDB。
什么是 Apache ECharts？
Apache ECharts 是一个基于 zrender 的开源 JavaScript 库。它允许您使用渐进式渲染和流式加载来渲染 各种各样的图表。您可以使用 Canvas 或 SVG 格式渲染图表。Apache ECharts 以其低内存占用而闻名，使其成为 移动应用程序的绝佳选择。
设置 InfluxDB
创建免费的 InfluxDB Cloud 帐户非常简单。您可以使用电子邮件和密码对 注册帐户，也可以使用 Google 或 Microsoft 单点登录 (SSO)。
创建存储桶
登录到您的云帐户后，您需要 创建一个包含一些示例数据的存储桶。单击控制台右侧的 Create Bucket（创建存储桶），您将看到以下弹出窗口，提示您为存储桶分配名称。
导入示例数据
本教程使用一个数据集，该数据集捕获了几个小时内五个实例的五分钟平均内存使用率。您可以在此 GitHub 存储库中找到本教程的所有数据，或者您可以获取 示例数据 并将其粘贴到单击 Enter Manually（手动输入）选项后打开的文本框中。或者，您可以上传一个文件，其中包含以 InfluxDB Line Protocol 格式存储的数据。
使用 Line Protocol 方法在以下窗口中粘贴要上传的数据后，单击 Write Data（写入数据）按钮。
如前所述，该数据集包含五个实例的内存使用率数据，这些数据在几个小时内平均每五分钟取一次。原始数据在 InfluxDB Line Protocol 中看起来如下所示：
mem,host=host5 used_percent=8.22 1650881400
mem,host=host5 used_percent=1.7 1650911400
mem,host=host5 used_percent=7.36 1650941400
mem,host=host5 used_percent=6.82 1650971400创建新的 API 令牌
现在，导航到 API Tokens（API 令牌）选项卡，并创建一个 API 令牌，以便您可以从您的应用程序访问数据。然后，您将看到 API 令牌的提示，如下所示。
将令牌存储在配置文件中，因为您将无法再次查看该令牌。如果您最终丢失了此信息，您可以稍后在此过程中请求新令牌。
在生产环境中，您最好不时轮换令牌。您可以使用像 Vault 这样的工具来实现此目的。
克隆 GitHub 存储库
加载数据并创建令牌后，您就可以连接到 InfluxDB Cloud 数据库了。要连接，请克隆 GitHub 存储库。
git clone https://github.com/kovid-r/influxdb-echarts-react
在安装 Node.js 应用程序之前，您需要更改 src/App.js 文件中的以下变量。
const token = INFLUXDB_API_TOKEN;
const org = INFLUXDB_ORGANIZATION;
const url = INFLUXDB_URL;
const bucket = INFLUXDB_BUCKET;您可以在组织设置中的 Name（名称）和 Cluster URL（集群 URL）部分下找到 INFLUXDB_ORGANIZATION 变量的组织名称和 INFLUXDB_URL 变量的集群 URL，如下图所示。
要检索存储桶的名称，请导航到左侧面板中的 Load Data（加载数据），然后单击 Buckets（存储桶），InfluxDB 将列出您组织中的所有存储桶。
将 ECharts 与 InfluxDB 结合使用
GitHub 存储库中的 React 应用程序使用以下依赖项，使您能够将 InfluxDB 和 Apache ECharts 结合使用：
- ECharts for React：一个 npm 包，用于与 ECharts 原生库交互。
- 用于 JavaScript 的响应式扩展库 (RxJS)：使用 Observables 启用响应式编程。这使得编写异步或基于回调的代码更容易。
- Node.js 客户端库：用于 InfluxDB 以及 Flux 查询语言。
// fetches all the data in the influxdb-echarts-react bucket
const fluxQuery = `from(bucket: "influxdb-echarts-react")|> range(start: 0)`;
// function that uses RxJS Observables to get a stream of data from InfluxDB
functionfetchData() {
queryApi.queryRows(fluxQuery, {
next: (row, tableMeta) => {
const o = tableMeta.toObject(row);
setChartData((v) => [...v, o]);
},
error: (error) => {
window.console.error(error);
window.console.log('\nFinished ERROR');
},
complete: () => { setCompleted(true);
window.console.log('\nFinished SUCCESS');
},
});
}克隆存储库后，转到 package.json 文件所在的根目录。当您使用 Node.js 包管理器安装您的应用程序时，此文件将帮助您安装上述所有依赖项。使用 npm ci，执行全新安装并使用以下命令启动您的应用程序：
npm ci && npm start几秒钟后，您将能够在终端屏幕上看到以下消息：
安装完成后，登录到 localhost:3000 以查看您将在下一节中了解的两个开箱即用的图表。随意加载您自己的示例数据并更改图表类型来试用该应用程序。
在 ECharts 上绘制数据
在 Apache ECharts 中，您可以探索 数百种图表，但本教程侧重于其中的两种：多线图 和 条形图。Apache ECharts 还为您提供了一个浏览器内选项预览部分，您可以在其中尝试其他内容，然后再将其作为应用程序的一部分。
折线图是具有多条线的图表，每条线代表示例数据中五个实例之一在固定时间间隔内的平均内存使用率。条形图仅包含一个实例的数据，显示固定时间间隔内的平均内存使用率。
多线图
多线图同时绘制所有五个实例的内存使用率。此处使用调色板填充了五种不同的颜色。如果您不指定颜色，Apache ECharts 将为您着色默认值。
以下是负责生成此图表的函数：
function Chart({ chartData })
{ return (
<> <ReactECharts
option = {{
title: {
text: 'Line Chart for All Hosts from 1 to 5'
},
color: colorPalette,
tooltip: {
trigger: 'axis'
},
grid: { left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: { type: 'category',
boundaryGap: false,
data: arr
}
yAxis: {
type: 'value'
},
series: [
{ name: 'Host 1',
type: 'line',
data: chartData.filter(function (chartData) {
return chartData.host === "host1"; }).map((val) => val._value)
},
{ name: 'Host 2',
type: 'line',
data: chartData.filter(function (chartData) {
return chartData.host === "host2"; }).map((val) => val._value)
},
{ name: 'Host 3',
type: 'line',
data: chartData.filter(function (chartData) {
return chartData.host === "host3"; }).map((val) => val._value)
},
{ name: 'Host 4',
type: 'line',
data: chartData.filter(function (chartData) {
return chartData.host === "host4"; }).map((val) => val._value)
},
{ name: 'Host 5',
type: 'line',
data: chartData.filter(function (chartData) {
return chartData.host === "host5"; }).map((val) => val._value)
}
]
}}
/>
</>
);
}请注意，您正在使用 ECharts for React 库。
您可以在 Apache ECharts 官方网站上查看 折线图的简化示例。
条形图
在本例中，条形图绘制了主机之一 Host 2 的内存使用率。正如您在示例数据和下图中所见，Host 2 的内存使用率范围在 ~45 到 ~65 之间，并且图表自动调整大小到 0 到 70 的范围。
折线图和条形图的代码都放在同一个函数中，该函数具有以下通用结构：
<pre><code class="language-javascript">function Chart({ chartData }) {
return (
<>
<ReactECharts
// code for line chart
/>
<ReactECharts
// code for bar chart
/>
</>
);
}</code></pre>当您进行更改并更新图表类型、示例数据、React 配置等时，您可以登录到 localhost:3000 以查看您的更改。如果您从 GitHub 存储库按原样部署应用程序，则应用程序的默认视图如下所示：
结论
搜索、聚合和可视化通常结合在一起，对于充分利用时间序列数据至关重要。
图表和图形对于任何 时间序列数据分析 用例都至关重要。Apache ECharts 为您提供了一种简单有效的方式来绘制图表和图形。
关于作者
Kovid Rathee 是一位数据和基础设施工程师，在澳大利亚墨尔本的 Servian 担任高级顾问。此前，他曾在工程学院担任助理教授，并在进入数据领域之前担任全栈开发人员，他在数据领域工作了八年。他喜欢撰写关于数据工程、基础设施即代码、DevOps 和 SRE 的文章。
