统计报表页面完成

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
+  });
+}

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%",
+        top: "10%",
-        left: "5%",
+        left: 0,
-        right: "5%",
+        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 allMonth = props.data.map((item:any) => item.org_name);
-    let values = props.data.map((item:any) => item.value);
+    let values = props.data.map((item:any) => item.count);
     opts.xAxis[0].data = allMonth;
     opts.series[0].data = values;
     return opts;

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 || [];
+    const total = props.data?.reduce((sum:number, item:any) => sum + item.count, 0);
-    opts.series[0].color = props.colors || [];
+    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;
   });
 }