继续上面的问题 我作图部分代码是这样的 showQueueData(){ let dataMap = {}; this.responseData.forEach(item => { if (!dataMap[item.name]) { dataMap[item.name] = { name: item.name, type: 'line', data: [], }; } dataMap[item.name].data.push({ value: [item.monitorDate, item.enqueueCountDiff], queueSize: item.queueSize, enqueueCount: item.enqueueCount, dequeueCount: item.dequeueCount, enqueueCountDiff: item.enqueueCountDiff, dequeueCountDiff: item.dequeueCountDiff, consumerCount: item.consumerCount, producerCount: item.producerCount, }); }); let seriesData = Object.values(dataMap); let myChartOptions = { tooltip: { trigger: 'axis', axisPointer: { type: 'line', lineStyle: { color: '#999' } }, formatter: params => { let data = params[0].data; return `${data.name}<br/> queueSize: ${data.queueSize}<br/> enqueueCount: ${data.enqueueCount}<br/> enqueueCountDiff: ${data.enqueueCountDiff}<br/> dequeueCount: ${data.dequeueCount}<br/> dequeueCountDiff: ${data.dequeueCountDiff}<br/> consumerCount: ${data.consumerCount}<br/> producerCount: ${data.producerCount}` }, }, xAxis: { type: 'time', }, yAxis: { type: 'value', }, series: seriesData, }; let myChart = this.$echarts.init(document.getElementById("myChart")); myChart.setOption(myChartOptions) }, 但是我现在只有设置trigger: 'axis'时有悬浮窗,trigger: 'item'时没有悬浮窗,而我需要的不是横轴触发而是点触发,可以帮我分析出代码是哪里有问题吗
时间: 2024-02-10 21:10:07 浏览: 122
根据你提供的代码,似乎是因为你没有配置 `series` 数据项的 `symbol` 和 `symbolSize` 属性导致无法触发点触发事件。点触发事件需要在每个数据点上添加标记,因此需要配置 `symbol` 和 `symbolSize` 来指定标记的样式和大小。
你可以尝试在 `dataMap[item.name].data.push` 中加入以下两行代码,来配置 `symbol` 和 `symbolSize`:
```javascript
dataMap[item.name].data.push({
value: [item.monitorDate, item.enqueueCountDiff],
queueSize: item.queueSize,
enqueueCount: item.enqueueCount,
dequeueCount: item.dequeueCount,
enqueueCountDiff: item.enqueueCountDiff,
dequeueCountDiff: item.dequeueCountDiff,
consumerCount: item.consumerCount,
producerCount: item.producerCount,
symbol: 'circle', // 配置标记样式
symbolSize: 10, // 配置标记大小
});
```
然后再将 `tooltip` 中的 `trigger` 属性设置为 `trigger: 'item'`,如下所示:
```javascript
tooltip: {
trigger: 'item', // 修改为点触发
formatter: params => {
let data = params.data; // 这里需要使用 params.data 而非 params[0].data
return `${data.name}<br/>
queueSize: ${data.queueSize}<br/>
enqueueCount: ${data.enqueueCount}<br/>
enqueueCountDiff: ${data.enqueueCountDiff}<br/>
dequeueCount: ${data.dequeueCount}<br/>
dequeueCountDiff: ${data.dequeueCountDiff}<br/>
consumerCount: ${data.consumerCount}<br/>
producerCount: ${data.producerCount}`
},
},
```
修改完代码后,重新运行项目,应该就可以实现点触发的效果了。希望对你有所帮助!
阅读全文