yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 空气质量指数等级背景层错位和遮挡横坐标问题

Browse Source 
- levelBands从硬编码SVG像素坐标改为数据值(0-20/21-50/51-100/101-150/151-200)
- 渲染时通过valToY将数据值动态映射为SVG像素坐标,适配手机图表尺寸
- SVG渲染层级重排: levelBands放最底层,网格线和横坐标标签在其上,不再被遮挡
This commit is contained in:
liuyunqin
2026-06-04 14:48:23 +08:00
parent 0f6f38c4db
commit 14ac9801a6
1 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
employee-app/health-monitor/environment/device-detail.html
+19 -16
View File
@@ -277,11 +277,11 @@ function genTrend(metricName, period) {
isAQI: true, yMax: 200, yTicks: [200,150,100,50,0],
limitUpper: null, limitLower: null,
levelBands: [
{yMin:15,yMax:55,label:'清洁',color:'#13C2C2',opacity:.1},
{yMin:55,yMax:105,label:'未污染',color:'#52C41A',opacity:.1},
{yMin:105,yMax:135,label:'轻污染',color:'#FAAD14',opacity:.1},
{yMin:135,yMax:165,label:'中污染',color:'#FA541C',opacity:.1},
{yMin:165,yMax:chartBottom,label:'重污染',color:'#FF4D4F',opacity:.1}
{yMin:0,yMax:20,label:'清洁',color:'#13C2C2',opacity:.1},
{yMin:21,yMax:50,label:'未污染',color:'#52C41A',opacity:.1},
{yMin:51,yMax:100,label:'轻污染',color:'#FAAD14',opacity:.1},
{yMin:101,yMax:150,label:'中污染',color:'#FA541C',opacity:.1},
{yMin:151,yMax:200,label:'重污染',color:'#FF4D4F',opacity:.1}
],
'24h': {points:[55,42,35,48,65,78,82,75,62,58,52,48]},
'7d': {barData:[
@@ -480,6 +480,18 @@ function renderTrend(metricName, period) {
var yMax = cfg.yMax;
var yTicks = cfg.yTicks;
// AQI 等级背景（先渲染，作为底层）
var levelBandsHtml = '';
if (cfg.isAQI && cfg.levelBands) {
for (var i = 0; i < cfg.levelBands.length; i++) {
var b = cfg.levelBands[i];
var bandY1 = valToY(b.yMax, yMax); // yMin value in data → SVG y
var bandY2 = valToY(b.yMin, yMax); // yMax value in data → SVG y (inverted)
levelBandsHtml += '<rect x="' + chartLeft + '" y="' + bandY1 + '" width="' + chartWidth + '" height="' + (bandY2 - bandY1) + '" fill="' + b.color + '" opacity="' + b.opacity + '"/>';
levelBandsHtml += '<text x="' + (chartLeft + 6) + '" y="' + (bandY1 + (bandY2 - bandY1) / 2 + 4) + '" fill="' + b.color + '" font-size="9" font-weight="500">' + b.label + '</text>';
}
}
// 网格线
var gridLines = '';
for (var i = 0; i < yTicks.length; i++) {
@@ -497,16 +509,6 @@ function renderTrend(metricName, period) {
}
}
// AQI 等级背景
var levelBandsHtml = '';
if (cfg.isAQI && cfg.levelBands) {
for (var i = 0; i < cfg.levelBands.length; i++) {
var b = cfg.levelBands[i];
levelBandsHtml += '<rect x="' + chartLeft + '" y="' + b.yMin + '" width="' + chartWidth + '" height="' + (b.yMax - b.yMin) + '" fill="' + b.color + '" opacity="' + b.opacity + '"/>';
levelBandsHtml += '<text x="' + (chartLeft + 6) + '" y="' + (b.yMin + (b.yMax - b.yMin) / 2 + 4) + '" fill="' + b.color + '" font-size="9" font-weight="500">' + b.label + '</text>';
}
}
// 超标区域和虚线
var limitHtml = '';
if (cfg.limitUpper) {
@@ -547,9 +549,10 @@ function renderTrend(metricName, period) {
'<stop offset="0%" stop-color="#1aad8d" stop-opacity="0.25"/>' +
'<stop offset="100%" stop-color="#1aad8d" stop-opacity="0.02"/>' +
'</linearGradient></defs>' +
levelBandsHtml +
gridLines + xLabelsHtml +
'<line x1="' + chartLeft + '" y1="' + chartBottom + '" x2="' + chartRight + '" y2="' + chartBottom + '" class="chart-x-axis"/>' +
levelBandsHtml + limitHtml +
limitHtml +
'<path class="chart-area-fill" d="' + pathD + '"/>' +
'<polyline class="chart-line" points="' + polylinePoints.trim() + '"/>' +
dotsHtml + '</svg>';