echarts+js生成profile图。根据 [ { name:'分站', startTime: "2023-05-28 00:00:01", endTime:"2023-05-29 00:00:01", value:0 }, { name:'读卡器', startTime: "2023-05-28 00:00:01", endTime:"2023-05-29 00:00:01", value:0 }, { name:'电源', startTime: "2023-05-28 00:00:01", endTime:"2023-05-29 00:00:01", value:0 }, { name:'分站', startTime: "2023-05-29 00:00:01", endTime:"2023-05-30 00:00:01", value:1 }, { name:'读卡器', startTime: "2023-05-29 00:00:01", endTime:"2023-05-30 00:00:01", value:1 }, { name:'电源', startTime: "2023-05-29 00:00:01", endTime:"2023-05-30 00:00:01", value:1 }, { name:'分站', startTime: "2023-05-30 00:00:01", endTime:"2023-05-31 00:00:01", value:2 }, { name:'读卡器', startTime: "2023-05-30 00:00:01", endTime:"2023-05-31 00:00:01", value:0 }, { name:'电源', startTime: "2023-05-30 00:00:01", endTime:"2023-05-31 00:00:01", value:2 } ]内对象的两个时间值生成x轴时间轴,再由对象中的dev值分成不同组生成y轴,中间的图形的值由同时间,同一dev对应生成
时间: 2024-02-24 09:00:30 浏览: 86
一个简单的实现方案如下:
1. 首先需要将数据按照时间排序,可以使用 JavaScript 中的 sort() 方法。
```javascript
data.sort(function(a, b){
return new Date(a.startTime) - new Date(b.startTime);
});
```
2. 然后可以将数据按照设备名称分组,可以使用 JavaScript 中的 reduce() 方法。
```javascript
var groupedData = data.reduce(function(acc, cur){
if (acc[cur.name]) {
acc[cur.name].push(cur);
} else {
acc[cur.name] = [cur];
}
return acc;
}, {});
```
3. 接下来需要生成 x 轴时间轴,可以从数据中获取起始时间和结束时间,然后使用 echarts 中的 time 类型的轴。
```javascript
var startTime = data[0].startTime;
var endTime = data[data.length - 1].endTime;
option = {
xAxis: {
type: 'time',
min: startTime,
max: endTime
}
};
```
4. 然后可以生成 y 轴,根据设备名称分组后的数据可以获取每个设备对应的 dev 值,然后使用 echarts 中的 category 类型的轴。
```javascript
var yAxisData = Object.keys(groupedData);
option = {
xAxis: {...},
yAxis: {
type: 'category',
data: yAxisData
}
};
```
5. 最后需要生成中间的图形,可以使用 echarts 中的 scatter 类型的系列。需要遍历按照设备名称分组后的数据,然后根据每个设备对应的 dev 值生成 scatter 数据项。
```javascript
var seriesData = [];
for (var name in groupedData) {
var devValues = groupedData[name].map(function(item){
return item.value;
});
var scatterData = groupedData[name].map(function(item){
return {
name: name,
value: [item.startTime, devValues]
};
});
seriesData = seriesData.concat(scatterData);
}
option = {
xAxis: {...},
yAxis: {...},
series: {
type: 'scatter',
data: seriesData
}
};
```
以上是一个简单的实现方案,具体实现可能需要根据实际需求进行修改和优化。
阅读全文