From 4b275f2093954cc58bbc23e4fc67e67d6fe81c0b Mon Sep 17 00:00:00 2001
From: Riku <risaku@163.com>
Date: 星期日, 13 七月 2025 22:46:35 +0800
Subject: [PATCH] 2025.7.13 污染动态溯源
---
src/components/chart/ProgressLineChart.vue | 39 ++++++++++++++++++++++++---------------
1 files changed, 24 insertions(+), 15 deletions(-)
diff --git a/src/components/chart/ProgressLineChart.vue b/src/components/chart/ProgressLineChart.vue
index 4aedf0a..482740d 100644
--- a/src/components/chart/ProgressLineChart.vue
+++ b/src/components/chart/ProgressLineChart.vue
@@ -40,7 +40,9 @@
allSeries: [],
option: null,
pageSize: 200,
- progress: 0
+ progress: 0,
+ // 瀵瑰簲progress杩涘害涓嬶紝鎵�灞曠ず鏁版嵁鐨勮捣濮嬬储寮�
+ sIndex: 0
};
},
emits: ['chartClick'],
@@ -65,13 +67,6 @@
},
locateIndex(nV, oV) {
if (nV == oV) return;
- // 1. 瀹氫綅鐐瑰簲璇ュ睍绀哄湪瓒嬪娍鍥句腑闂达紝鍥犳瀹氫綅鐧惧垎姣斿線鍓嶅亸绉诲綋鍓峗size鐨勪竴鍗�
- let i = nV - parseInt(this.pageSize / 2);
- // 2. 纭繚绱㈠紩涓嶄細瓒呭嚭鑼冨洿
- i = i < 0 ? 0 : i;
- // 3. 鑾峰彇绱㈠紩瀵瑰簲鐨勮繘搴︾櫨鍒嗘瘮
- this.progress = (i / (this.allXAxis.length - this.pageSize)) * 100;
-
for (const iterator of this.allSeries) {
// if (iterator.name == factorName || (iterator.name == 'TVOC' || factorName == 'VOC')) {
iterator.markLine = {
@@ -90,7 +85,21 @@
]
};
}
- this.changeChartRange();
+ // 璁＄畻瓒呭嚭鍗曢〉鏁版嵁閲忕殑闀垮害
+ let len = this.allXAxis.length - this.pageSize;
+ len = len < 0 ? 0 : len;
+ // 瀹氫綅鐐瑰簲璇ュ睍绀哄湪瓒嬪娍鍥句腑闂达紝鍥犳瀹氫綅鐧惧垎姣斿線鍓嶅亸绉诲綋鍓峗size鐨勪竴鍗�
+ let i = nV - parseInt(this.pageSize / 2);
+ // 纭繚绱㈠紩涓嶄細瓒呭嚭鑼冨洿
+ i = i < 0 ? 0 : i;
+ i = i > len ? len : i;
+ // 鑾峰彇绱㈠紩瀵瑰簲鐨勮繘搴︾櫨鍒嗘瘮
+ const _progress = len == 0 ? 0 : (i / len) * 100;
+ if (this.progress != _progress) {
+ this.progress = _progress;
+ } else {
+ this.changeChartRange();
+ }
}
},
methods: {
@@ -119,7 +128,8 @@
},
// 淇敼鍥捐〃灞曠ず鐨勬姌绾垮浘绫诲瀷
changeChartSeries() {
- this.option.series = this.getShowSeries();
+ const { sIndex, eIndex, startPer, endPer } = this.getRange();
+ this.option.series = this.getShowSeries(sIndex, eIndex);
this.lineChart.setOption(this.option, { notMerge: true });
},
changeChartRange() {
@@ -141,9 +151,7 @@
},
getShowSeries(sIndex, eIndex) {
this.allSeries.forEach((s) => {
- if (sIndex && eIndex) {
- s.data = s.allData.slice(sIndex, eIndex);
- }
+ s.data = s.allData.slice(sIndex, eIndex);
});
const res = this.allSeries.filter((s) => {
return this.selectFactorType.includes(s.key);
@@ -155,8 +163,9 @@
len = len < 0 ? 0 : len;
const sIndex = Math.round((len * this.progress) / 100);
const eIndex = sIndex + this.pageSize;
- const startPer = (sIndex / this.allXAxis.length) * 100;
+ const startPer = (this.sIndex / this.allXAxis.length) * 100;
const endPer = (eIndex / this.allXAxis.length) * 100;
+ this.sIndex = sIndex;
return { sIndex, eIndex, startPer, endPer };
}
},
@@ -166,7 +175,7 @@
mounted() {
this.lineChart = echarts.init(this.$refs.lineChart);
this.lineChart.on('click', (e) => {
- this.$emit('chartClick', e.dataIndex);
+ this.$emit('chartClick', this.sIndex + e.dataIndex);
});
}
};
--
Gitblit v1.9.3