dangxingjiaoyujidi-web/src/views/dashboard/index.vue

<template>
  <div class="dashboard-editor-container">

    <panel-group  :countsData="countsData" />
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-title">
            <router-link to="/toolbox/warning">观众性别</router-link>
            <!-- <div>
              <el-tag @click="changeDate('warning',item.type,index)" :type="(item.checked?'success':'info')"
                style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.warning.dateRange">
                {{item.name}}
              </el-tag>
            </div> -->
          </div>
          <pie-chart :chartData="stat.warning" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-title">
            <router-link to="/toolbox/exception">观众年龄</router-link>
           <!-- <div>
              <el-tag @click="changeDate('exception',item.type,index)" :type="(item.checked?'success':'info')"
                style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.exception.dateRange">
                {{item.name}}
              </el-tag>
            </div> -->
          </div>
          <pie-chart :chartData="stat.exception" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8" v-if="false">
        <div class="chart-wrapper">
          <div class="chart-title">
            <router-link to="/toolbox/exception">城市分布</router-link>
           <!-- <div>
              <el-tag @click="changeDate('exception',item.type,index)" :type="(item.checked?'success':'info')"
                style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.exception.dateRange">
                {{item.name}}
              </el-tag>
            </div> -->
          </div>
          <pie-chart :chartData="stat.times" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <div class="chart-title">
            <router-link to="/toolbox/exception">团体与个人统计</router-link>
          </div>
          <line-chart :chartData="lineArr" />
        </div>

      </el-col>
    </el-row>

  </div>
</template>

<script>
  import PanelGroup from './components/PanelGroup'
  // import BarChart from './components/BarChart'
  import PieChart from './components/PieChart'
  import LineChart from './components/LineChart'
  import {
    getChartsData,
    getCounts
  } from "../../api/dashboard.js"
  export default {
    name: 'DashboardAdmin',
    components: {
      PanelGroup,
      PieChart,
      LineChart
    },
    data() {
      return {
        countsData: {
          client_count: 0,
          tool_count: 0,
          user_count: 0
        },
        stat: {
          warning: {
            // xArr: ["一","二","三","四","五"],
            // yArr: [200,300,400,500,330],
            yArr: [{
                value: 1048,
                name: '男性'
              },
              {
                value: 735,
                name: '女性'
              },

            ],
            radiusArr: "50%",
            dateRange: [{
              checked: true,
              type: "week",
              name: "本周"
            }, {
              checked: false,
              type: "month",
              name: "本月"
            }]
          },
          exception: {
            yArr: [{
                value: 1048,
                name: '12岁以下'
              },
              {
                value: 735,
                name: '12-17岁'
              },
              {
                value: 580,
                name: '18-24岁'
              },
              {
                value: 484,
                name: '25岁以上'
              }
            ],
            radiusArr: ['30%', '50%'],
            dateRange: [{
              checked: true,
              type: "week",
              name: "本周"
            }, {
              checked: false,
              type: "month",
              name: "本月"
            }]
          },
          times: {
            radiusArr: "50%",
            yArr: [{
                value: 240,
                name: '苏州'
              },
              {
                value: 20,
                name: '无锡'
              },
              {
                value: 130,
                name: '常州'
              },
              {
                value: 120,
                name: '泰州'
              },
              {
                value: 120,
                name: '宿迁'
              }
            ],
          }
        },
        lineArr: {
          xArr: ['05-22', '05-23', '05-24', '05-25', '05-26', '05-27', '05-28'],
          legendArr:["团队预约人数","团队预约实际入场人数","个人预约人数","个人预约实际入场人数"],
          series: [{
              name: '团队预约人数',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '团队预约实际入场人数',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '个人预约人数',
              type: 'line',
              stack: 'Total',
              data: [150, 232, 201, 154, 190, 330, 210]
            },
            {
              name: '个人预约实际入场人数',
              type: 'line',
              stack: 'Total',
              data: [50, 132, 101, 104, 180, 230, 110]
            }
          ]
        }
      }
      },
      created: function() {

        },
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .github-corner {
      position: absolute;
      top: 0px;
      border: 0;
      right: 0;
    }

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;

      .chart-title {
        font-size: 16px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
      }
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>