|
|
|
@ -1,6 +1,6 @@ |
|
|
|
<template> |
|
|
|
<div class="big"> |
|
|
|
<div class="mid"> |
|
|
|
<!-- <div class="mid"> |
|
|
|
<el-row :gutter="32"> |
|
|
|
<el-col :xs="24" :sm="24" :lg="8"> |
|
|
|
<div class="chart-wrapper"> |
|
|
|
@ -18,10 +18,56 @@ |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
<div class="top"> |
|
|
|
</div> --> |
|
|
|
<!-- <div class="top"> |
|
|
|
<div id="main" class="chart-container"></div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<div class="card"> |
|
|
|
<div class="car-left"> |
|
|
|
<div> |
|
|
|
<span class="card-img"> <img :src="userInfo.headerImg" alt="" > </span> |
|
|
|
<div class="text"><h4>早安，管理员， 请开始您一天的工作吧！</h4> |
|
|
|
<p class="tips-text"> |
|
|
|
<i class="el-icon-sunny"></i> |
|
|
|
<span>今日晴，18℃ - 28℃，出门记得防晒哦。</span> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="car-right"> |
|
|
|
<el-row> |
|
|
|
<el-col :span="8"><div class="car-item"> |
|
|
|
<span class="flow"><i class="el-icon-s-grid"></i></span> |
|
|
|
<span>今日流量 </span> |
|
|
|
<b>13260</b> |
|
|
|
</div></el-col> |
|
|
|
<el-col :span="8"><div class="car-item"> |
|
|
|
<span class="user-number"> |
|
|
|
<i class="el-icon-s-custom "></i> |
|
|
|
</span> |
|
|
|
<span>总用户 </span> |
|
|
|
<b>48286</b> |
|
|
|
</div></el-col> |
|
|
|
<el-col :span="8"><div class="car-item "> |
|
|
|
<span class="feedback"> |
|
|
|
<i class="el-icon-star-on"></i> |
|
|
|
</span> |
|
|
|
<span>好评率 </span> |
|
|
|
<b>98%</b> |
|
|
|
</div></el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="shadow"> |
|
|
|
<el-row :gutter="20"> |
|
|
|
<el-col :span="4" v-for="(card,key) in toolCards" :key="key" @click.native="toTarget(card.name)"> |
|
|
|
<div class="grid-content"> |
|
|
|
<i :class="card.icon"></i> |
|
|
|
<p>{{card.label}}</p> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
<div class="bottom"> |
|
|
|
<el-row :gutter="32"> |
|
|
|
<el-col :xs="24" :sm="24" :lg="12"> |
|
|
|
@ -42,127 +88,167 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import echarts from 'echarts' |
|
|
|
require('echarts/theme/macarons') // echarts theme |
|
|
|
import RaddarChart from "./component/RaddarChart" |
|
|
|
import stackMap from "./component/stackMap" |
|
|
|
import Sunburst from "./component/Sunburst" |
|
|
|
// require('echarts/theme/macarons') // echarts theme |
|
|
|
// import RaddarChart from "./component/RaddarChart" |
|
|
|
// import stackMap from "./component/stackMap" |
|
|
|
// import Sunburst from "./component/Sunburst" |
|
|
|
import musicPlayer from "./component/musicPlayer" |
|
|
|
import TodoList from "./component/todoList" |
|
|
|
|
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
export default { |
|
|
|
name: 'Dashboard', |
|
|
|
data() { |
|
|
|
return { |
|
|
|
toolCards:[ |
|
|
|
{ |
|
|
|
label:"用户管理", |
|
|
|
icon:"el-icon el-icon-user", |
|
|
|
name:"user" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label:"角色管理", |
|
|
|
icon:"el-icon el-icon-setting", |
|
|
|
name:"authority" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label:"菜单管理", |
|
|
|
icon:"el-icon el-icon-menu", |
|
|
|
name:"menu" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label:"代码生成器", |
|
|
|
icon:"el-icon el-icon-cpu", |
|
|
|
name:"autoCode" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label:"表单生成器", |
|
|
|
icon:"el-icon el-icon-document-checked", |
|
|
|
name:"formCreate" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label:"关于我们", |
|
|
|
icon:"el-icon el-icon-user", |
|
|
|
name:"about" |
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapGetters('user', ['userInfo']) |
|
|
|
}, |
|
|
|
components:{ |
|
|
|
RaddarChart, //雷达图 |
|
|
|
stackMap, //堆叠图 |
|
|
|
Sunburst, //旭日图 |
|
|
|
musicPlayer, //音乐播放器 |
|
|
|
TodoList //TodoList |
|
|
|
TodoList, //TodoList |
|
|
|
// RaddarChart, //雷达图 |
|
|
|
// stackMap, //堆叠图 |
|
|
|
// Sunburst, //旭日图 |
|
|
|
}, |
|
|
|
methods:{ |
|
|
|
toTarget(name){ |
|
|
|
this.$router.push({name}) |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
let myChart = echarts.init(document.getElementById('main'),'macarons'); |
|
|
|
// let stackMap = echarts.init(document.getElementById('stackMap')); |
|
|
|
let option = { |
|
|
|
legend: {}, |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
showContent: false |
|
|
|
}, |
|
|
|
dataset: { |
|
|
|
source: [ |
|
|
|
['product', '2012', '2013', '2014', '2015', '2016', '2017','2018','2019','2020'], |
|
|
|
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 70.0,6.4, 65.2, 82.5], |
|
|
|
['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1,2, 67.1, 69.2], |
|
|
|
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5,65.1, 53.3, 83.8], |
|
|
|
['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1,86.5, 92.1, 85.7] |
|
|
|
] |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
axisLabel: { |
|
|
|
show: true, |
|
|
|
textStyle: { |
|
|
|
color: 'rgb(192,192,192)', //更改坐标轴文字颜色 |
|
|
|
fontSize : 14 //更改坐标轴文字大小 |
|
|
|
} |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLine:{ |
|
|
|
lineStyle:{ |
|
|
|
color:'rgb(192,192,192)' //更改坐标轴颜色 |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
gridIndex:0, |
|
|
|
axisLabel: { |
|
|
|
show: true, |
|
|
|
textStyle: { |
|
|
|
color: 'rgb(192,192,192)', //更改坐标轴文字颜色 |
|
|
|
fontSize: 14 //更改坐标轴文字大小 |
|
|
|
} |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
color: 'rgb(192,192,192)' //更改坐标轴颜色 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
grid: {top: '55%'}, |
|
|
|
series: [ |
|
|
|
{type: 'line', smooth: true, seriesLayoutBy: 'row'}, |
|
|
|
{type: 'line', smooth: true, seriesLayoutBy: 'row'}, |
|
|
|
{type: 'line', smooth: true, seriesLayoutBy: 'row'}, |
|
|
|
{type: 'line', smooth: true, seriesLayoutBy: 'row'}, |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
id: 'pie', |
|
|
|
radius: '30%', |
|
|
|
center: ['50%', '25%'], |
|
|
|
label: { |
|
|
|
formatter: '{b}: {@2012} ({d}%)' |
|
|
|
}, |
|
|
|
encode: { |
|
|
|
itemName: 'product', |
|
|
|
value: '2012', |
|
|
|
tooltip: '2012' |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
//点记标记点时的动效 |
|
|
|
myChart.on('updateAxisPointer', function (event) { |
|
|
|
var xAxisInfo = event.axesInfo[0]; |
|
|
|
if (xAxisInfo) { |
|
|
|
var dimension = xAxisInfo.value + 1; |
|
|
|
myChart.setOption({ |
|
|
|
series: { |
|
|
|
id: 'pie', |
|
|
|
label: { |
|
|
|
formatter: '{b}: {@[' + dimension + ']} ({d}%)' |
|
|
|
}, |
|
|
|
encode: { |
|
|
|
value: dimension, |
|
|
|
tooltip: dimension |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
// mounted() { |
|
|
|
// let myChart = echarts.init(document.getElementById('main'),'macarons'); |
|
|
|
// // let stackMap = echarts.init(document.getElementById('stackMap')); |
|
|
|
// let option = { |
|
|
|
// legend: {}, |
|
|
|
// tooltip: { |
|
|
|
// trigger: 'axis', |
|
|
|
// showContent: false |
|
|
|
// }, |
|
|
|
// dataset: { |
|
|
|
// source: [ |
|
|
|
// ['product', '2012', '2013', '2014', '2015', '2016', '2017','2018','2019','2020'], |
|
|
|
// ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 70.0,6.4, 65.2, 82.5], |
|
|
|
// ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1,2, 67.1, 69.2], |
|
|
|
// ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5,65.1, 53.3, 83.8], |
|
|
|
// ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1,86.5, 92.1, 85.7] |
|
|
|
// ] |
|
|
|
// }, |
|
|
|
// xAxis: { |
|
|
|
// type: 'category', |
|
|
|
// axisLabel: { |
|
|
|
// show: true, |
|
|
|
// textStyle: { |
|
|
|
// color: 'rgb(192,192,192)', //更改坐标轴文字颜色 |
|
|
|
// fontSize : 14 //更改坐标轴文字大小 |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// axisTick: { |
|
|
|
// show: false |
|
|
|
// }, |
|
|
|
// axisLine:{ |
|
|
|
// lineStyle:{ |
|
|
|
// color:'rgb(192,192,192)' //更改坐标轴颜色 |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// yAxis: { |
|
|
|
// gridIndex:0, |
|
|
|
// axisLabel: { |
|
|
|
// show: true, |
|
|
|
// textStyle: { |
|
|
|
// color: 'rgb(192,192,192)', //更改坐标轴文字颜色 |
|
|
|
// fontSize: 14 //更改坐标轴文字大小 |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// axisTick: { |
|
|
|
// show: false |
|
|
|
// }, |
|
|
|
// axisLine: { |
|
|
|
// lineStyle: { |
|
|
|
// color: 'rgb(192,192,192)' //更改坐标轴颜色 |
|
|
|
// } |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// grid: {top: '55%'}, |
|
|
|
// series: [ |
|
|
|
// {type: 'line', smooth: true, seriesLayoutBy: 'row'}, |
|
|
|
// {type: 'line', smooth: true, seriesLayoutBy: 'row'}, |
|
|
|
// {type: 'line', smooth: true, seriesLayoutBy: 'row'}, |
|
|
|
// {type: 'line', smooth: true, seriesLayoutBy: 'row'}, |
|
|
|
// { |
|
|
|
// type: 'pie', |
|
|
|
// id: 'pie', |
|
|
|
// radius: '30%', |
|
|
|
// center: ['50%', '25%'], |
|
|
|
// label: { |
|
|
|
// formatter: '{b}: {@2012} ({d}%)' |
|
|
|
// }, |
|
|
|
// encode: { |
|
|
|
// itemName: 'product', |
|
|
|
// value: '2012', |
|
|
|
// tooltip: '2012' |
|
|
|
// } |
|
|
|
// } |
|
|
|
// ] |
|
|
|
// }; |
|
|
|
// //点记标记点时的动效 |
|
|
|
// myChart.on('updateAxisPointer', function (event) { |
|
|
|
// var xAxisInfo = event.axesInfo[0]; |
|
|
|
// if (xAxisInfo) { |
|
|
|
// var dimension = xAxisInfo.value + 1; |
|
|
|
// myChart.setOption({ |
|
|
|
// series: { |
|
|
|
// id: 'pie', |
|
|
|
// label: { |
|
|
|
// formatter: '{b}: {@[' + dimension + ']} ({d}%)' |
|
|
|
// }, |
|
|
|
// encode: { |
|
|
|
// value: dimension, |
|
|
|
// tooltip: dimension |
|
|
|
// } |
|
|
|
// } |
|
|
|
// }); |
|
|
|
// } |
|
|
|
// }); |
|
|
|
|
|
|
|
window.addEventListener('resize',function() {myChart.resize()}); |
|
|
|
myChart.setOption(option); |
|
|
|
// window.addEventListener('resize',function() {myChart.resize()}); |
|
|
|
// myChart.setOption(option); |
|
|
|
|
|
|
|
} |
|
|
|
// } |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
@ -170,7 +256,8 @@ export default { |
|
|
|
.big{ |
|
|
|
margin:100px 0 0 0; |
|
|
|
padding-top: 0; |
|
|
|
background-color: rgb(243,243,243);; |
|
|
|
background-color: rgb(243,243,243); |
|
|
|
padding-top: 15px; |
|
|
|
.top{ |
|
|
|
width: 100%; |
|
|
|
height: 360px; |
|
|
|
@ -197,7 +284,7 @@ export default { |
|
|
|
.bottom{ |
|
|
|
width: 100%; |
|
|
|
height: 300px; |
|
|
|
margin: 20px 0; |
|
|
|
// margin: 20px 0; |
|
|
|
.el-row{ |
|
|
|
margin-right: 4px !important; |
|
|
|
} |
|
|
|
|
1319612909
4 years ago