我在vue2中使用echarts作图 作图代码如下 let dataMap = {}; //返回数据根据name分组 this.responseData.forEach(item => { if (!dataMap[item.nameWithIp]) { dataMap[item.nameWithIp] = { name: item.nameWithIp, type: 'line', data: [], }; } this.request.queueAttribute.map(attr => { dataMap[item.nameWithIp].data.push({ value: [item.monitorDate, item[attr]], attribute:attr, 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 seriesData = Object.values(dataMap); 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, }; let myChart = this.$echarts.init(document.getElementById("myChart")); myChart.clear(); myChart.setOption(myChartOptions) }, 这是一段有问题的代码,问题在于我需要他将this.request.queueAttribute中不同的元素行程的数据点画出不同的折线,而这段代码把不同的元素行程的数据点放到一条线里了,我该怎么修改
时间: 2024-03-17 11:40:59 浏览: 64
问题出在这里:
```
dataMap[item.nameWithIp] = {
name: item.nameWithIp,
type: 'line',
data: [],
};
```
你为每个队列的 `nameWithIp` 属性都创建了一个对象,但是这个对象的 `data` 属性是一个空数组,后面又将所有属性的数据点都 push 到了这个空数组里面,导致不同的元素行程的数据点被放到了一条线里面。
你需要根据 `this.request.queueAttribute` 中的元素,为每个元素创建一个数组,并将对应属性的数据点 push 到这个数组里面,最后将这些数组都加入到 `seriesData` 中。
修改代码如下:
```
let seriesData = [];
this.request.queueAttribute.forEach(attr => {
let data = Object.values(dataMap).map(item => {
return {
name: item.name,
server: item.server,
attribute: attr,
monitorDate: item.data[0].value[0],
queueSize: item.data[0].value[1][attr],
enqueueCount: item.data[1].value[1][attr],
enqueueCountDiff: item.data[2].value[1][attr],
dequeueCount: item.data[3].value[1][attr],
dequeueCountDiff: item.data[4].value[1][attr],
consumerCount: item.data[5].value[1][attr],
producerCount: item.data[6].value[1][attr],
symbol: 'circle',
symbolSize: 4,
value: [item.data[0].value[0], item.data[1].value[1][attr]],
};
});
seriesData.push({
name: attr,
type: 'line',
data: data,
});
});
```
这样就可以按照不同的元素行程将数据点画出不同的折线了。
阅读全文