Vue Home 组件 - 管理系统主页布局

<template>
  <div style='height:100%'>
      <el-container style='height: 100%; border: 1px solid #eee'>
        <el-aside width='200px' 
                style='background-color: rgb(238, 241, 246) 
                        overflow:hidden;
                        height:100%; 
                        '>
           <ManagerAside />
        </el-aside>
        <el-container>
          <el-header style='text-align: right; font-size: 12px; border-bottom:1px solid #ccc; background:#fff'>
            <ManagerHeader />
          </el-header>
            <el-main>
              <router-view />
            </el-main>
        </el-container>
    </el-container>
  </div>
</template>
<script>
import ManagerAside from '@/components/ManagerAside'
import ManagerHeader from '@/components/ManagerHeader'
export default {
    name:'Home',
     data() {
      return{
      userTotal:0,
      articletotalTotal:0,
      thingTotal:0,
      moneyTotal:0

    }
    
    },
    components:{
      ManagerAside,
      ManagerHeader
    }
  //   created() {
  // this.load()
  //   },

  // mounted() {//页面元素渲染之后再触发
  //   var chartDom = document.getElementById('main');
  //   var myChart = echarts.init(chartDom);
  //   var option;

  //   option = {
  //     title: {
  //       text:'各季度用户帖子数量统计',
  //       subtext:'趋势图',
  //       left:'center'
  //     },
  //     tooltip: {
  //       trigger: 'item'
  //     },
  //     legend: {
  //       orient: 'vertical',
  //       left:'left'
  //     },
  //     xAxis: {
  //       type: 'category',
  //       data: ['第一季度','第二季度','第三季度','第四季度']
  //     },
  //     yAxis: {
  //       type: 'value'
  //     },
  //     series: [
  //       {
  //         name:'用户',
  //         data: [],
  //         type: 'line'
  //       },
  //       {
  //         name:'用户',
  //         data: [],
  //         type: 'bar'
  //       },
  //       {
  //         name:'帖子',
  //         data: [],
  //         type: 'line'
  //       },
  //       {
  //         name:'帖子',
  //         data: [],
  //         type: 'bar'
  //       }
  //     ]
  //   };
  //   //饼图
  //   var pieDom = document.getElementById('main2');
  //   var pieChart = echarts.init(pieDom);
  //   var pieoption;
  //   pieoption = {
  //     title: {
  //       text: '各季度用户数量统计',
  //       subtext: '比例',
  //       left: 'center'
  //     },
  //     tooltip: {
  //       trigger: 'item'
  //     },
  //     legend: {
  //       orient: 'vertical',
  //       left: 'left'
  //     },
  //     series: [
  //       {
  //         name:'用户数量',
  //         type: 'pie',
  //         radius: '60%',
  //         label:{       //饼图图形上的文本标签
  //           normal:{  
  //             show:true,
  //             position:'inner',//标签的位置
  //             textStyle:{
  //               fontWeight:300,
  //               fontSize: 14, //文字的字体
  //               color:'#fff'
  //             },
  //             formatter:'{d}%'
  //           }

  //         },
  //         data: [],//填空
  //         emphasis: {
  //           itemStyle: {
  //             shadowBlur: 10,
  //             shadowOffsetX: 0,
  //             shadowColor: 'rgba(0, 0, 0, 0.5)'
  //           }
  //         }
  //       }
  //     ]
  //   };
  //   this.request.get('/echarts/usermembers').then(res =>{
  //         this.request.get('/echarts/articlemembers').then(res2 =>{
  //     //填空
  //     option.series[0].data=res.data
  //     option.series[1].data=res.data
  //     option.series[2].data=res2.data
  //     option.series[3].data=res2.data

  //     pieoption.series[0].data=['
  //       {name:'第一节度',value:res.data[0]},
  //       {name:'第二节度',value:res.data[1]},
  //       {name:'第三节度',value:res.data[2]},
  //       {name:'第四节度',value:res.data[3]}
  //     ]

  //     //数据准备完毕之后再set
  //     option && myChart.setOption(option);
  //     pieoption && pieChart.setOption(pieoption);
  //   })
  //   })

  // },
  // methods:{
  //   load(){
  //     //请求分页查询数据
  //     this.request.get('/user/getUserTotal').then(res =>{
  //       this.userTotal=res.data
  //         })
  //     this.request.get('/article/getArticletotalTotal').then(res =>{
  //       this.articletotalTotal=res.data
  //     })
  //     this.request.get('/user/getThingTotal').then(res =>{
  //       this.thingTotal=res.data
  //     })
  //     this.request.get('/user/getMoneyTotal').then(res =>{
  //       this.moneyTotal=res.data
  //     })
  //   },
  // }
}
  
</script>
<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }

</style>