统计图表页面
This commit is contained in:
xue
parent
c9432479fa
commit
e52b52c0e9
|
|
@ -0,0 +1,247 @@
|
||||||
|
import { EChartsOption } from 'echarts'
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
//月度
|
||||||
|
export const lmonthlData: EChartsOption = {
|
||||||
|
title: {
|
||||||
|
text: t('analysis.monthlStatistics'),
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: [
|
||||||
|
t('analysis.january'),
|
||||||
|
t('analysis.february'),
|
||||||
|
t('analysis.march'),
|
||||||
|
t('analysis.april'),
|
||||||
|
t('analysis.may'),
|
||||||
|
t('analysis.june'),
|
||||||
|
t('analysis.july'),
|
||||||
|
t('analysis.august'),
|
||||||
|
t('analysis.september'),
|
||||||
|
t('analysis.october'),
|
||||||
|
t('analysis.november'),
|
||||||
|
t('analysis.december')
|
||||||
|
],
|
||||||
|
boundaryGap: false,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 20,
|
||||||
|
right: 20,
|
||||||
|
bottom: 20,
|
||||||
|
top: 80,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross'
|
||||||
|
},
|
||||||
|
padding: [5, 10]
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: [t('analysis.value')],
|
||||||
|
top: 50
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: t('analysis.value'),
|
||||||
|
smooth: true,
|
||||||
|
type: 'line',
|
||||||
|
data: [],
|
||||||
|
animationDuration: 2800,
|
||||||
|
animationEasing: 'cubicInOut'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
//季度
|
||||||
|
export const lquarterData: EChartsOption = {
|
||||||
|
title: {
|
||||||
|
text: t('analysis.quarterStatistics'), // 修改标题为月度注册人数
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: [
|
||||||
|
t('analysis.quarterOne'),
|
||||||
|
t('analysis.quarterTwo'),
|
||||||
|
t('analysis.quarterThree'),
|
||||||
|
t('analysis.quarterFour')
|
||||||
|
], // 后端接口获取的月份数据将填充在这里
|
||||||
|
boundaryGap: false,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 20,
|
||||||
|
right: 20,
|
||||||
|
bottom: 20,
|
||||||
|
top: 80,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross'
|
||||||
|
},
|
||||||
|
padding: [5, 10]
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: [t('analysis.value')],
|
||||||
|
top: 50
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: t('analysis.value'),
|
||||||
|
smooth: true,
|
||||||
|
type: 'line',
|
||||||
|
data: [], // 后端接口获取的预估注册人数数据将填充在这里
|
||||||
|
animationDuration: 2800,
|
||||||
|
animationEasing: 'cubicInOut'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 年度
|
||||||
|
export const lyearData : EChartsOption = {
|
||||||
|
title: {
|
||||||
|
text: t('analysis.yearStatistics'), // 修改标题为月度注册人数
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: [
|
||||||
|
t('analysis.year20'),
|
||||||
|
t('analysis.year21'),
|
||||||
|
t('analysis.year22'),
|
||||||
|
t('analysis.year23'),
|
||||||
|
t('analysis.year24'),
|
||||||
|
t('analysis.year25'),
|
||||||
|
t('analysis.year26'),
|
||||||
|
t('analysis.year27'),
|
||||||
|
t('analysis.year28'),
|
||||||
|
t('analysis.year29'),
|
||||||
|
t('analysis.year30'),
|
||||||
|
],
|
||||||
|
boundaryGap: false,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 20,
|
||||||
|
right: 20,
|
||||||
|
bottom: 20,
|
||||||
|
top: 80,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross'
|
||||||
|
},
|
||||||
|
padding: [5, 10]
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: [t('analysis.value')],
|
||||||
|
top: 50
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: t('analysis.value'),
|
||||||
|
smooth: true,
|
||||||
|
type: 'line',
|
||||||
|
data: [], // 后端接口获取的预估注册人数数据将填充在这里
|
||||||
|
animationDuration: 2800,
|
||||||
|
animationEasing: 'cubicInOut'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
export const EnterpriseData: EChartsOption = {
|
||||||
|
title: {
|
||||||
|
text: t('analysis.enterpriseData'),
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'left',
|
||||||
|
data: [
|
||||||
|
t('analysis.greatEnterprise'),
|
||||||
|
t('analysis.centreEnterprise'),
|
||||||
|
t('analysis.smallEnterprise')
|
||||||
|
]
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: t('analysis.value'),
|
||||||
|
type: 'pie',
|
||||||
|
radius: '55%',
|
||||||
|
center: ['50%', '60%'],
|
||||||
|
data: []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
//审核状态统计
|
||||||
|
export const lauditStatusData: EChartsOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: '5%',
|
||||||
|
left: 'center',
|
||||||
|
data:[
|
||||||
|
t('analysis.running'),
|
||||||
|
t('analysis.approve'),
|
||||||
|
t('analysis.reject'),
|
||||||
|
t('analysis.cancel')
|
||||||
|
]
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Access From',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 40,
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -1,11 +1,219 @@
|
||||||
<script setup lang="ts">
|
<!--企业信息饼状图分析-->
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
企业信息饼状图分析
|
<el-row class="mt-8px" :gutter="8" justify="space-between">
|
||||||
|
<el-col :xl="16" :lg="32" :md="32" :sm="24" :xs="24" class="mb-8px">
|
||||||
|
<el-card shadow="never" class="mt-8px">
|
||||||
|
<el-skeleton :loading="loading" animated>
|
||||||
|
<el-row :gutter="20" justify="space-between">
|
||||||
|
<!-- 第一个饼图-->
|
||||||
|
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12">
|
||||||
|
<el-card shadow="hover" class="mb-8px">
|
||||||
|
<el-skeleton :loading="loading" animated>
|
||||||
|
<Echart :options="enterpriseData" :height="280" />
|
||||||
|
</el-skeleton>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<!-- 第二个饼图-->
|
||||||
|
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12">
|
||||||
|
<el-card shadow="hover" class="mb-8px">
|
||||||
|
<el-skeleton :loading="loading" animated>
|
||||||
|
<Echart :options="auditStatusData" :height="280" />
|
||||||
|
</el-skeleton>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<!-- 月度企业统计 -->
|
||||||
|
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12">
|
||||||
|
<el-card shadow="hover" class="mb-8px">
|
||||||
|
<el-skeleton :loading="loading" animated>
|
||||||
|
<Echart :options="monthlData" :height="280" />
|
||||||
|
</el-skeleton>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<!-- 季度企业统计 -->
|
||||||
|
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12">
|
||||||
|
<el-card shadow="hover" class="mb-8px">
|
||||||
|
<el-skeleton :loading="loading" animated>
|
||||||
|
<Echart :options="quarterData" :height="280" />
|
||||||
|
</el-skeleton>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-skeleton>
|
||||||
|
<!-- 年度度企业统计（自己一行）-->
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
|
||||||
|
<el-card shadow="hover" class="mb-8px">
|
||||||
|
<el-skeleton :loading="loading" animated>
|
||||||
|
<Echart :options="yearData" :height="280" />
|
||||||
|
</el-skeleton>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<script lang="ts" setup>
|
||||||
|
import {EChartsOption} from "echarts";
|
||||||
|
import {EnterpriseData, lmonthlData, lquarterData, lyearData, lauditStatusData} from './echarts-data'
|
||||||
|
import { set } from 'lodash-es'
|
||||||
|
import {pieOptions} from "@/views/Home/echarts-data";
|
||||||
|
import {EnterprisestatisticsApi} from "@/api/fta/enterprisestatistics";
|
||||||
|
const { t } = useI18n()
|
||||||
|
const loading = ref(true)
|
||||||
|
|
||||||
|
defineOptions({ name: 'enterprisestatistics' })
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//月度monthl
|
||||||
|
const monthlData = reactive<EChartsOption>(lmonthlData) as EChartsOption
|
||||||
|
// 季度quarter
|
||||||
|
const quarterData = reactive<EChartsOption>(lquarterData) as EChartsOption
|
||||||
|
// 年度year
|
||||||
|
const yearData = reactive<EChartsOption>(lyearData) as EChartsOption
|
||||||
|
//企业类型统计(大型企业great enterprise、中型企业centre enterprise、小型企业small enterprise)
|
||||||
|
const enterpriseData = reactive<EChartsOption>(EnterpriseData) as EChartsOption
|
||||||
|
//审核状态统计()
|
||||||
|
const auditStatusData = reactive<EChartsOption>(lauditStatusData) as EChartsOption
|
||||||
|
|
||||||
|
//月度
|
||||||
|
const getMonthlData = async () => {
|
||||||
|
try {
|
||||||
|
const data = await EnterprisestatisticsApi.getMonthl();
|
||||||
|
// 确保数据格式与之前的假数据一致
|
||||||
|
if (!Array.isArray(data)) {
|
||||||
|
throw new Error('Invalid data format received from API');
|
||||||
|
}
|
||||||
|
|
||||||
|
set(
|
||||||
|
monthlData,
|
||||||
|
'xAxis.data',
|
||||||
|
data.map((v) => t(v.name))
|
||||||
|
);
|
||||||
|
set(monthlData, 'series', [
|
||||||
|
{
|
||||||
|
name: t('analysis.value'),
|
||||||
|
smooth: true,
|
||||||
|
type: 'line',
|
||||||
|
data: data.map((v) => v.value),
|
||||||
|
animationDuration: 2800,
|
||||||
|
animationEasing: 'cubicInOut'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch monthly data:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
//季度
|
||||||
|
const getQuarterData = async () => {
|
||||||
|
try {
|
||||||
|
const data = await EnterprisestatisticsApi.getQuarter();
|
||||||
|
// 确保数据格式与之前的假数据一致
|
||||||
|
if (!Array.isArray(data)) {
|
||||||
|
throw new Error('Invalid data format received from API');
|
||||||
|
}
|
||||||
|
set(
|
||||||
|
quarterData,
|
||||||
|
'xAxis.data',
|
||||||
|
data.map((v) => t(v.name))
|
||||||
|
)
|
||||||
|
set(quarterData, 'series', [
|
||||||
|
{
|
||||||
|
name: t('analysis.value'),
|
||||||
|
smooth: true,
|
||||||
|
type: 'line',
|
||||||
|
data: data.map((v) => v.value),
|
||||||
|
animationDuration: 2800,
|
||||||
|
animationEasing: 'cubicInOut'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch monthly data:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 年度
|
||||||
|
const getYearData = async () => {
|
||||||
|
try {
|
||||||
|
const data = await EnterprisestatisticsApi.getYear();
|
||||||
|
console.log('-------------2------',data);
|
||||||
|
// 确保数据格式与之前的假数据一致
|
||||||
|
if (!Array.isArray(data)) {
|
||||||
|
throw new Error('Invalid data format received from API');
|
||||||
|
}
|
||||||
|
set(
|
||||||
|
yearData,
|
||||||
|
'xAxis.data',
|
||||||
|
data.map((v) => t(v.name))
|
||||||
|
)
|
||||||
|
set(yearData, 'series', [
|
||||||
|
{
|
||||||
|
name: t('analysis.value'),
|
||||||
|
smooth: true,
|
||||||
|
type: 'line',
|
||||||
|
data: data.map((v) => v.value),
|
||||||
|
animationDuration: 2800,
|
||||||
|
animationEasing: 'cubicInOut'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch monthly data:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
//企业类型统计
|
||||||
|
const getEnterprise = async () => {
|
||||||
|
const data = await EnterprisestatisticsApi.getEnterpriseData();
|
||||||
|
if (!Array.isArray(data)) {
|
||||||
|
throw new Error('Invalid data format received from API');
|
||||||
|
}
|
||||||
|
set(
|
||||||
|
enterpriseData,
|
||||||
|
'legend.data',
|
||||||
|
data.map((v) => t(v.name))
|
||||||
|
)
|
||||||
|
enterpriseData!.series![0].data = data.map((v) => {
|
||||||
|
return {
|
||||||
|
name: t(v.name),
|
||||||
|
value: v.value
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//审核状态统计
|
||||||
|
const getAuditStatus= async () => {
|
||||||
|
|
||||||
|
const data = await EnterprisestatisticsApi.getAuditStatusData();
|
||||||
|
set(
|
||||||
|
auditStatusData,
|
||||||
|
'legend.data',
|
||||||
|
data.map((v) => t(v.name))
|
||||||
|
)
|
||||||
|
auditStatusData!.series![0].data = data.map((v) => {
|
||||||
|
return {
|
||||||
|
name: t(v.name),
|
||||||
|
value: v.value
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const getAllApi = async () => {
|
||||||
|
await Promise.all([
|
||||||
|
getMonthlData(),
|
||||||
|
getQuarterData(),
|
||||||
|
getYearData(),
|
||||||
|
getEnterprise(),
|
||||||
|
getAuditStatus()
|
||||||
|
])
|
||||||
|
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
getAllApi()
|
||||||
|
</script>
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue