|
134 | 134 | const lines = []; |
135 | 135 | lines.push(params[0].axisValueLabel); |
136 | 136 |
|
137 | | - // 按监控点名称排序,确保显示顺序一致(拷贝一份避免原数组被修改) |
138 | | - const sortedParams = params.slice().sort((a, b) => { |
139 | | - return a.seriesName.localeCompare(b.seriesName); |
| 137 | + const axisTsRaw = params[0].axisValue; |
| 138 | + const axisTs = typeof axisTsRaw === 'number' ? axisTsRaw : Date.parse(axisTsRaw); |
| 139 | + |
| 140 | + // 先建立当前 params 的 marker 映射,命中的系列继续使用 ECharts 默认彩色 marker |
| 141 | + const markerMap = {}; |
| 142 | + params.forEach(function (item) { |
| 143 | + if (item && item.seriesName) { |
| 144 | + markerMap[item.seriesName] = item.marker || ''; |
| 145 | + } |
140 | 146 | }); |
141 | 147 |
|
142 | | - sortedParams.forEach(function (item) { |
143 | | - if (item.value && item.value[1] !== undefined) { |
144 | | - const delay = parseFloat(item.value[1]); |
145 | | - const displayDelay = isNaN(delay) ? '超时' : delay.toFixed(2) + ' ms'; |
146 | | - lines.push(item.marker + item.seriesName + ": " + displayDelay); |
| 148 | + // 二分查找获取最接近 axisTs 的点 |
| 149 | + function findNearestPoint(data, ts) { |
| 150 | + if (!Array.isArray(data) || data.length === 0 || isNaN(ts)) return null; |
| 151 | + |
| 152 | + let left = 0; |
| 153 | + let right = data.length - 1; |
| 154 | + while (left <= right) { |
| 155 | + const mid = (left + right) >> 1; |
| 156 | + const midTs = data[mid] && data[mid][0]; |
| 157 | + if (midTs === ts) return data[mid]; |
| 158 | + if (midTs < ts) left = mid + 1; |
| 159 | + else right = mid - 1; |
| 160 | + } |
| 161 | + |
| 162 | + const cand1 = right >= 0 ? data[right] : null; |
| 163 | + const cand2 = left < data.length ? data[left] : null; |
| 164 | + if (!cand1) return cand2; |
| 165 | + if (!cand2) return cand1; |
| 166 | + return Math.abs(cand1[0] - ts) <= Math.abs(cand2[0] - ts) ? cand1 : cand2; |
| 167 | + } |
| 168 | + |
| 169 | + // 始终按当前图表上的全部系列生成提示,确保显示同一时刻所有检测点 |
| 170 | + const allSeries = (vm && vm.option && Array.isArray(vm.option.series)) ? vm.option.series.slice() : []; |
| 171 | + allSeries.sort((a, b) => (a.name || '').localeCompare(b.name || '')); |
| 172 | + |
| 173 | + allSeries.forEach(function (series) { |
| 174 | + const point = findNearestPoint(series.data, axisTs); |
| 175 | + if (!point || point[1] === undefined) return; |
| 176 | + |
| 177 | + const delay = parseFloat(point[1]); |
| 178 | + const displayDelay = isNaN(delay) ? '超时' : delay.toFixed(2) + ' ms'; |
| 179 | + |
| 180 | + const pointTs = point[0]; |
| 181 | + let offsetText = ''; |
| 182 | + if (!isNaN(axisTs) && typeof pointTs === 'number') { |
| 183 | + const offsetSeconds = (pointTs - axisTs) / 1000; |
| 184 | + // 只在存在偏移时展示,避免提示信息过长 |
| 185 | + if (Math.abs(offsetSeconds) >= 0.001) { |
| 186 | + const sign = offsetSeconds > 0 ? '+' : '-'; |
| 187 | + offsetText = ' (Δ' + sign + Math.abs(offsetSeconds).toFixed(1) + 's)'; |
| 188 | + } |
| 189 | + } |
| 190 | + |
| 191 | + let marker = markerMap[series.name]; |
| 192 | + if (!marker) { |
| 193 | + marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:#999;"></span>'; |
147 | 194 | } |
| 195 | + |
| 196 | + lines.push(marker + series.name + ': ' + displayDelay + offsetText); |
148 | 197 | }); |
149 | 198 |
|
150 | 199 | return lines.join('<br/>'); |
|
161 | 210 | triggerOn: 'mousemove', |
162 | 211 | axisPointer: { |
163 | 212 | type: 'cross', |
| 213 | + label: { |
| 214 | + show: false |
| 215 | + }, |
164 | 216 | crossStyle: { |
165 | 217 | color: '#999' |
166 | 218 | } |
|
214 | 266 | xAxis: { |
215 | 267 | type: 'time', |
216 | 268 | boundaryGap: false, |
| 269 | + axisPointer: { |
| 270 | + label: { |
| 271 | + show: false |
| 272 | + } |
| 273 | + }, |
217 | 274 | axisLabel: { |
218 | 275 | formatter: function (value) { |
219 | 276 | // PC端不换行,移动端换行 |
|
236 | 293 | yAxis: { |
237 | 294 | type: 'value', |
238 | 295 | boundaryGap: false, |
| 296 | + axisPointer: { |
| 297 | + label: { |
| 298 | + show: false |
| 299 | + } |
| 300 | + }, |
239 | 301 | z: 1, |
240 | 302 | zlevel: 0 |
241 | 303 | }, |
|
0 commit comments