我又按你说的改了 showQueueData() { let myChart = this.$echarts.init(document.getElementById("myChart")); myChart.clear(); let seriesData = []; // 定义一个空数组用于存储所有队列的 series 数据 let queueAttributes = this.request.queueAttribute; queueAttributes.forEach(attribute => { let dataMap = {}; this.responseData.forEach(item => { if (!dataMap[item.nameWithIp]) { dataMap[item.nameWithIp] = {name: item.nameWithIp, type: 'line', data: [],}; } dataMap[item.nameWithIp].data.push({ value: [item.monitorDate, item[attribute]], attribute: attribute, name: item.name, server: item.server, monitorDate: item.monitorDate, queueSize: item.queueSize, enqueueCount: item.enqueueCount, dequeueCount: item.dequeueCount, enqueueCountDiff: item.enqueueCountDiff, dequeueCountDiff: item.dequeueCountDiff, consumerCount: item.consumerCount, producerCount: item.producerCount, symbol: 'circle', symbolSize: 4, }); }); seriesData.push(...Object.values(dataMap)); // 将当前队列的 series 数据添加到 seriesData 数组中 }); let myChartOptions = { tooltip: { trigger: 'item', axisPointer: {type: 'line', lineStyle: {color: '#999'},}, formatter: params => { let data = params.data; return 队列名称:${data.name}<br/> 队列ip:${data.server}<br/> 监控属性:${data.attribute}<br/> 时间:${data.monitorDate}<br/> 积压数:${data.queueSize}<br/> 总生产数:${data.enqueueCount}<br/> 生产数:${data.enqueueCountDiff}<br/> 总消费数:${data.dequeueCount}<br/> 消费数:${data.dequeueCountDiff}<br/> 生产者数:${data.consumerCount}<br/> 消费者数:${data.producerCount}; }, }, xAxis: {type: 'time',}, yAxis: {type: 'value',}, series: seriesData, // 将所有队列的 series 数据作为一个数组设置给 myChartOptions }; myChart.setOption(myChartOptions); } 可是还是做的线段只有this.request.queueAttribut最后一个元素生成的数据 这是为什么
时间: 2024-03-17 22:42:18 浏览: 87
ECharts 全局触发click点击事件(Label及柱状).md
这是因为在你的代码中,每个队列的 series 数据都被存储在一个名为`dataMap`的对象中,并且在循环队列属性时,最后一个队列的 series 数据会覆盖之前队列的 series 数据。因此,在设置`seriesData`时,只有最后一个队列的 series 数据被添加到了数组中。
为了解决这个问题,你需要为每个队列创建一个单独的对象来存储它的 series 数据。这样,每个队列的数据就不会被其他队列的数据所覆盖。可以尝试以下修改:
```
showQueueData() {
let myChart = this.$echarts.init(document.getElementById("myChart"));
myChart.clear();
let seriesData = [];
// 定义一个空数组用于存储所有队列的 series 数据
let queueAttributes = this.request.queueAttribute;
queueAttributes.forEach(attribute => {
let dataMap = {};
this.responseData.forEach(item => {
if (!dataMap[item.nameWithIp]) {
dataMap[item.nameWithIp] = {
name: item.nameWithIp,
type: 'line',
data: [],
};
seriesData.push(dataMap[item.nameWithIp]); // 将当前队列的 series 数据添加到 seriesData 数组中
}
dataMap[item.nameWithIp].data.push({
value: [item.monitorDate, item[attribute]],
attribute: attribute,
name: item.name,
server: item.server,
monitorDate: item.monitorDate,
queueSize: item.queueSize,
enqueueCount: item.enqueueCount,
dequeueCount: item.dequeueCount,
enqueueCountDiff: item.enqueueCountDiff,
dequeueCountDiff: item.dequeueCountDiff,
consumerCount: item.consumerCount,
producerCount: item.producerCount,
symbol: 'circle',
symbolSize: 4,
});
});
});
let myChartOptions = {
tooltip: {
trigger: 'item',
axisPointer: {
type: 'line',
lineStyle: {
color: '#999'
},
},
formatter: params => {
let data = params.data;
return `队列名称:${data.name}<br/>
队列ip:${data.server}<br/>
监控属性:${data.attribute}<br/>
时间:${data.monitorDate}<br/>
积压数:${data.queueSize}<br/>
总生产数:${data.enqueueCount}<br/>
生产数:${data.enqueueCountDiff}<br/>
总消费数:${data.dequeueCount}<br/>
消费数:${data.dequeueCountDiff}<br/>
生产者数:${data.consumerCount}<br/>
消费者数:${data.producerCount}`;
},
},
xAxis: {
type: 'time',
},
yAxis: {
type: 'value',
},
series: seriesData, // 将所有队列的 series 数据作为一个数组设置给 myChartOptions
};
myChart.setOption(myChartOptions);
}
```
在这个修改后的代码中,我们为每个队列创建了一个单独的对象来存储它的 series 数据,并将其添加到了`seriesData`数组中。这样,在`myChartOptions`中设置`series`时,就能够将所有队列的 series 数据都添加到图表中了。
阅读全文