1.调整路由;

2.引入axios;

src/module/databoard/components/chart/ar-bar.vue

+<template>
+  <div>
+    <div class="ar_nav">
+      <router-link class="ar_button" to="/ar_bar/company">结算单位</router-link>
+      <router-link class="ar_button" to="/ar_bar/monthly">开票月份</router-link>
+    </div>
+    <router-view style="height: 90%"></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ArBar",
+  data() {
+    return {}
+  },
+}
+
+</script>
+
+<style scoped>
+
+.ar_nav {
+  height: 10%;
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.ar_button {
+  width: 10%;
+  border-radius: 0.5rem;
+  background-image: linear-gradient(to bottom, #0933AD, transparent);
+  padding: 0.5rem;
+  color: white;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 2rem;
+  text-align: center;
+}
+
+</style>

src/module/databoard/components/chart/ar-company-bar.vue

+<template>
+  <div id="ar_company_bar"/>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "ArCompanyBar",
+  data() {
+    return {
+      barChart: {
+        title: {
+          show: true,
+          text: "已开票未收款（结算单位）",
+          left: "center",
+          textStyle: {color: "white"}
+        },
+        textStyle: {
+          color: "#FFFFFF",
+          fontSize: "12"
+        },
+        grid: {
+          containLabel: true,
+          top: "10%",
+          bottom: '10%'
+        },
+        xAxis: {
+          data: ['XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司'],
+          axisLabel: {
+            color: "#FFFFFF",
+            fontSize: "12",
+            interval: 0,
+            rotate: 0
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: [{
+          type: "value",
+          splitLine: {
+            lineStyle: {
+              color: "#1E2C58"
+            }
+          },
+          axisLabel: {
+            show: false,
+            color: "#FFFFFFAA",
+            fontSize: "16"
+          }
+        }],
+        series: [
+          {
+            type: 'bar',
+            data: [25002, 57873, 11987, 71168, 41098, 25002, 57873, 11987, 71168, 41098],
+            barWidth: "40%",
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(255, 255, 255, 0.1)'
+            },
+            itemStyle: {
+              barBorderRadius: 10,
+            },
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 0, y2: 1,
+              colorStops: [
+                {offset: 0, color: '#00CCD2'},
+                {offset: 1, color: '#00A2FF'}
+              ]
+            },
+            label: {
+              show: true,
+              position: 'top',
+              color: "#FFFFFF",
+            },
+          }
+        ]
+      },
+      myChart: null
+    }
+  },
+  methods: {
+    resizeChart() {
+      if (this.myChart) {
+        this.myChart.resize();
+      }
+    },
+  },
+  mounted() {
+    // 设置500毫秒延迟执行，解决组件没有渲染完成就开始绘制图表的问题
+    setTimeout(() => {
+      let arCompanyBar = document.getElementById('ar_company_bar')
+      this.myChart = echarts.init(arCompanyBar)
+      this.myChart.setOption(this.barChart)
+      let that = this
+      this.myChart.on('click', function(params) {
+        that.$router.push({path: '/ar_bar/company', query: {name: params.name}})
+      });
+      // 监听窗口大小变化，重绘图表
+      window.addEventListener('resize', this.resizeChart);
+    }, 500)
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.resizeChart);
+  }
+
+}
+
+</script>

src/module/databoard/components/chart/ar-monthly-bar.vue

+<template>
+  <div id="ar_monthly_bar"/>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "ArMonthlyBar",
+  data() {
+    return {
+      barChart: {
+        title: {
+          show: true,
+          text: "已开票未收款（开票月份）",
+          left: "center",
+          textStyle: {color: "white"}
+        },
+        textStyle: {
+          color: "#FFFFFF",
+          fontSize: "12"
+        },
+        grid: {
+          containLabel: true,
+          top: "10%",
+          bottom: '10%'
+        },
+        xAxis: {
+          data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08',],
+          axisLabel: {
+            color: "#FFFFFF",
+            fontSize: "12",
+            interval: 0,
+            rotate: 0
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: [{
+          type: "value",
+          splitLine: {
+            lineStyle: {
+              color: "#1E2C58"
+            }
+          },
+          axisLabel: {
+            show: false,
+            color: "#FFFFFFAA",
+            fontSize: "16"
+          }
+        }],
+        series: [
+          {
+            type: 'bar',
+            data: [25002, 57873, 71168, 41098, 25002, 57873, 71168, 41098],
+            barWidth: "40%",
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(255, 255, 255, 0.1)'
+            },
+            itemStyle: {
+              barBorderRadius: 10,
+            },
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 0, y2: 1,
+              colorStops: [
+                {offset: 0, color: '#00CCD2'},
+                {offset: 1, color: '#00A2FF'}
+              ]
+            },
+            label: {
+              show: true,
+              position: 'top',
+              color: "#FFFFFF",
+            },
+          }
+        ]
+      },
+      myChart: null
+    }
+  },
+  methods: {
+    resizeChart() {
+      if (this.myChart) {
+        this.myChart.resize();
+      }
+    },
+  },
+  mounted() {
+    // 设置500毫秒延迟执行，解决组件没有渲染完成就开始绘制图表的问题
+    setTimeout(() => {
+      let arCompanyBar = document.getElementById('ar_monthly_bar')
+      this.myChart = echarts.init(arCompanyBar)
+      this.myChart.setOption(this.barChart)
+      let that = this
+      this.myChart.on('click', function(params) {
+        that.$router.push({path: '/ar_bar/monthly', query: {name: params.name}})
+      });
+      // 监听窗口大小变化，重绘图表
+      window.addEventListener('resize', this.resizeChart);
+    }, 500)
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.resizeChart);
+  }
+
+}
+
+</script>

src/module/databoard/components/chart/main-bar-chart.vue → src/module/databoard/components/chart/ar-summary-bar.vue

 <template>
-  <div id="main_bar_chart" @click="goChart"/>
+  <div id="ar_summary_bar" @click="goArBar"/>
 </template>
 
 <script>
 import * as echarts from "echarts";
 
 export default {
-  name: "MainBarChart",
+  name: "ArSummaryBar",
   data() {
     return {
       barChart: {
@@ -14,17 +14,16 @@ export default {
           color: "#FFFFFF",
           fontSize: "12"
         },
-        tooltip: {},
         grid: {
+          containLabel: true,
           top: "10%",
-          bottom: "10%"
+          bottom: '0'
         },
         xAxis: {
           data: ['未结算未开票', '已结算未开票', '已开票未收款', '应收款', '已开票已收款'],
           axisLabel: {
             color: "#FFFFFF",
             fontSize: "12",
-            margin: "15"
           },
           axisTick: {
             show: false
@@ -45,9 +44,8 @@ export default {
         }],
         series: [
           {
-            name: '应收账款',
             type: 'bar',
-            data: [5002, 57873, 1987, 71168, 41098],
+            data: [50002, 57873, 11987, 71168, 41098],
             barWidth: "40%",
             showBackground: true,
             backgroundStyle: {
@@ -76,21 +74,28 @@ export default {
     }
   },
   methods: {
+    goArBar() {
+      this.$router.push({path: "/ar_bar"})
+    },
     resizeChart() {
       if (this.myChart) {
         this.myChart.resize();
       }
-    },
-    goChart() {
-      this.$router.push({path: "/chart"})
     }
   },
   mounted() {
+    // 获取图表数据
+    window.axios.post("/api/query/dash_board/action/get_ar_summary_bar", {
+      headers: {'content-type': 'application/json'}
+    }).then(res => {
+      this.barChart.series[0].data = res.data.data;
+    }).catch(err => {
+      console.log("获取应收账款数据失败", err);
+    });
     // 设置500毫秒延迟执行，解决组件没有渲染完成就开始绘制图表的问题
     setTimeout(() => {
-      let mainBarChart = document.getElementById('main_bar_chart')
-      this.myChart = echarts.init(mainBarChart)
-      this.myChart.setOption(this.barChart);
+      this.arSummaryBar = echarts.init(document.getElementById('ar_summary_bar'))
+      this.arSummaryBar.setOption(this.barChart);
       // 监听窗口大小变化，重绘图表
       window.addEventListener('resize', this.resizeChart);
     }, 500)

src/module/databoard/index.vue

@@ -14,7 +14,7 @@
           <simple-card style="width: 30%;height: 100%">content</simple-card>
           <simple-card style="width: 30%;height: 100%">content</simple-card>
         </div>
-        <main-bar-chart style="width: 100%; height: 64%;"></main-bar-chart>
+        <ar-summary-bar style="width: 100%; height: 64%;"></ar-summary-bar>
       </display-board>
       <display-board class="trade_right" title="账款情况">
         <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
@@ -51,7 +51,7 @@ import DisplayBoard from "./components/container/display-board.vue";
 import Showcase from "./components/container/showcase.vue";
 import ContrastCard from "./components/card/contrast-card.vue";
 import SimpleCard from "./components/card/simple-card.vue";
-import MainBarChart from "./components/chart/main-bar-chart.vue";
+import ArSummaryBar from "./components/chart/ar-summary-bar.vue";
 import WinnersList from "./components/card/winners-list.vue";
 
 export default {
@@ -60,7 +60,7 @@ export default {
     DisplayBoard,
     ContrastCard,
     SimpleCard,
-    MainBarChart,
+    ArSummaryBar,
     WinnersList
   },
   data() {

src/module/index/index.vue

 <template>
   <div class="page">
-    <div class="head">
+    <div class="head" @click="goIndex">
       <div class="text_left">
         <span>2023-08-01</span>
         <span>17:18:29</span>
@@ -15,16 +15,16 @@
 </template>
 
 <script>
+import axios from "axios";
+window.axios = axios
 window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jquery.js')
 require('materialize-css')
 export default {
   name: 'app',
-  //  页面加载之前
-  created() {
-  },
-  //  页面加载后
-  mounted() {
-    this.$router.push("/index");
+  methods: {
+    goIndex() {
+      this.$router.push({path: '/'})
+    }
   }
 }
 </script>

src/module/index/router/index_router.js

 import Vue from 'vue'
 import Router from 'vue-router'
-import Main from '../index.vue'
-import index from '../../databoard/index.vue'
-import MainBarChart from "../../databoard/components/chart/main-bar-chart.vue";
+import Index from '../../databoard/index.vue'
+import ArBar from "../../databoard/components/chart/ar-bar.vue";
+import ArCompanyBar from "../../databoard/components/chart/ar-company-bar.vue";
+import ArMonthlyBar from "../../databoard/components/chart/ar-monthly-bar.vue";
 import WinnersList from "../../databoard/components/card/winners-list.vue";
 
 Vue.use(Router)
@@ -11,18 +12,42 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'index',
-      component: Main
+      redirect: '/index'
     },
     {
       path: '/index',
       name: 'index',
-      component: index
+      component: Index
+    },
+    {
+      path: '/ar_bar',
+      component: ArBar,
+      children: [
+        {
+          path: '/ar_bar',
+          redirect: '/ar_bar/company'
+        },
+        {
+          path: '/ar_bar/company',
+          name: 'arCompanyBar',
+          component: ArCompanyBar
+        },
+        {
+          path: '/ar_bar/monthly',
+          name: 'arMonthlyBar',
+          component: ArMonthlyBar
+        }
+      ]
+    },
+    {
+      path: '/ar_company_bar',
+      name: 'arCompanyBar',
+      component: ArCompanyBar
     },
     {
-      path: '/chart',
-      name: 'chart',
-      component: MainBarChart
+      path: '/ar_monthly_bar',
+      name: 'arMonthlyBar',
+      component: ArMonthlyBar
     },
     {
       path: '/winner_list',