|
|
@@ -67,7 +67,11 @@ export default {
|
|
|
},
|
|
|
maxX() {
|
|
|
const last = this.intersections[this.intersections.length - 1];
|
|
|
- return last.x + 50;
|
|
|
+ return last.x + 80;
|
|
|
+ },
|
|
|
+ yAxisMin() {
|
|
|
+ // 留出底部 padding,避免首个路口(distance=0)向下延伸的柱子被 clip 裁掉
|
|
|
+ return -80;
|
|
|
},
|
|
|
maxDataTime() {
|
|
|
return this.viewWindow * 3;
|
|
|
@@ -175,20 +179,20 @@ export default {
|
|
|
backgroundColor: 'transparent',
|
|
|
animation: false,
|
|
|
tooltip: { show: false },
|
|
|
- grid: { left: 110, right: 50, top: 40, bottom: 50 },
|
|
|
+ grid: { left: 140, right: 40, top: 40, bottom: 50 },
|
|
|
xAxis: {
|
|
|
type: 'value', min: this.currentViewMinX, max: this.currentViewMinX + this.viewWindow,
|
|
|
interval: 20, name: '时间 (秒)',
|
|
|
nameLocation: 'end',
|
|
|
nameTextStyle: { color: '#a0aabf', padding: [0, 0, 0, 0] },
|
|
|
- axisLine: { show: true, lineStyle: { color: 'rgba(255,255,255,0.15)' } },
|
|
|
+ axisLine: { show: true, onZero: false, lineStyle: { color: 'rgba(255,255,255,0.15)' } },
|
|
|
axisTick: { show: false },
|
|
|
axisLabel: { color: '#a0aabf', fontSize: 10 },
|
|
|
splitLine: { show: this.showYSplitLine, lineStyle: { type: 'dashed', color: 'rgba(255, 255, 255, 0.08)' } }
|
|
|
},
|
|
|
yAxis: {
|
|
|
- type: 'value', min: 0, max: this.maxX,
|
|
|
- axisLine: { show: true, lineStyle: { color: 'rgba(255,255,255,0.15)' } },
|
|
|
+ type: 'value', min: this.yAxisMin, max: this.maxX,
|
|
|
+ axisLine: { show: true, onZero: false, lineStyle: { color: 'rgba(255,255,255,0.15)' } },
|
|
|
axisTick: { show: false },
|
|
|
axisLabel: { show: false },
|
|
|
splitLine: { show: false }
|
|
|
@@ -318,11 +322,21 @@ export default {
|
|
|
const centerYPx = point[1] + this.barWidth + this.gap / 2;
|
|
|
const labelX = point[0] - 12;
|
|
|
|
|
|
- const children = [
|
|
|
- { type: 'text', x: labelX, y: centerYPx - 7, style: { text: intersection.name, fill: '#fff', textAlign: 'right', fontSize: 12 } }
|
|
|
- ];
|
|
|
+ // 名称较长时按 "-" 拆成两行显示
|
|
|
+ const dashIdx = intersection.name.indexOf('-');
|
|
|
+ const nameLine1 = dashIdx >= 0 ? intersection.name.slice(0, dashIdx) : intersection.name;
|
|
|
+ const nameLine2 = dashIdx >= 0 ? intersection.name.slice(dashIdx + 1) : '';
|
|
|
+
|
|
|
+ const children = [];
|
|
|
+ if (nameLine2) {
|
|
|
+ children.push({ type: 'text', x: labelX, y: centerYPx - 15, style: { text: nameLine1, fill: '#fff', textAlign: 'right', fontSize: 12 } });
|
|
|
+ children.push({ type: 'text', x: labelX, y: centerYPx - 1, style: { text: nameLine2, fill: '#fff', textAlign: 'right', fontSize: 12 } });
|
|
|
+ } else {
|
|
|
+ children.push({ type: 'text', x: labelX, y: centerYPx - 7, style: { text: nameLine1, fill: '#fff', textAlign: 'right', fontSize: 12 } });
|
|
|
+ }
|
|
|
if (this.showPhaseOffset) {
|
|
|
- children.push({ type: 'text', x: labelX, y: centerYPx + 5, style: { text: `相位差: ${intersection.offsetText}`, fill: '#a0aabf', textAlign: 'right', fontSize: 11 } });
|
|
|
+ const offYPx = nameLine2 ? centerYPx + 14 : centerYPx + 5;
|
|
|
+ children.push({ type: 'text', x: labelX, y: offYPx, style: { text: `相位差: ${intersection.offsetText}`, fill: '#a0aabf', textAlign: 'right', fontSize: 11 } });
|
|
|
}
|
|
|
|
|
|
if (intersection.distanceNext) {
|
|
|
@@ -331,8 +345,8 @@ export default {
|
|
|
const midYPx = (centerYPx + nextCenterYPx) / 2;
|
|
|
|
|
|
// 非反转 yAxis:距离越大像素 y 越小,nextCenterYPx < centerYPx
|
|
|
- const lineX = labelX - 60;
|
|
|
- children.push({ type: 'line', shape: { x1: lineX, y1: centerYPx - 22, x2: lineX, y2: nextCenterYPx + 22 }, style: { stroke: 'rgba(255,255,255,0.1)', lineDash: [2, 2] } });
|
|
|
+ const lineX = labelX - 85;
|
|
|
+ children.push({ type: 'line', shape: { x1: lineX, y1: centerYPx - 36, x2: lineX, y2: nextCenterYPx + 22 }, style: { stroke: 'rgba(255,255,255,0.1)', lineDash: [2, 2] } });
|
|
|
children.push({ type: 'text', x: lineX, y: midYPx, style: { text: `${intersection.distanceNext}m`, fill: '#a0aabf', textAlign: 'center', fontSize: 11 } });
|
|
|
}
|
|
|
return { type: 'group', children };
|
|
|
@@ -345,7 +359,7 @@ export default {
|
|
|
data: [[this.currentScanX]],
|
|
|
renderItem: (params, api) => {
|
|
|
const xTime = api.value(0);
|
|
|
- const top = api.coord([xTime, 0]);
|
|
|
+ const top = api.coord([xTime, this.yAxisMin]);
|
|
|
const bottom = api.coord([xTime, this.maxX]);
|
|
|
return {
|
|
|
type: 'line',
|