'dashboard增加图表'

src/components/page/Dashboard.vue

@@ -2,34 +2,30 @@
     <div>
         <el-row :gutter="20">
             <el-col :span="8">
-                <el-row>
-                    <el-col>
-                        <el-card shadow="hover" class="mgb20">
-                            <div class="user-info">
-                                <img src="static/img/img.jpg" class="user-avator" alt="">
-                                <div class="user-info-cont">
-                                    <div class="user-info-name">{{name}}</div>
-                                    <div>{{role}}</div>
-                                </div>
-                            </div>
-                            <div class="user-info-list">上次登录时间：<span>2018-01-01</span></div>
-                            <div class="user-info-list">上次登录地点：<span>东莞</span></div>
-                        </el-card>
-                        <el-card shadow="hover">
-                            <div slot="header" class="clearfix">
-                                <span>语言详情</span>
-                            </div>
-                            Vue
-                            <el-progress :percentage="57.2" color="#42b983"></el-progress>
-                            JavaScript
-                            <el-progress :percentage="29.8" color="#f1e05a"></el-progress>
-                            CSS
-                            <el-progress :percentage="11.9"></el-progress>
-                            HTML
-                            <el-progress :percentage="1.1" color="#f56c6c"></el-progress>
-                        </el-card>
-                    </el-col>
-                </el-row>
+                <el-card shadow="hover" class="mgb20">
+                    <div class="user-info">
+                        <img src="static/img/img.jpg" class="user-avator" alt="">
+                        <div class="user-info-cont">
+                            <div class="user-info-name">{{name}}</div>
+                            <div>{{role}}</div>
+                        </div>
+                    </div>
+                    <div class="user-info-list">上次登录时间：<span>2018-01-01</span></div>
+                    <div class="user-info-list">上次登录地点：<span>东莞</span></div>
+                </el-card>
+                <el-card shadow="hover">
+                    <div slot="header" class="clearfix">
+                        <span>语言详情</span>
+                    </div>
+                    Vue
+                    <el-progress :percentage="57.2" color="#42b983"></el-progress>
+                    JavaScript
+                    <el-progress :percentage="29.8" color="#f1e05a"></el-progress>
+                    CSS
+                    <el-progress :percentage="11.9"></el-progress>
+                    HTML
+                    <el-progress :percentage="1.1" color="#f56c6c"></el-progress>
+                </el-card>
             </el-col>
             <el-col :span="16">
                 <el-row :gutter="20" class="mgb20">
@@ -91,20 +87,32 @@
                         </el-table-column>
                     </el-table>
                 </el-card>
-
+            </el-col>
+        </el-row>
+        <el-row :gutter="20">
+            <el-col :span="12">
+                <el-card shadow="hover">
+                    <schart ref="bar" class="schart" canvasId="bar" :data="data1" type="bar" :options="options"></schart>
+                </el-card>
+            </el-col>
+            <el-col :span="12">
+                <el-card shadow="hover">
+                    <schart ref="line" class="schart" canvasId="line" :data="data1" type="line" :options="options2"></schart>
+                </el-card>
             </el-col>
         </el-row>
     </div>
 </template>
 
 <script>
+    import Schart from 'vue-schart';
+    import bus from '../common/bus';
     export default {
         name: 'dashboard',
         data() {
             return {
                 name: localStorage.getItem('ms_username'),
-                todoList: [
-                    {
+                todoList: [{
                         title: '今天要修复100个bug',
                         status: false,
                     },
@@ -127,13 +135,80 @@
                         title: '今天要写100行代码加几个bug吧',
                         status: true,
                     }
-                ]
+                ],
+                data1: [{
+                        name: '2018/09/04',
+                        value: 1083
+                    },
+                    {
+                        name: '2018/09/05',
+                        value: 941
+                    },
+                    {
+                        name: '2018/09/06',
+                        value: 1139
+                    },
+                    {
+                        name: '2018/09/07',
+                        value: 816
+                    },
+                    {
+                        name: '2018/09/08',
+                        value: 327
+                    },
+                    {
+                        name: '2018/09/09',
+                        value: 228
+                    },
+                    {
+                        name: '2018/09/10',
+                        value: 1065
+                    }
+                ],
+                options: {
+                    title: '最近七天每天的用户访问量',
+                    showValue: false,
+                    fillColor: 'rgb(45, 140, 240)',
+                    bottomPadding: 30,
+                    topPadding: 30
+                },
+                options2: {
+                    title: '最近七天用户访问趋势',
+                    fillColor: '#FC6FA1',
+                    axisColor: '#008ACD',
+                    contentColor: '#EEEEEE',
+                    bgColor: '#F5F8FD',
+                    bottomPadding: 30,
+                    topPadding: 30
+                },
+                collapse: false
             }
         },
+        components: {
+            Schart
+        },
         computed: {
             role() {
                 return this.name === 'admin' ? '超级管理员' : '普通用户';
             }
+        },
+        created(){
+            bus.$on('collapse', msg => {
+                this.collapse = msg;
+            });
+            // 调用renderChart方法对图表进行重新渲染
+            window.addEventListener('resize', ()=>{
+                this.$refs.bar.renderChart();
+                this.$refs.line.renderChart();
+            })
+        },
+        watch: {
+            collapse(){
+                setTimeout(() => {
+                    this.$refs.bar.renderChart();
+                    this.$refs.line.renderChart();
+                }, 300);
+            }
         }
     }
 
@@ -154,7 +229,7 @@
     .grid-cont-right {
         flex: 1;
         text-align: center;
-        font-size: 12px;
+        font-size: 14px;
         color: #999;
     }
 
@@ -245,4 +320,9 @@
         color: #999;
     }
 
+    .schart {
+        width: 100%;
+        height: 300px;
+    }
+
 </style>

static/css/main.css

@@ -29,6 +29,7 @@ a {
     right: 0;
     top: 70px;
     bottom: 0;
+    padding-bottom: 30px;
     -webkit-transition: left .3s ease-in-out;
     transition: left .3s ease-in-out;
     background: #f0f0f0;