统计图表页面
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>
|
||||
企业信息饼状图分析
|
||||
<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>
|
||||
|
||||
<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