'dashboard增加图表'
This commit is contained in:
lin-xin
parent
cd96319f97
commit
865f7d53d0
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue