parent
cd2ecc1ef5
commit
d77fa4b624
@ -0,0 +1,208 @@
|
|||||||
|
<template>
|
||||||
|
<div class="chart-container">
|
||||||
|
<!-- 自定义标题 -->
|
||||||
|
<div class="custom-title">项目投资趋势</div>
|
||||||
|
|
||||||
|
<!-- 筛选区域 -->
|
||||||
|
<div class="filter-bar">
|
||||||
|
<!-- 年份 -->
|
||||||
|
<el-date-picker v-model="years" type="year" value-format="yyyy" placeholder="选择年份"
|
||||||
|
@change="fetchData"></el-date-picker>
|
||||||
|
|
||||||
|
<!-- 年度/季度 -->
|
||||||
|
<el-select v-model="type" placeholder="选择类型" @change="fetchData">
|
||||||
|
<el-option label="年度统计" :value="1"></el-option>
|
||||||
|
<el-option label="季度统计" :value="2"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 折线图容器 -->
|
||||||
|
<div ref="lineChart" style="width: 110%; height: 400px;"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import { fetchInvestmentData } from '@/api/ManageApi/index';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'YueDuTouZi',
|
||||||
|
props: {
|
||||||
|
xmId: {
|
||||||
|
type: Number,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
type: 1,
|
||||||
|
years: new Date().getFullYear().toString(),
|
||||||
|
chartOption: {
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['月投资额', '月投资比例', '累计投资额']
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: []
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '月投资额',
|
||||||
|
type: 'line',
|
||||||
|
data: [],
|
||||||
|
smooth: true,
|
||||||
|
itemStyle: { color: '#4CAF50' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '累计投资额',
|
||||||
|
type: 'line',
|
||||||
|
data: [],
|
||||||
|
smooth: true,
|
||||||
|
itemStyle: { color: '#2B62F1' }
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '月投资比例',
|
||||||
|
type: 'line',
|
||||||
|
data: [],
|
||||||
|
smooth: true,
|
||||||
|
itemStyle: { color: '#FF9800' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initChart();
|
||||||
|
this.fetchData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
this.chart = echarts.init(this.$refs.lineChart);
|
||||||
|
this.chart.setOption(this.chartOption);
|
||||||
|
},
|
||||||
|
async fetchData() {
|
||||||
|
try {
|
||||||
|
const params = {
|
||||||
|
xmId: this.xmId,
|
||||||
|
type: this.type
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.years) {
|
||||||
|
params.years = this.years;
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await fetchInvestmentData(params);
|
||||||
|
|
||||||
|
if (res.code === 200 && Array.isArray(res.data)) {
|
||||||
|
let categories = [];
|
||||||
|
let seriesData = [];
|
||||||
|
|
||||||
|
if (this.type === 1) {
|
||||||
|
// 年度模式
|
||||||
|
const months = Array.from({ length: 12 }, (_, i) => `${i + 1}月`);
|
||||||
|
const dataMap = res.data.reduce((acc, item) => {
|
||||||
|
const month = item.month ? parseInt(item.month.split('-')[1]) : -1;
|
||||||
|
if (month >= 1 && month <= 12) {
|
||||||
|
acc[month] = item;
|
||||||
|
}
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
|
||||||
|
categories = months;
|
||||||
|
|
||||||
|
const ytzeData = months.map((_, index) => dataMap[index + 1]?.ytze ?? 0);
|
||||||
|
const ljtzeData = months.map((_, index) => dataMap[index + 1]?.ljtze ?? 0);
|
||||||
|
const ytzblData = months.map((_, index) => dataMap[index + 1]?.ytzbl ?? 0);
|
||||||
|
|
||||||
|
seriesData = [
|
||||||
|
{ name: '月投资额', type: 'line', data: ytzeData, itemStyle: { color: '#4CAF50' } },
|
||||||
|
{ name: '累计投资额', type: 'line', data: ljtzeData, itemStyle: { color: '#2B62F1' } },
|
||||||
|
{ name: '月投资比例', type: 'line', data: ytzblData, itemStyle: { color: '#FF9800' } }
|
||||||
|
];
|
||||||
|
} else if (this.type === 2) {
|
||||||
|
// 季度模式
|
||||||
|
const quarters = ['第一季度', '第二季度', '第三季度', '第四季度'];
|
||||||
|
const dataMap = {};
|
||||||
|
|
||||||
|
res.data.forEach(item => {
|
||||||
|
if (item.jd >= 1 && item.jd <= 4) {
|
||||||
|
dataMap[item.jd] = item;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
categories = quarters;
|
||||||
|
const jdtzeData = quarters.map((_, idx) => dataMap[idx + 1]?.jdtze ?? 0);
|
||||||
|
|
||||||
|
seriesData = [
|
||||||
|
{ name: '季度投资额', type: 'line', data: jdtzeData, itemStyle: { color: '#2B62F1' } }
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chart.setOption({
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: this.type === 1 ? ['月投资额', '累计投资额', '月投资比例'] : ['季度投资额']
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: categories
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: seriesData
|
||||||
|
}, true);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取投资数据失败:', error);
|
||||||
|
this.$message.error('获取数据失败');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.dispose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.chart-container {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-title {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 97%;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue