使用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行协议。
InfluxDB在处理实时金融系统数据方面表现出色，如股票市场和加密货币，以及用于物联网应用的GPS、天文学、交通和气象数据。
由于InfluxDB是一个开源数据库，您可以自行部署，也可以使用InfluxDB Cloud将InfluxDB部署在您选择的云平台上，例如Azure、Google Cloud或Amazon Web Services (AWS)。
Apache ECharts是什么？
Apache ECharts是一个基于zrender的基于JavaScript的开源库。它允许您使用渐进式渲染和流式加载渲染各种图表。您可以将图表以Canvas或SVG格式渲染。Apache ECharts以其低内存占用而闻名，使其成为移动应用的理想选择。
设置InfluxDB
创建一个免费的InfluxDB Cloud账户很简单。您可以使用电子邮件和密码对账户进行注册，或者您可以使用Google或Microsoft的单点登录（SSO）。
创建一个桶
一旦您使用您选择的登录方式登录到云账户，您需要使用一些示例数据创建一个桶。在控制台右侧单击“创建桶”，您将看到一个弹出窗口，提示您为桶分配一个名称。
导入示例数据
本教程使用了一个数据集，该数据集记录了五个实例在几个小时内五分钟的平均内存使用情况。您可以在GitHub存储库中找到本教程的所有数据，或者您可以获取示例数据并将其粘贴到单击“手动输入”选项后打开的文本框中。或者，您也可以上传一个存储在InfluxDB行协议格式中的数据文件。
在以下窗口中粘贴要上传的数据后，单击“写入数据”按钮
如前所述，该数据集包含五个实例在几个小时内五分钟内存使用的平均值。原始数据在InfluxDB行协议中看起来像以下这样
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令牌”选项卡，创建一个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;您可以在组织设置中的“名称”和“集群 URL”部分分别找到 INFLUXDB_ORGANIZATION 变量的组织名称和 INFLUXDB_URL 变量的集群 URL，如图所示
要获取存储桶名称，请导航到左侧面板的“加载数据”，然后点击“存储桶”。InfluxDB 将列出您组织中的所有存储桶
使用 InfluxDB 与 ECharts 集成
GitHub 仓库中的 React 应用程序使用以下依赖项，以使您能够与 InfluxDB 和 Apache ECharts 一起工作
- ECharts for React：一个 npm 包，与 ECharts 原生库 交互。
- JavaScript 的响应式扩展库（RxJS）：使用 可观察者 实现响应式编程。这使得编写异步或基于回调的代码更加容易。
- 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 网站上查看 简化后的线图示例。
柱状图
在这个例子中，柱状图绘制了主机 2 的内存使用情况。如您在样本数据和下面的图像中所见，主机 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 的文章。
