update

src/views/dashboard/index.vue

@@ -1,22 +1,24 @@
 <template>
   <div class="dashboard-container">
     <PanelGroup
-      :service-method-handler-count="data.serviceMethodHandlerCount || 0"
-      :app-key-count="data.appKeyCount || 0"
-      :place-count="data.placeCount || 0"
-      :file-count="data.fileCount || 0"
+      :service-method-handler-count="dashboardData.serviceMethodHandlerCount || 0"
+      :app-key-count="dashboardData.appKeyCount || 0"
+      :place-count="dashboardData.placeCount || 0"
+      :file-count="dashboardData.fileCount || 0"
     />
     <el-card>
       <div slot="header" class="clearfix">
         <span>API统计</span>
-        <div style="float: right; color: #666666">
-          详情
+        <div style="float: right; font-size: 12px">
+          <a type="text" href="javascript:;" @click="$router.push({ path: '/appKey/requestLogs' })">详情>></a>
         </div>
       </div>
       <el-row :gutter="16">
         <el-col :span="8">
-          <div slot="header">性别</div>
-          <div id="gender-box" style="width: 100%;height:200px;" />
+          <div id="request-log-pie" style="width: 100%;height:300px;"/>
+        </el-col>
+        <el-col :span="16">
+          <div id="request-log-line" style="width: 100%;height:300px;"/>
         </el-col>
       </el-row>
     </el-card>
@@ -26,21 +28,105 @@
 <script>
 import PanelGroup from './PanelGroup'
 import { dashboard } from '@/api/dashboard'
+import * as echarts from 'echarts'
 
 export default {
   name: 'Dashboard',
   components: { PanelGroup },
   data() {
     return {
-      data: {}
+      dashboardData: {}
     }
   },
-  created() {
+  mounted() {
+    const _this = this
     dashboard().then(v => {
-      this.data = v
+      _this.dashboardData = v
+      _this.buildRequestLogPie(this.dashboardData.requestLogPieData)
+      _this.buildRequestLogLine(this.dashboardData.requestLogLineData)
     })
   },
-  method: {}
+  methods: {
+    gotoPage(redirect) {
+      console.log(redirect)
+      this.$router.push({ path: redirect })
+
+      // this.$router.(redirect)
+    },
+    buildRequestLogLine(requestLogPieData) {
+      console.log(requestLogPieData)
+      const xAxis = []
+      requestLogPieData.forEach(o => {
+        xAxis.push(o.d)
+      })
+
+      const chart = echarts.init(document.getElementById('request-log-line'))
+      chart.setOption({
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '0',
+          right: '1%'
+        },
+        grid: {
+          left: '5%',
+          right: '1%',
+          bottom: '6%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxis
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: '请求次数',
+            type: 'line',
+            data: requestLogPieData
+          }
+        ]
+      })
+    },
+    buildRequestLogPie(requestLogPieData) {
+      console.log(requestLogPieData)
+
+      const chart = echarts.init(document.getElementById('request-log-pie'))
+      chart.setOption({
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '0',
+          left: '0'
+        },
+        grid: {
+          //   left: '8%',
+          //   right: '10%',
+          //   bottom: '1%',
+          //   containLabel: true
+        },
+        series: [
+          {
+            name: '请求次数',
+            type: 'pie',
+            radius: ['40%', '60%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            data: requestLogPieData
+          }
+        ]
+      })
+    }
+  }
 }
 </script>