feat: 空气质量指数折线图Tooltip增加等级显示
- 近24小时点击数据点,数值后追加对应等级名称(清洁/未污染/轻污染/中污染/重污染) - 等级文字颜色与数据点颜色一致,方便识别
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user