From c4e9d054916c3f085329a67c7664b4c54f9137f9 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 07 五月 2024 17:36:09 +0800
Subject: [PATCH] 完成折线图相关功能的迁移
---
src/components/monitor/LineChart.vue | 105 ++++++++++++++++++++++++++++++++++------------------
1 files changed, 69 insertions(+), 36 deletions(-)
diff --git a/src/components/monitor/LineChart.vue b/src/components/monitor/LineChart.vue
index ccaa3e2..612cb61 100644
--- a/src/components/monitor/LineChart.vue
+++ b/src/components/monitor/LineChart.vue
@@ -5,7 +5,10 @@
</template>
<template #footer>
<!-- 鍗曢〉鏁版嵁閲�-->
- <SliderBar></SliderBar>
+ <SliderBar
+ @input="(e) => (progress = e)"
+ @size-change="(e) => (pageSize = e)"
+ ></SliderBar>
</template>
</BaseCard>
</template>
@@ -29,37 +32,38 @@
},
data() {
return {
- lineChart: null,
- option: null
+ allXAxis: [],
+ allSeries: [],
+ option: null,
+ pageSize: 200,
+ progress: 0
};
},
watch: {
factorDatas: {
handler() {
- this.refreshChart();
+ this.initData();
+ this.changeChartRange();
},
deep: true
},
selectFactorType: {
handler() {
- this.refreshChart();
- },
- deep: true
+ this.changeChartSeries();
+ }
+ },
+ progress() {
+ this.changeChartRange();
+ },
+ pageSize() {
+ this.changeChartRange();
}
},
- computed: {
- /**
- * 鑾峰彇妯潗鏍�
- */
- xAxis() {
- return this.factorDatas.times.map((v) => {
+ methods: {
+ initData() {
+ this.allXAxis = this.factorDatas.times.map((v) => {
return v.split(' ')[1];
});
- },
- /**
- * 鑾峰彇鐩戞祴鏁版嵁绾靛潗鏍�
- */
- allSeries() {
const res = [];
for (const key in this.factorDatas.factor) {
if (Object.hasOwnProperty.call(this.factorDatas.factor, key)) {
@@ -68,6 +72,7 @@
key: key,
name: factorName[e.factorName],
type: 'line',
+ allData: e.datas.map((v) => v.factorData),
data: e.datas.map((v) => v.factorData),
showAllSymbol: true,
animationDelay: function (idx) {
@@ -76,34 +81,62 @@
});
}
}
- return res;
+ this.allSeries = res;
},
- showSeries() {
- return this.allSeries.filter((s) => {
+ // 淇敼鍥捐〃灞曠ず鐨勬姌绾垮浘绫诲瀷
+ changeChartSeries() {
+ this.option.series = this.getShowSeries();
+ this.option.legend.data = this.getLegends(this.option.series);
+ this.lineChart.setOption(this.option, { notMerge: true });
+ },
+ changeChartRange() {
+ const { sIndex, eIndex, startPer, endPer } = this.getRange();
+ const showSeries = this.getShowSeries(sIndex, eIndex);
+ const xAxis = this.getShowXAxis(sIndex, eIndex);
+ const legends = this.getLegends(showSeries);
+ if (!this.option) {
+ this.option = factorLineOption(xAxis, showSeries, legends);
+ } else {
+ this.option.xAxis.data = xAxis;
+ this.option.series = showSeries;
+ this.option.legend.data = legends;
+ }
+ // this.option.dataZoom[0].start = startPer;
+ // this.option.dataZoom[0].end = endPer;
+ this.lineChart.setOption(this.option);
+ },
+ getShowXAxis(sIndex, eIndex) {
+ return this.allXAxis.slice(sIndex, eIndex);
+ },
+ getShowSeries(sIndex, eIndex) {
+ const res = this.allSeries.filter((s) => {
+ if (sIndex && eIndex) {
+ s.data = s.allData.slice(sIndex, eIndex);
+ }
return this.selectFactorType.includes(s.key);
});
+ return res;
},
- legends() {
- return this.showSeries.map((s) => {
+ getRange() {
+ let len = this.allXAxis.length - this.pageSize;
+ 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 endPer = (eIndex / this.allXAxis.length) * 100;
+ return { sIndex, eIndex, startPer, endPer };
+ },
+ getLegends(series) {
+ return series.map((s) => {
return s.name;
});
}
},
- methods: {
- initChart() {
- this.lineChart = echarts.init(this.$refs.lineChart);
- },
- refreshChart() {
- const option = factorLineOption(
- this.xAxis,
- this.showSeries,
- this.legends
- );
- this.lineChart.setOption(option, { notMerge: true });
- }
+ beforeUnmount() {
+ // this.$refs.lineChart && this.$refs.lineChart.clear();
},
mounted() {
- this.initChart();
+ this.lineChart = echarts.init(this.$refs.lineChart);
}
};
</script>
--
Gitblit v1.9.3