饼状报表展示

src/api/basic.js

@@ -33,4 +33,13 @@ export function deleteMenu(id) {
         url: `/basic/menu/${id}/`,
         method: 'delete',
     })
-}
+}
+
+// 获取统计报表api
+export function getStatistics(params) {
+    return request({
+        url: '/basic/statistics/',
+        method: 'get',
+        params
+    })
+}

src/router/index.js

@@ -39,6 +39,16 @@ export const constantRoutes = [
         name: 'map',
         title: '温州地图',
         component: () => import('@/views/map/wenzhou_map')
+    }, {
+        path: '/map',
+        name: 'map',
+        title: '温州地图',
+        component: () => import('@/views/map/wenzhou_map')
+    }, {
+        path: '/zctjbb',
+        name: 'zctjbb',
+        title: '支出统计报表',
+        component: () => import('@/views/zctjbb/zctjbb')
     }
 
 

src/views/zctjbb/zctjbb.vue

@@ -0,0 +1,74 @@
+<template>
+  <div id="main" class="main"></div>
+</template>
+
+<script>
+import echarts from "echarts";
+import { getStatistics } from "@/api/basic";
+export default {
+  data() {
+    return {
+      option: {
+        legend: {
+          orient: "vertical", // 排列方向
+          left: "left", // 靠左
+          top: "center",
+          data: [],
+        },
+        tooltip: {
+          // 鼠标放上去会显示值
+          trigger: "item", // 区域名字
+          formatter: (params) => {
+            return `
+              总金额：${params.value[0]} <br/>
+              总个数：${params.value[1]}
+          	`;
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            data: [],
+            left: "right",
+            roseType: "radius",
+            width: "70%",
+            selectedMode: "single",
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    getStatistics({}).then((res) => {
+      let data = res.data;
+      this.option.legend.data = data.map((v) => {
+        return v.payment_type;
+      });
+      this.option.series[0].data = data.map((v) => {
+        return {
+          name: v.payment_type,
+          value: [v.price_sum, v.payment_type_count],
+        };
+      });
+      this.initPie();
+    });
+  },
+  methods: {
+    initPie() {
+      console.log(this.option);
+      var Pie = echarts.init(document.getElementById("main"));
+      Pie.setOption(this.option);
+      Pie.on("click", (params) => {
+        console.log("点击图标内容", params);
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.main {
+  width: 100vh;
+  height: 100vh;
+}
+</style>