open-platform-admin-ui/src/views/dashboard/index.vue

<template>
  <div class="dashboard-container">
    <PanelGroup
      :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; 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 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>
  </div>
</template>

<script>
import PanelGroup from './PanelGroup'
import { dashboard } from '@/api/dashboard'
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  components: { PanelGroup },
  data() {
    return {
      dashboardData: {}
    }
  },
  mounted() {
    const _this = this
    dashboard().then(v => {
      _this.dashboardData = v
      _this.buildRequestLogPie(this.dashboardData.requestLogPieData)
      _this.buildRequestLogLine(this.dashboardData.requestLogLineData)
    })
  },
  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>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>