|
@@ -7,9 +7,7 @@
|
|
|
<span>用户概括</span>
|
|
<span>用户概括</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="contain">
|
|
<div class="contain">
|
|
|
- <div class="num">{{employeesCountNum}}</div>
|
|
|
|
|
- <div class="num_txt">已注册人数</div>
|
|
|
|
|
- <div id="user" style="width: 100%;height:300px;margin-left:-20%"></div>
|
|
|
|
|
|
|
+ <div id="user" ref="user" style="width: 100%;height: 400px;"></div>
|
|
|
</div>
|
|
</div>
|
|
|
</el-card>
|
|
</el-card>
|
|
|
<el-card class="box-card card2" v-loading="loading">
|
|
<el-card class="box-card card2" v-loading="loading">
|
|
@@ -27,8 +25,8 @@
|
|
|
<el-card class="box-card">
|
|
<el-card class="box-card">
|
|
|
<div class="left"><img :src="tj2" alt="" class="tjimg"></div>
|
|
<div class="left"><img :src="tj2" alt="" class="tjimg"></div>
|
|
|
<div class="right">
|
|
<div class="right">
|
|
|
- <div class="num" style="color:#9ED475">{{collectList.balance}}</div>
|
|
|
|
|
- <div class="num_txt">当前账户余额总额(元)</div>
|
|
|
|
|
|
|
+ <div class="num" style="color:#9ED475">{{collectList.dishCount}}</div>
|
|
|
|
|
+ <div class="num_txt">当天消费次数</div>
|
|
|
</div>
|
|
</div>
|
|
|
</el-card>
|
|
</el-card>
|
|
|
</div>
|
|
</div>
|
|
@@ -57,42 +55,43 @@
|
|
|
<div class="middle">
|
|
<div class="middle">
|
|
|
<el-card class="box-card" style="height:270px">
|
|
<el-card class="box-card" style="height:270px">
|
|
|
<div class="header"><span>支付方式</span></div>
|
|
<div class="header"><span>支付方式</span></div>
|
|
|
- <div class="zf" style="margin-top:0px">
|
|
|
|
|
|
|
+ <div class="zf" style="margin-top:40px">
|
|
|
<div class="introduce">
|
|
<div class="introduce">
|
|
|
- <div class="round zfbbor"></div>
|
|
|
|
|
- <div class="name">{{payTypeCollectList[0].payType ==1?"微信":""}}</div>
|
|
|
|
|
- <div class="ratio zfbc">{{payTypeCollectList[0].money}} ({{payTypeCollectList[0].radio}})</div>
|
|
|
|
|
|
|
+ <div class="round xjbor"></div>
|
|
|
|
|
+ <div class="name">{{ payTypeCollectList[0].payType ==1?"现金":""}}</div>
|
|
|
|
|
+ <div class="ratio xjbc">{{payTypeCollectList[0].money}} ({{payTypeCollectList[0].radio}})</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="progress">
|
|
<div class="progress">
|
|
|
- <div class="progress1 zfbbg"></div>
|
|
|
|
|
- <div class="progress2 zfbbg" :style="progressWidth[0]"></div>
|
|
|
|
|
|
|
+ <div class="progress1 xjbg"></div>
|
|
|
|
|
+ <div class="progress2 xjbg" :style="payTypeCollectList[0].radio"></div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
<div class="zf">
|
|
<div class="zf">
|
|
|
<div class="introduce">
|
|
<div class="introduce">
|
|
|
- <div class="round wxbor"></div>
|
|
|
|
|
- <div class="name">{{payTypeCollectList[1].payType==2?"支付宝":""}}</div>
|
|
|
|
|
- <div class="ratio wxbc">{{payTypeCollectList[1].money}} ({{payTypeCollectList[1].radio}})</div>
|
|
|
|
|
|
|
+ <div class="round zfbbor"></div>
|
|
|
|
|
+ <div class="name">{{payTypeCollectList[1].payType == 2?"微信":""}}</div>
|
|
|
|
|
+ <div class="ratio zfbc">{{payTypeCollectList[1].money}} ({{payTypeCollectList[1].radio}})</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="progress">
|
|
<div class="progress">
|
|
|
- <div class="progress1 wxbg"></div>
|
|
|
|
|
- <div class="progress2 wxbg" :style="progressWidth[1]"></div>
|
|
|
|
|
|
|
+ <div class="progress1 zfbbg"></div>
|
|
|
|
|
+ <div class="progress2 zfbbg" :style="payTypeCollectList[1].radio"></div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="zf">
|
|
<div class="zf">
|
|
|
<div class="introduce">
|
|
<div class="introduce">
|
|
|
- <div class="round xjbor"></div>
|
|
|
|
|
- <div class="name">{{payTypeCollectList[2].payType==3?"现金":""}}</div>
|
|
|
|
|
- <div class="ratio xjbc">{{payTypeCollectList[2].money}} ({{payTypeCollectList[2].radio}})</div>
|
|
|
|
|
|
|
+ <div class="round wxbor"></div>
|
|
|
|
|
+ <div class="name">{{payTypeCollectList[2].payType==3?"支付宝":""}}</div>
|
|
|
|
|
+ <div class="ratio wxbc">{{payTypeCollectList[2].money}} ({{payTypeCollectList[2].radio}})</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="progress">
|
|
<div class="progress">
|
|
|
- <div class="progress1 xjbg"></div>
|
|
|
|
|
- <div class="progress2 xjbg" :style="progressWidth[2]"></div>
|
|
|
|
|
|
|
+ <div class="progress1 wxbg"></div>
|
|
|
|
|
+ <div class="progress2 wxbg" :style="payTypeCollectList[2].radio"></div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
<div class="zf">
|
|
<div class="zf">
|
|
|
<div class="introduce">
|
|
<div class="introduce">
|
|
|
<div class="round qtbor"></div>
|
|
<div class="round qtbor"></div>
|
|
@@ -101,13 +100,13 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div class="progress">
|
|
<div class="progress">
|
|
|
<div class="progress1 qtbg"></div>
|
|
<div class="progress1 qtbg"></div>
|
|
|
- <div class="progress2 qtbg" :style="progressWidth[3]"></div>
|
|
|
|
|
|
|
+ <div class="progress2 qtbg" :style="payTypeCollectList[3].radio"></div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</el-card>
|
|
</el-card>
|
|
|
<el-card class="box-card" style="height:270px">
|
|
<el-card class="box-card" style="height:270px">
|
|
|
<div class="header"><span>充值渠道</span></div>
|
|
<div class="header"><span>充值渠道</span></div>
|
|
|
- <div id="channel" style="width: 100%;height:240px;margin-top:-15%;"></div>
|
|
|
|
|
|
|
+ <div id="channel" style="width:100%;height:240px;" ></div>
|
|
|
</el-card>
|
|
</el-card>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -124,7 +123,7 @@
|
|
|
{{year}}<i class="el-icon-arrow-down el-icon--right"></i>
|
|
{{year}}<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
</span>
|
|
</span>
|
|
|
<el-dropdown-menu slot="dropdown" class="dropdown" >
|
|
<el-dropdown-menu slot="dropdown" class="dropdown" >
|
|
|
- <template v-for="(index, item) in yearList" >
|
|
|
|
|
|
|
+ <template v-for="item in yearList" >
|
|
|
<el-dropdown-item :command="item.id" :key="item.id">{{item.value}}</el-dropdown-item>
|
|
<el-dropdown-item :command="item.id" :key="item.id">{{item.value}}</el-dropdown-item>
|
|
|
</template>
|
|
</template>
|
|
|
</el-dropdown-menu>
|
|
</el-dropdown-menu>
|
|
@@ -134,7 +133,7 @@
|
|
|
{{month}}<i class="el-icon-arrow-down el-icon--right"></i>
|
|
{{month}}<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
</span>
|
|
</span>
|
|
|
<el-dropdown-menu slot="dropdown" class="dropdown">
|
|
<el-dropdown-menu slot="dropdown" class="dropdown">
|
|
|
- <template v-for="(index, item) in monthList">
|
|
|
|
|
|
|
+ <template v-for="item in monthList">
|
|
|
<el-dropdown-item :command="item.id" :key="item.id">{{item.value}}</el-dropdown-item>
|
|
<el-dropdown-item :command="item.id" :key="item.id">{{item.value}}</el-dropdown-item>
|
|
|
</template>
|
|
</template>
|
|
|
</el-dropdown-menu>
|
|
</el-dropdown-menu>
|
|
@@ -144,7 +143,6 @@
|
|
|
<div id="statistics" style="width: 100%;height:300px;margin-top:0px;"></div>
|
|
<div id="statistics" style="width: 100%;height:300px;margin-top:0px;"></div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
</el-card>
|
|
</el-card>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -168,7 +166,6 @@ export default {
|
|
|
{payType:null,money:null,radio:null},
|
|
{payType:null,money:null,radio:null},
|
|
|
{payType:null,money:null,radio:null}
|
|
{payType:null,money:null,radio:null}
|
|
|
], //支付方式数据
|
|
], //支付方式数据
|
|
|
- progressWidth:[], //支付方式进度条
|
|
|
|
|
payTypeCollectListCount:null,
|
|
payTypeCollectListCount:null,
|
|
|
orderMoney:null, //今日充值金额
|
|
orderMoney:null, //今日充值金额
|
|
|
orderCount:null, //今日充值次数
|
|
orderCount:null, //今日充值次数
|
|
@@ -213,7 +210,6 @@ export default {
|
|
|
|
|
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
created(){
|
|
created(){
|
|
|
this.yearListCreate()
|
|
this.yearListCreate()
|
|
|
},
|
|
},
|
|
@@ -242,7 +238,7 @@ export default {
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
employeesCount() {//注册总人数
|
|
employeesCount() {//注册总人数
|
|
|
- employeesCountApi().then(response => {
|
|
|
|
|
|
|
+ employeesCountApi().then(response => {
|
|
|
this.employeesCountNum = response.data;
|
|
this.employeesCountNum = response.data;
|
|
|
}
|
|
}
|
|
|
);
|
|
);
|
|
@@ -268,7 +264,10 @@ export default {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
- this.drawLine1();
|
|
|
|
|
|
|
+ setTimeout(()=>{
|
|
|
|
|
+ this.drawLine1();
|
|
|
|
|
+ },100)
|
|
|
|
|
+
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
channelOrderMoney() {//渠道订单金额
|
|
channelOrderMoney() {//渠道订单金额
|
|
@@ -297,19 +296,29 @@ export default {
|
|
|
},
|
|
},
|
|
|
payTypeCollect(){ //支付方式
|
|
payTypeCollect(){ //支付方式
|
|
|
payTypeCollectApi().then(response => {
|
|
payTypeCollectApi().then(response => {
|
|
|
- this.payTypeCollectList = response.data
|
|
|
|
|
|
|
+ console.log(response.data)
|
|
|
|
|
+ let arr = response.data
|
|
|
var total = ''
|
|
var total = ''
|
|
|
- for(let i = 0; i<this.payTypeCollectList.length; i++){
|
|
|
|
|
- total = Number(total) + Number(this.payTypeCollectList[i].money)
|
|
|
|
|
|
|
+ for(let i = 0; i<arr.length; i++){
|
|
|
|
|
+ total = Number(total) + Number(arr[i].money)
|
|
|
}
|
|
}
|
|
|
- for(let i = 0; i<this.payTypeCollectList.length; i++){
|
|
|
|
|
- this.payTypeCollectList[i].radio = ((this.payTypeCollectList[i].money / total) * 100).toFixed(2) + '%'
|
|
|
|
|
|
|
+ for(let i = 0; i<arr.length; i++){
|
|
|
|
|
+ if(total == 0){
|
|
|
|
|
+ arr[i].radio = '0%'
|
|
|
|
|
+ }else{
|
|
|
|
|
+ arr[i].radio = ((arr[i].money / total) * 100).toFixed(2) + '%'
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- this.progressWidth = this.payTypeCollectList.map(item=>{
|
|
|
|
|
- return {
|
|
|
|
|
- width:item.radio
|
|
|
|
|
|
|
+ for(let i = 0; i<arr.length; i++){
|
|
|
|
|
+ if(arr.find(val=>val.payType == Number(i+1))){
|
|
|
|
|
+ arr[i].money = arr.find(val=>val.payType == Number(i+1)).money
|
|
|
|
|
+ arr[i].payType = arr.find(val=>val.payType == Number(i+1)).payType
|
|
|
|
|
+ arr[i].radio = arr.find(val=>val.payType == Number(i+1)).radio
|
|
|
|
|
+ console.log(arr.find(val=>val.payType == Number(i+1)).payType)
|
|
|
}
|
|
}
|
|
|
- })
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+ console.log(arr)
|
|
|
|
|
+ this.payTypeCollectList = arr
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
orderMoneyList() {// 今日充值信息
|
|
orderMoneyList() {// 今日充值信息
|
|
@@ -319,7 +328,7 @@ export default {
|
|
|
if(this.orderCount == 0){
|
|
if(this.orderCount == 0){
|
|
|
this.orderMoneyAverage = 0
|
|
this.orderMoneyAverage = 0
|
|
|
}else{
|
|
}else{
|
|
|
- this.orderMoneyAverage = (this.orderMoney / this.orderCount).toFixed(2) + '%'
|
|
|
|
|
|
|
+ this.orderMoneyAverage = (this.orderMoney / this.orderCount).toFixed(2)
|
|
|
}
|
|
}
|
|
|
this.loading = false
|
|
this.loading = false
|
|
|
});
|
|
});
|
|
@@ -383,7 +392,7 @@ export default {
|
|
|
}else{
|
|
}else{
|
|
|
this.monthParameter = tMonth
|
|
this.monthParameter = tMonth
|
|
|
}
|
|
}
|
|
|
- this.dateCollectType(0, tYear + '-' + tMonth + '-' + '00' + ' 00:00:00', tYear + '-' + tMonth + '-' + lastDay + ' 00:00:00')
|
|
|
|
|
|
|
+ this.dateCollectType(0, tYear + '-' + tMonth + '-' + '00' + ' 00:00:00', tYear + '-' + tMonth + '-' + lastDay + ' 23:59:59')
|
|
|
},
|
|
},
|
|
|
dateCollectType(type, startTime, endTime){
|
|
dateCollectType(type, startTime, endTime){
|
|
|
dateCollectApi(this.addDateRange({"type":type, "startTime":startTime, "endTime":endTime})).then(response =>{
|
|
dateCollectApi(this.addDateRange({"type":type, "startTime":startTime, "endTime":endTime})).then(response =>{
|
|
@@ -394,12 +403,12 @@ export default {
|
|
|
this.drawLine4();
|
|
this.drawLine4();
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
|
|
+
|
|
|
drawLine4(){
|
|
drawLine4(){
|
|
|
// 基于准备好的dom,初始化echarts实例
|
|
// 基于准备好的dom,初始化echarts实例
|
|
|
let statistics = this.$echarts.init(document.getElementById('statistics'))
|
|
let statistics = this.$echarts.init(document.getElementById('statistics'))
|
|
|
- window.onresize = function() {
|
|
|
|
|
- statistics.resize();
|
|
|
|
|
- };
|
|
|
|
|
|
|
+ let channel = this.$echarts.init(document.getElementById('channel'))
|
|
|
|
|
+ let user = this.$echarts.init(document.getElementById('user'))
|
|
|
// 指定图表的配置项和数据
|
|
// 指定图表的配置项和数据
|
|
|
var option4 = {
|
|
var option4 = {
|
|
|
color:[
|
|
color:[
|
|
@@ -410,14 +419,16 @@ export default {
|
|
|
textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
|
|
textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
|
|
|
fontSize: 12,
|
|
fontSize: 12,
|
|
|
fontWeight: 'normal',
|
|
fontWeight: 'normal',
|
|
|
- color: "#333"
|
|
|
|
|
|
|
+ color: "#999"
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
tooltip: {
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
trigger: 'axis'
|
|
|
},
|
|
},
|
|
|
legend: {
|
|
legend: {
|
|
|
- // data: ['Email']
|
|
|
|
|
|
|
+ // orient: 'vertical',
|
|
|
|
|
+ bottom:'0',
|
|
|
|
|
+ padding:[0,0,0,100],
|
|
|
},
|
|
},
|
|
|
grid: {
|
|
grid: {
|
|
|
// left: '3%',
|
|
// left: '3%',
|
|
@@ -436,9 +447,9 @@ export default {
|
|
|
data: this.dataOrderTime,
|
|
data: this.dataOrderTime,
|
|
|
axisLine: {
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
lineStyle: {
|
|
|
- color: '#ccc',
|
|
|
|
|
|
|
+ color: '#999',
|
|
|
width: 1 //这里是为了突出显示加上的
|
|
width: 1 //这里是为了突出显示加上的
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
@@ -447,14 +458,12 @@ export default {
|
|
|
boundaryGap: false,
|
|
boundaryGap: false,
|
|
|
axisLine: {
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
lineStyle: {
|
|
|
- color: '#ccc',
|
|
|
|
|
|
|
+ color: '#999',
|
|
|
width: 1 //这里是为了突出显示加上的
|
|
width: 1 //这里是为了突出显示加上的
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
series: [
|
|
series: [
|
|
|
{
|
|
{
|
|
|
// name: 'Email',
|
|
// name: 'Email',
|
|
@@ -480,14 +489,13 @@ export default {
|
|
|
]
|
|
]
|
|
|
};
|
|
};
|
|
|
statistics.setOption(option4);
|
|
statistics.setOption(option4);
|
|
|
|
|
+ window.onresize = function() {
|
|
|
|
|
+
|
|
|
|
|
+ };
|
|
|
},
|
|
},
|
|
|
drawLine3(){
|
|
drawLine3(){
|
|
|
// 基于准备好的dom,初始化echarts实例
|
|
// 基于准备好的dom,初始化echarts实例
|
|
|
let channel = this.$echarts.init(document.getElementById('channel'))
|
|
let channel = this.$echarts.init(document.getElementById('channel'))
|
|
|
- window.onresize = function() {
|
|
|
|
|
- channel.resize();
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
// 指定图表的配置项和数据
|
|
// 指定图表的配置项和数据
|
|
|
var option3 = {
|
|
var option3 = {
|
|
|
color:['#FF8A78', '#71A9D4', '#9ED475', '#5BCB5E', '#80F3E9', '#D971FF', '#D3DA67', '#42C7FF', '#9454FF', '#B97E76', '#A8A9B3', '#67BDC0'],
|
|
color:['#FF8A78', '#71A9D4', '#9ED475', '#5BCB5E', '#80F3E9', '#D971FF', '#D3DA67', '#42C7FF', '#9454FF', '#B97E76', '#A8A9B3', '#67BDC0'],
|
|
@@ -500,9 +508,6 @@ export default {
|
|
|
legend: {
|
|
legend: {
|
|
|
// orient: 'vertical',
|
|
// orient: 'vertical',
|
|
|
bottom: '0%',
|
|
bottom: '0%',
|
|
|
- left: 'left',
|
|
|
|
|
- left: '25%'
|
|
|
|
|
-
|
|
|
|
|
},
|
|
},
|
|
|
// series: [
|
|
// series: [
|
|
|
// {
|
|
// {
|
|
@@ -549,68 +554,59 @@ export default {
|
|
|
]
|
|
]
|
|
|
};
|
|
};
|
|
|
channel.setOption(option3);
|
|
channel.setOption(option3);
|
|
|
|
|
+
|
|
|
},
|
|
},
|
|
|
|
|
+
|
|
|
drawLine1(){
|
|
drawLine1(){
|
|
|
// 基于准备好的dom,初始化echarts实例
|
|
// 基于准备好的dom,初始化echarts实例
|
|
|
let user = this.$echarts.init(document.getElementById('user'))
|
|
let user = this.$echarts.init(document.getElementById('user'))
|
|
|
- window.onresize = function() {
|
|
|
|
|
- user.resize();
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
// 指定图表的配置项和数据
|
|
// 指定图表的配置项和数据
|
|
|
var option1 = {
|
|
var option1 = {
|
|
|
color:['#FF7859', '#598CFF', '#FFC63C', '#5BCB5E', '#80F3E9', '#D971FF', '#D3DA67', '#42C7FF', '#9454FF', '#B97E76', '#A8A9B3', '#67BDC0'],
|
|
color:['#FF7859', '#598CFF', '#FFC63C', '#5BCB5E', '#80F3E9', '#D971FF', '#D3DA67', '#42C7FF', '#9454FF', '#B97E76', '#A8A9B3', '#67BDC0'],
|
|
|
tooltip: {
|
|
tooltip: {
|
|
|
trigger: 'item'
|
|
trigger: 'item'
|
|
|
},
|
|
},
|
|
|
|
|
+ title: {
|
|
|
|
|
+ //backgroundColor: "pink", // 标题背景色
|
|
|
|
|
+ text: "已注册人数",
|
|
|
|
|
+ x: "34.8%",
|
|
|
|
|
+ y: "45%",
|
|
|
|
|
+ center:'center',
|
|
|
|
|
+ textStyle: {
|
|
|
|
|
+ fontSize: 12,
|
|
|
|
|
+ color: "#000",
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ graphic: {
|
|
|
|
|
+ backgroundColor: "pink",
|
|
|
|
|
+ type: "text",
|
|
|
|
|
+ left: "34.8%",
|
|
|
|
|
+ top: "35%",
|
|
|
|
|
+ center:'center',
|
|
|
|
|
+ style: {
|
|
|
|
|
+ // text: this.employeesCountNum,
|
|
|
|
|
+ text: 23,
|
|
|
|
|
+ textAlign: "center",
|
|
|
|
|
+ fill: "#000",
|
|
|
|
|
+ fontSize: 30,
|
|
|
|
|
+ backgroundColor: "pink",
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
legend: {
|
|
legend: {
|
|
|
orient: 'vertical',
|
|
orient: 'vertical',
|
|
|
- top: '15%',
|
|
|
|
|
- left: 'left',
|
|
|
|
|
- left: '80%'
|
|
|
|
|
|
|
+ top: '0%',
|
|
|
|
|
+ right: '0%',
|
|
|
|
|
+ center:'center',
|
|
|
|
|
+ formatter: function(name){
|
|
|
|
|
+ return name.length>4?name.substr(0,4)+"...":name;
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
- // series: [
|
|
|
|
|
- // {
|
|
|
|
|
- // name: '',
|
|
|
|
|
- // type: 'pie',
|
|
|
|
|
- // radius: ['50%', '60%'],
|
|
|
|
|
- // avoidLabelOverlap: false,
|
|
|
|
|
- // itemStyle: {
|
|
|
|
|
- // borderRadius: 10,
|
|
|
|
|
- // borderColor: '#fff',
|
|
|
|
|
- // borderWidth: 0
|
|
|
|
|
- // },
|
|
|
|
|
- // normal:{
|
|
|
|
|
- // label: {
|
|
|
|
|
- // show: false,
|
|
|
|
|
- // position: 'inside',
|
|
|
|
|
- // formatter: '{b}: {c}({d}%)'
|
|
|
|
|
-
|
|
|
|
|
- // },
|
|
|
|
|
- // },
|
|
|
|
|
- // label: {
|
|
|
|
|
- // show: false,
|
|
|
|
|
-
|
|
|
|
|
- // },
|
|
|
|
|
- // emphasis: {
|
|
|
|
|
- // label: {
|
|
|
|
|
- // show: false,
|
|
|
|
|
- // fontSize: '16',
|
|
|
|
|
- // fontWeight: 'bold'
|
|
|
|
|
- // }
|
|
|
|
|
- // },
|
|
|
|
|
- // labelLine: {
|
|
|
|
|
- // show: false
|
|
|
|
|
- // },
|
|
|
|
|
- // data: this.personnelRatioList
|
|
|
|
|
- // }
|
|
|
|
|
- // ]
|
|
|
|
|
series : [
|
|
series : [
|
|
|
{
|
|
{
|
|
|
name: '',
|
|
name: '',
|
|
|
type: 'pie',
|
|
type: 'pie',
|
|
|
- radius : ['50%', '60%'],
|
|
|
|
|
- // center: ['50%', '60%'],
|
|
|
|
|
|
|
+ radius : ['40%', '50%'],
|
|
|
|
|
+ center: ['40%', '40%'],
|
|
|
label: {
|
|
label: {
|
|
|
normal: {
|
|
normal: {
|
|
|
show: true,
|
|
show: true,
|
|
@@ -621,8 +617,6 @@ export default {
|
|
|
}
|
|
}
|
|
|
]
|
|
]
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
user.setOption(option1);
|
|
user.setOption(option1);
|
|
|
},
|
|
},
|
|
|
}
|
|
}
|
|
@@ -688,6 +682,7 @@ export default {
|
|
|
.card1{
|
|
.card1{
|
|
|
height:500px;
|
|
height:500px;
|
|
|
.contain{
|
|
.contain{
|
|
|
|
|
+
|
|
|
margin:30px auto 0;
|
|
margin:30px auto 0;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
position: relative;
|
|
position: relative;
|
|
@@ -699,9 +694,9 @@ export default {
|
|
|
font-size: 30px;
|
|
font-size: 30px;
|
|
|
margin:0 16px;
|
|
margin:0 16px;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- top:43%;
|
|
|
|
|
|
|
+ top:31%;
|
|
|
width:100%;
|
|
width:100%;
|
|
|
- margin-left:-20%;
|
|
|
|
|
|
|
+ margin-left:-10%;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
|
|
|
|
|
}
|
|
}
|
|
@@ -710,9 +705,9 @@ export default {
|
|
|
color:#000;
|
|
color:#000;
|
|
|
opacity: 0.65;
|
|
opacity: 0.65;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- top:55%;
|
|
|
|
|
|
|
+ top:43%;
|
|
|
width:100%;
|
|
width:100%;
|
|
|
- margin-left:-20%;
|
|
|
|
|
|
|
+ margin-left:-10%;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
|
|
|
|
|
}
|
|
}
|
|
@@ -780,7 +775,7 @@ export default {
|
|
|
margin:0 auto;
|
|
margin:0 auto;
|
|
|
}
|
|
}
|
|
|
.contain{
|
|
.contain{
|
|
|
- width:85%;
|
|
|
|
|
|
|
+ width:92%;
|
|
|
margin:30px auto 0;
|
|
margin:30px auto 0;
|
|
|
.top{
|
|
.top{
|
|
|
// display: flex;
|
|
// display: flex;
|
|
@@ -814,17 +809,26 @@ export default {
|
|
|
width:48%;
|
|
width:48%;
|
|
|
float: left;
|
|
float: left;
|
|
|
padding:0 !important;
|
|
padding:0 !important;
|
|
|
|
|
+ position: relative;
|
|
|
.el-card__body{
|
|
.el-card__body{
|
|
|
padding:0 !important;
|
|
padding:0 !important;
|
|
|
}
|
|
}
|
|
|
.header{
|
|
.header{
|
|
|
width:100%;
|
|
width:100%;
|
|
|
height:46px;
|
|
height:46px;
|
|
|
- font-size: 16px;
|
|
|
|
|
|
|
+ font-size: 14px;
|
|
|
color:#000;
|
|
color:#000;
|
|
|
|
|
+ font-weight: 700;
|
|
|
opacity: 0.65;
|
|
opacity: 0.65;
|
|
|
margin-top:0;
|
|
margin-top:0;
|
|
|
|
|
+ top:0px;
|
|
|
|
|
+ left:0px;
|
|
|
background-color: #FAFAFA;
|
|
background-color: #FAFAFA;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ span{
|
|
|
|
|
+ margin:12px 0 0 10px;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ }
|
|
|
// padding:10px 20px;
|
|
// padding:10px 20px;
|
|
|
}
|
|
}
|
|
|
|
|
|