From 026f17ebafb85250d9ae9b71b80ae5f07341c172 Mon Sep 17 00:00:00 2001
From: feiyu02 <risaku@163.com>
Date: 星期四, 15 五月 2025 16:33:12 +0800
Subject: [PATCH] 动态溯源功能初步完成
---
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