feat: 空气质量指数折线图Tooltip增加等级显示

- 近24小时点击数据点,数值后追加对应等级名称(清洁/未污染/轻污染/中污染/重污染)
- 等级文字颜色与数据点颜色一致,方便识别
This commit is contained in:
liuyunqin
2026-06-04 14:48:23 +08:00
parent 14ac9801a6
commit 2eec7e20f4
@@ -560,6 +560,15 @@ function renderTrend(metricName, period) {
return svg;
}
/* AQI 等级名称映射 */
function getAqiLevel(val) {
if (val >= 151) return '重污染';
if (val >= 101) return '中污染';
if (val >= 51) return '轻污染';
if (val >= 21) return '未污染';
return '清洁';
}
/* 显示折线图数据点 Tip */
function showTrendTip(e, el) {
var td = window._trendTooltipData;
@@ -569,12 +578,14 @@ function showTrendTip(e, el) {
var val = td.points[idx];
var unit = td.unit || '';
var color = td.isAQI ? getAqiColor(val) : chartLine;
var levelHtml = td.isAQI ? '<span class="chart-tooltip__label" style="color:' + color + ';"> ' + getAqiLevel(val) + '</span>' : '';
document.getElementById('tooltipDate').textContent = dateStr;
document.getElementById('tooltipBody').innerHTML =
'<div class="chart-tooltip__row">' +
'<span class="chart-tooltip__dot" style="background:' + color + '"></span>' +
'<span class="chart-tooltip__label">数值</span>' +
'<span class="chart-tooltip__val">' + val + (unit ? ' ' + unit : '') + '</span></div>';
'<span class="chart-tooltip__val">' + val + (unit ? ' ' + unit : '') + '</span>' +
levelHtml + '</div>';
showTooltip(el);
}