设备状态启停累加图程序
时间: 2023-12-17 17:06:06 浏览: 39
这里给出一个使用 Echarts 前端框架实现设备状态启停累加图的示例程序。
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设备状态启停累加图</title>
<!-- 引入 Echarts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:600px;"></div>
</body>
</html>
```
JavaScript 代码:
```
// 数据源
var data = [
{time: '2021-01-01 00:00:00', status: '运行'},
{time: '2021-01-01 01:00:00', status: '运行'},
{time: '2021-01-01 02:00:00', status: '停止'},
{time: '2021-01-01 03:00:00', status: '停止'},
{time: '2021-01-01 04:00:00', status: '运行'},
{time: '2021-01-01 05:00:00', status: '故障'},
{time: '2021-01-01 06:00:00', status: '故障'},
{time: '2021-01-01 07:00:00', status: '运行'},
{time: '2021-01-01 08:00:00', status: '停止'},
{time: '2021-01-01 09:00:00', status: '运行'},
{time: '2021-01-01 10:00:00', status: '故障'},
];
// 状态值累加
var statusCount = [];
var tempCount = 0;
for (var i = 0; i < data.length; i++) {
if (data[i].status === '运行') {
tempCount++;
} else if (data[i].status === '停止') {
tempCount--;
}
statusCount.push(tempCount);
}
// 绘制图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '设备状态启停累加图'
},
tooltip: {},
xAxis: {
type: 'category',
data: data.map(function(item) {
return item.time;
})
},
yAxis: {
type: 'value'
},
series: [{
name: '状态值',
type: 'line',
data: statusCount
}]
};
myChart.setOption(option);
```
该程序首先定义了一个数据源 data,其中包含了设备在一段时间内的状态变化情况。然后,程序对数据进行处理,通过累加运行时间和停止时间的方式计算出每个时间点上的状态值。最后,使用 Echarts 前端框架绘制了一个折线图,用于展示设备状态启停累加信息。其中,图表的横轴为时间,纵轴为状态值。
阅读全文