<template>
|
<BaseCard size="medium">
|
<template #content>
|
<div ref="lineChart" class="line-chart"></div>
|
</template>
|
<template #footer>
|
<!-- 单页数据量-->
|
<SliderBar
|
@input="(e) => (progress = e)"
|
@size-change="(e) => (pageSize = e)"
|
></SliderBar>
|
</template>
|
</BaseCard>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
import { FactorDatas } from '@/model/FactorDatas';
|
import { factorName } from '@/constant/factor-name';
|
import { factorLineOption } from '@/utils/chart/chart-option';
|
|
export default {
|
props: {
|
factorDatas: {
|
type: FactorDatas
|
// default: () => new FactorDatas()
|
},
|
selectFactorType: {
|
type: Array,
|
default: () => ['1']
|
}
|
},
|
data() {
|
return {
|
allXAxis: [],
|
allSeries: [],
|
option: null,
|
pageSize: 200,
|
progress: 0
|
};
|
},
|
watch: {
|
factorDatas: {
|
handler() {
|
this.initData();
|
this.changeChartRange();
|
},
|
deep: true
|
},
|
selectFactorType: {
|
handler() {
|
this.changeChartSeries();
|
}
|
},
|
progress() {
|
this.changeChartRange();
|
},
|
pageSize() {
|
this.changeChartRange();
|
}
|
},
|
methods: {
|
initData() {
|
this.allXAxis = this.factorDatas.times.map((v) => {
|
return v.split(' ')[1];
|
});
|
const res = [];
|
for (const key in this.factorDatas.factor) {
|
if (Object.hasOwnProperty.call(this.factorDatas.factor, key)) {
|
const e = this.factorDatas.factor[key];
|
res.push({
|
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) {
|
return idx * 10;
|
}
|
});
|
}
|
}
|
this.allSeries = res;
|
},
|
// 修改图表展示的折线图类型
|
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;
|
},
|
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;
|
});
|
}
|
},
|
beforeUnmount() {
|
// this.$refs.lineChart && this.$refs.lineChart.clear();
|
},
|
mounted() {
|
this.lineChart = echarts.init(this.$refs.lineChart);
|
}
|
};
|
</script>
|
<style scoped>
|
.line-chart {
|
/* width: 200px; */
|
height: 280px;
|
}
|
</style>
|
