diff --git a/src/service/api/statistics.ts b/src/service/api/statistics.ts index 58e2cc4..8cc031b 100644 --- a/src/service/api/statistics.ts +++ b/src/service/api/statistics.ts @@ -122,3 +122,12 @@ export function factoryStatisticsApi(params: {from: string | null, to: string | params }); } + +// 统计报表 +export function reportStatisticsApi(params: {from: string | null, to: string | null}) { + return request({ + url: `/api/reports/admin-center`, + method: 'get', + params + }); +} diff --git a/src/views/report/index.vue b/src/views/report/index.vue index 5dd4c92..6759e19 100644 --- a/src/views/report/index.vue +++ b/src/views/report/index.vue @@ -1,599 +1,610 @@ diff --git a/src/views/report/modules/columnChart.vue b/src/views/report/modules/columnChart.vue index 0e5f285..0638180 100644 --- a/src/views/report/modules/columnChart.vue +++ b/src/views/report/modules/columnChart.vue @@ -6,7 +6,7 @@ defineOptions({ name: 'RingChart' }); -const props = defineProps<{ data: { name: string; value: number; }[]; }>(); +const props = defineProps<{ data: { org_name: string; count: number; }[]; }>(); const { domRef, updateOptions } = useEcharts(() => ({ tooltip: { @@ -30,9 +30,9 @@ const { domRef, updateOptions } = useEcharts(() => ({ }, }, grid: { - top: "5%", - left: "5%", - right: "5%", + top: "10%", + left: 0, + right: 0, bottom: "11%", }, calculable: true, @@ -44,7 +44,8 @@ const { domRef, updateOptions } = useEcharts(() => ({ show: false, }, axisLabel: { - interval: 0, + interval: 'auto', + hideOverlap: true }, splitLine: { show: false }, axisTick: { show: false }, @@ -72,8 +73,8 @@ const { domRef, updateOptions } = useEcharts(() => ({ function init() { updateOptions(opts => { - let allMonth = props.data.map((item:any) => item.name); - let values = props.data.map((item:any) => item.value); + let allMonth = props.data.map((item:any) => item.org_name); + let values = props.data.map((item:any) => item.count); opts.xAxis[0].data = allMonth; opts.series[0].data = values; return opts; diff --git a/src/views/report/modules/ringChart.vue b/src/views/report/modules/ringChart.vue index e8e23a8..82cd355 100644 --- a/src/views/report/modules/ringChart.vue +++ b/src/views/report/modules/ringChart.vue @@ -6,7 +6,8 @@ defineOptions({ name: 'RingChart' }); -const props = defineProps<{ data?: { name: string; value: number }[]; colors?: string[] }>(); +const props = defineProps<{ data?: { name: string; value: number }[]; }>(); +const chartData = ref<{ name: string; value: number; }[]>([]); const { domRef, updateOptions } = useEcharts(() => ({ tooltip: { @@ -22,6 +23,25 @@ const { domRef, updateOptions } = useEcharts(() => ({ itemStyle: { borderWidth: 0 }, + textStyle: { + rich: { + name: { + padding: [0, 0, 0, 0], + }, + count: { + padding: [0, 0, 0, 5], + fontWeight: 600, + }, + } + }, + formatter: function (name: string) { + var info = chartData.value?.find((item: { name: string }) => item.name === name); + if(info){ + return '{name|'+name+'} {count|'+(info.value)+'}'; + }else{ + return name; + } + } }, title: { text: `{a|126}\n{b|总数}`, @@ -50,7 +70,7 @@ const { domRef, updateOptions } = useEcharts(() => ({ series: [ { type: 'pie', - color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'], + color: ["#2080f0", "#7CC242", "#F5A623"], radius: ['45%', '65%'], center: ['50%', '45%'], avoidLabelOverlap: false, @@ -72,8 +92,14 @@ const { domRef, updateOptions } = useEcharts(() => ({ function init() { updateOptions(opts => { - opts.series[0].data = props.data || []; - opts.series[0].color = props.colors || []; + const total = props.data?.reduce((sum:number, item:any) => sum + item.count, 0); + const result:any = props.data?.map((item:any) => ({ + name: item.label, + value: item.count, + })); + chartData.value = result || []; + opts.title.text = `{a|${total}}\n{b|总数}`; + opts.series[0].data = result || []; return opts; }); }