Skip to content

S
SuperMan
Commit f85975c3 authored by 黄媛媛's avatar 黄媛媛
Browse files
Options

业绩竞赛，OP提成

parent 6347d589
Hide whitespace changes
Inline Side-by-side
Showing with 457 additions and 205 deletions
src/components/FinancialModule/OPcommissionPeriods.vue
View file @ f85975c3
......@@ -32,15 +32,18 @@
<tr>
<th>期数</th>
<th>提成总金额</th>
<th>{{$t('admin.admin_czPerson')}}</th>
<th>日期</th>
<th>操作信息</th>
<th width="500px">操作备注</th>
<th>{{$t('system.table_operation')}}</th>
</tr>
<tr v-for="item in dataList">
<td>{{item.Periods}}</td>
<td>{{item.SumPrice}}</td>
<td>{{item.CreateByStr}}</td>
<td>{{item.CreateStr}}</td>
<td>
<p style="margin:6px 0">{{item.CreateByStr}}</p>
<p>{{item.CreateStr}}</p>
</td>
<td>{{item.Discription}}</td>
<td>
<el-tooltip class="item" effect="dark" content="查看" placement="top">
......
src/components/activity/PerCompetition.vue
View file @ f85975c3
<style>
.PerCompetition{
background: rgb(16,25,53);
padding:20px;
padding:20px 8px;
box-sizing: border-box;
width: calc(100% + 40px);
margin: 0 -20px;
......@@ -53,6 +53,7 @@
background: url('../../assets/img/competion/phtoprank.png') bottom no-repeat;
background-size:contain;
position: relative;
background-position: 0 247px;
}
.PerCompetition .Pingbi .rankDiv .imgDiv1{
......@@ -61,7 +62,7 @@
background: url('../../assets/img/competion/quan1.png')no-repeat;
background-size:100% 100%;
position: relative;
margin-top:35px;
margin-top:13%;
}
.PerCompetition .Pingbi .rankDiv .imgDiv2{
width: 240px;
......@@ -72,18 +73,18 @@
}
.PerCompetition .Pingbi .rankDiv .imgDiv3{
width: 198px;
height: 198px;
width: 180px;
height: 180px;
background: url('../../assets/img/competion/quan3.png')no-repeat;
background-size:100% 100%;
position: relative;
margin-top:35px;
margin-top:26%;
}
.PerCompetition .Pingbi .rankDiv .imgDiv{
color:#121534;
display: flex;
display: inline-flex;
align-items: center;
justify-content: center;
......@@ -143,6 +144,15 @@
.PerCompetition .zousi .zouTitle2 .colorSpan{
background:rgb(2, 60, 160);
}
.PerCompetition .zousi .zouTitleB0 .colorSpan{
background:#6F2DC3;
}
.PerCompetition .zousi .zouTitleB1 .colorSpan{
background:#FFA037;
}
.PerCompetition .zousi .zouTitleB2 .colorSpan{
background:#0FE7D8;
}
.PerCompetition .grPingbi{
/* height: 482px; */
......@@ -242,14 +252,73 @@
font-size:16px;
font-family:Microsoft YaHei;
font-weight:400;
color:#EDEDED;
color:#ccc;
display: inline-block;
width: 58px;
width: 55px;
}
.PerCompetition .monthbg{
background: url('../../assets/img/competion/monthbg.png');
background-size:100% 100%;
}
.PerCompetition .bgcan1{
display: inline-block;
width: 250px;
height: 250px;
border:1px solid #023CA0;
border-radius: 50%;
padding: 10px;
box-sizing: border-box;
}
.PerCompetition .bgcan2{
width: 230px;
height: 230px;
border:1px solid rgba(2, 60, 160, 1);;
border-radius: 50%;
box-shadow: 0 0 0 8px rgba(2, 60, 160, 0.3) inset;
display: flex;
align-items: center;
justify-content: center;
}
.PerCompetition .monthbg .dbspan{
display: inline-block;
width: 20px;
height: 5px;
}
.PerCompetition .monthbg .dbspan1{
background: #2DA7D6
}
.PerCompetition .monthbg .dbspan2{
background: #FA9801
}
.PerCompetition .newxrItemDiv{
background: url('../../assets/img/competion/xrItem.png');
background-size:100% 100%;
width: 100%;
}
.PerCompetition .newxrItemDiv .imgBg{
position: relative;
overflow: hidden;
}
.PerCompetition .newxrItemDiv .imgBg img{
width: 100%;
}
.PerCompetition .newxrItemDiv .imgBg .photo{
position: absolute;
top: 0;
padding: 20%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 99%;
overflow: hidden;
}
.PerCompetition .newxrItemDiv .imgBg .photo img{
width: 100%;
border-radius: 50%;
margin-top: 2%;
}
</style>
<template>
<div class="PerCompetition" v-loading="loading">
......@@ -266,63 +335,63 @@
</el-row>
<!-- A组 -->
<el-row style="margin-top:20px">
<el-col class="Pingbi" :span="11">
<el-row style="padding-top:15px">
<el-col :span="8" style="margin-top:10px">
<img style="width:51px;height:23px;margin-left:10px" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">团体月冠亚季评比</span>
</el-col>
<el-col :span="8">
<p style="color:#FA9801;font-size:26px;text-align:center">A组</p>
</el-col>
</el-row>
<el-row class="rankDiv">
<el-col :span="7">
<div v-for="(item,index) in depAList" :key="index" v-if="index==1" class="imgDiv imgDiv1">
<img style="margin-top:10%" :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv">
<span class="desSpan desSpan1">
<p style="font-weight:700;font-size:14px">NO.2 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
<el-col :span="13" style="padding:0 8px;box-sizing:border-box">
<div class="Pingbi">
<el-row style="padding-top:15px">
<el-col :span="8" style="margin-top:10px">
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:22px">团体月冠亚季评比</span>
</el-col>
<el-col :span="8">
<p style="color:#FA9801;font-size:26px;text-align:center">A组</p>
</el-col>
</el-row>
<el-row class="rankDiv">
<el-col :span="7" style="text-align:center">
<div v-for="(item,index) in depAList" :key="index" v-if="index==1" class="imgDiv imgDiv1">
<img style="margin-top:10%" :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv">
<span class="desSpan desSpan1">
<p style="font-weight:700;font-size:14px">NO.2 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
</div>
</div>
</div>
</el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col :span="8">
<div v-for="(item,index) in depAList" :key="index" v-if="index==0" class="imgDiv imgDiv2">
<img :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv" style="bottom:-8px">
<span class="desSpan desSpan2">
<p style="font-weight:700;font-size:14px">NO.1 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
</el-col>
<el-col :span="10" style="text-align:center">
<div v-for="(item,index) in depAList" :key="index" v-if="index==0" class="imgDiv imgDiv2">
<img :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv" style="bottom:-8px">
<span class="desSpan desSpan2">
<p style="font-weight:700;font-size:14px">NO.1 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
</div>
</div>
</div>
</el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col :span="7">
<div v-for="(item,index) in depAList" :key="index" v-if="index==2" class="imgDiv imgDiv3">
<img style="margin-top:7%" :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv">
<span class="desSpan desSpan3">
<p style="font-weight:700;font-size:14px">NO.3 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
</el-col>
<el-col :span="7" style="text-align:center">
<div v-for="(item,index) in depAList" :key="index" v-if="index==2" class="imgDiv imgDiv3">
<img style="margin-top:9%" :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv">
<span class="desSpan desSpan3">
<p style="font-weight:700;font-size:14px">NO.3 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
</div>
</div>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col class="zousi" :span="12">
<el-col class="zousi" :span="11">
<el-row style="padding-top:15px">
<el-col :span="8" style="margin-top:10px">
<img style="width:51px;height:23px;margin-left:10px" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">团体业绩走势</span>
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:22px">团体业绩走势</span>
</el-col>
<el-col :span="16" style="margin-top: 18px;">
<span :class="`zouTitle${index}`" v-for="(item,index) in depATrendList" :key="index+50" style="color:#fff;font-size:12px;margin-right:15px">
......@@ -337,66 +406,65 @@
</el-row>
<!-- B组 -->
<el-row style="margin-top:20px">
<el-col class="Pingbi" :span="11">
<el-row style="padding-top:15px">
<el-col :span="8" style="margin-top:10px">
<img style="width:51px;height:23px;margin-left:10px" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">团体月冠亚季评比</span>
</el-col>
<el-col :span="8">
<p style="color:#FA9801;font-size:26px;text-align:center">B组</p>
</el-col>
</el-row>
<el-row class="rankDiv">
<el-col :span="7">
<div v-for="(item,index) in depBList" :key="index" v-if="index==1" class="imgDiv imgDiv1">
<img style="margin-top:10%" :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv">
<span class="desSpan desSpan1">
<p style="font-weight:700;font-size:14px">NO.2 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
<el-col :span="13" style="padding:0 8px;box-sizing:border-box">
<div class="Pingbi">
<el-row style="padding-top:15px">
<el-col :span="8" style="margin-top:10px;overflow:hidden">
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:22px">团体月冠亚季评比</span>
</el-col>
<el-col :span="8">
<p style="color:#FA9801;font-size:26px;text-align:center">B组</p>
</el-col>
</el-row>
<el-row class="rankDiv">
<el-col :span="7" style="text-align:center">
<div v-for="(item,index) in depBList" :key="index" v-if="index==1" class="imgDiv imgDiv1">
<img style="margin-top:10%" :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv">
<span class="desSpan desSpan1">
<p style="font-weight:700;font-size:14px">NO.2 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
</div>
</div>
</div>
</el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col :span="8">
<div v-for="(item,index) in depBList" :key="index" v-if="index==0" class="imgDiv imgDiv2">
<img :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv" style="bottom:-8px">
<span class="desSpan desSpan2">
<p style="font-weight:700;font-size:14px">NO.1 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
</el-col>
<el-col :span="10" style="text-align:center">
<div v-for="(item,index) in depBList" :key="index" v-if="index==0" class="imgDiv imgDiv2">
<img :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv" style="bottom:-8px">
<span class="desSpan desSpan2">
<p style="font-weight:700;font-size:14px">NO.1 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
</div>
</div>
</div>
</el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col :span="7">
<div v-for="(item,index) in depBList" :key="index" v-if="index==2" class="imgDiv imgDiv3">
<img style="margin-top:7%" :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv">
<span class="desSpan desSpan3">
<p style="font-weight:700;font-size:14px">NO.3 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
</el-col>
<el-col :span="7" style="text-align:center;">
<div v-for="(item,index) in depBList" :key="index" v-if="index==2" class="imgDiv imgDiv3">
<img style="margin-top:9%" :src="item.Photo" alt="" :onerror="defaultImg">
<div class="desDiv">
<span class="desSpan desSpan3">
<p style="font-weight:700;font-size:14px">NO.3 {{item.DepName}}</p>
<p style="font-size:12px">收客数：{{item.TotalNum}}</p>
</span>
</div>
</div>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col class="zousi" :span="12">
<el-col class="zousi" :span="11">
<el-row style="padding-top:15px">
<el-col :span="8" style="margin-top:10px">
<img style="width:51px;height:23px;margin-left:10px" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">团体业绩走势</span>
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:22px">团体业绩走势</span>
</el-col>
<el-col :span="16" style="margin-top: 18px;">
<span :class="`zouTitle${index}`" v-for="(item,index) in depBTrendList" :key="index+50" style="color:#fff;font-size:12px;margin-right:15px">
<span :class="`zouTitleB${index}`" v-for="(item,index) in depBTrendList" :key="index+50" style="color:#fff;font-size:12px;margin-right:15px">
<span class="colorSpan"></span>
<span>{{item.DepName}}：总收客</span>
<span style="color:#FA9801;">{{item.TotalNum}}</span>
......@@ -408,49 +476,26 @@
</el-row>
<!-- 个人评比 -->
<div class="grPingbi" style="margin-top:20px">
<el-row class="grPingbi" style="margin-top:20px;margin-left:8px">
<div style="margin-top:10px">
<img style="width:51px;height:23px;margin-left:10px" src="../../assets/img/competion/row.png" alt="">
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">个人评比</span>
</div>
<div class="grDiv">
<div v-if="index==0" v-for="(item,index) in GRList" :key="index+500" class="grItem">
<div v-if="index<3" v-for="(item,index) in GRList" :key="index+500" class="grItem">
<div class="imgbg">
<img class="imgnum" src="../../assets/img/competion/num1.png" alt="">
<img v-if="index==0" class="imgnum" src="../../assets/img/competion/num1.png" alt="">
<img v-if="index==1" class="imgnum" src="../../assets/img/competion/num2.png" alt="">
<img v-if="index==2" class="imgnum" src="../../assets/img/competion/num3.png" alt="">
<el-progress :show-text="false" color="#FA9801" :stroke-width="10" type="circle" :percentage="item.Avg"></el-progress>
<div class="imgDiv">
<img :rc="item.Photo" alt="">
</div>
</div>
<p style="color:#FA9801;font-size:18px;font-weight:600">团队NO.1</p>
<p style="color:#46C3F1;font-size:12px">收客{{item.TotalNum}}人 | {{item.EmpName}}</p>
</div>
<div v-if="index==1" v-for="(item,index) in GRList" :key="index+500" class="grItem">
<div class="imgbg">
<img class="imgnum" src="../../assets/img/competion/num2.png" alt="">
<el-progress :show-text="false" color="#FAFAFB" :stroke-width="10" type="circle" :percentage="item.Avg"></el-progress>
<div class="imgDiv">
<img :rc="item.Photo" alt="" :onerror="defaultImg">
</div>
</div>
<p style="color:#FA9801;font-size:18px;font-weight:600">团队NO.2</p>
<p style="color:#46C3F1;font-size:12px">收客{{item.TotalNum}}人 | {{item.EmpName}}</p>
</div>
<div v-if="index==2" v-for="(item,index) in GRList" :key="index+500" class="grItem">
<div class="imgbg">
<img class="imgnum" src="../../assets/img/competion/num3.png" alt="">
<el-progress :show-text="false" color="#F5DBC0" :stroke-width="10" type="circle" :percentage="item.Avg"></el-progress>
<div class="imgDiv">
<img :rc="item.Photo" alt="" :onerror="defaultImg">
<img :src="item.Photo" alt="" :onerror="defaultImg">
</div>
</div>
<p style="color:#FA9801;font-size:18px;font-weight:600">团队NO.3</p>
<p style="color:#FA9801;font-size:18px;font-weight:600">团队NO.{{index+1}}</p>
<p style="color:#46C3F1;font-size:12px">得分{{item.Avg}}</p>
<p style="color:#46C3F1;font-size:12px">收客{{item.TotalNum}}人 | {{item.EmpName}}</p>
</div>
......@@ -459,69 +504,133 @@
<div class="imgbg">
<el-progress :show-text="false" color="#023CA0" :stroke-width="10" type="circle" :percentage="item.Avg"></el-progress>
<div class="imgDiv">
<img :rc="item.Photo" alt="" :onerror="defaultImg">
<img :src="item.Photo" alt="" :onerror="defaultImg">
</div>
</div>
<p style="color:#FA9801;font-size:18px;font-weight:600">团队NO.{{index+1}}</p>
<p style="color:#46C3F1;font-size:12px">得分{{item.Avg}}</p>
<p style="color:#46C3F1;font-size:12px">收客{{item.TotalNum}}人 | {{item.EmpName}}</p>
</div>
</div>
</div>
</el-row>
<!--新人评比 -->
<el-row style="margin-top:20px">
<el-col class="xinren" :span="17" style="height:372px">
<div style="margin-top:30px">
<img style="width:51px;height:23px;margin-left:10px" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">新人月冠亚季评比</span>
<el-col :span="17" style="padding:0 8px;box-sizing:border-box">
<div class="xinren" style="min-height:372px;">
<div style="padding-top:20px">
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">新人月冠亚季评比</span>
</div>
<div style="box-sizing:border-box">
<el-row style="padding:0 20px;box-sizing:border-box">
<el-col v-for="(item,index) in XRList" v-if="index<3" :key="index+100" :span="8" style="padding:10px;">
<div class="newxrItemDiv xinrenItem">
<p style="font-size:22px;font-weight:600;color:#fff;text-align:center;padding-top: 13px;">NO.{{item.Rank}}</p>
<el-row style="margin-top: 10px;">
<el-col :span="13" style="padding-left:10px">
<div class="imgBg">
<img src="../../assets/img/competion/xr1.png" alt="">
<div class="photo">
<img :src="item.Photo" alt="" :onerror="defaultImg">
</div>
</div>
</el-col>
<el-col class="info" :span="11">
<p>
<span>公司</span>
<span>{{item.BName}}</span>
</p>
<p>
<span>姓名</span>
<span>{{item.EmpName}}</span>
</p>
<p>
<span>收客数</span>
<span>总计{{item.TotalNum}}</span>
</p>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<!-- <div v-for="(item,index) in XRList" v-if="index<3" :key="index+10000" style="padding:15px;box-sizing:border-box;display:inline-block;margin-left:20px;width:400px">
<div class="xinrenItem">
<p style="font-size:22px;font-weight:600;color:#fff;text-align:center;padding-top: 13px;">NO.{{item.Rank}}</p>
<el-row style="margin-top: 20px;">
<el-col :span="13" style="padding-left:10px">
<div class="imgDiv" :class="`imgDiv${index+1}`">
<img :src="item.Photo" alt="" :onerror="defaultImg">
</div>
</el-col>
<el-col class="info" :span="11">
<p>
<span>公司</span>
<span>{{item.BName}}</span>
</p>
<p>
<span>姓名</span>
<span>{{item.EmpName}}</span>
</p>
<p>
<span>收客数</span>
<span>总计{{item.TotalNum}}</span>
</p>
</el-col>
</el-row>
</div>
</div> -->
</div>
</div>
<el-row style="padding:0 30px;box-sizing:border-box">
<el-col v-for="(item,index) in XRList" v-if="index<3" :key="index+10000" style="padding:15px;box-sizing:border-box" :span="8">
<div class="xinrenItem">
<p style="font-size:22px;font-weight:600;color:#fff;text-align:center;padding-top: 13px;">NO.{{item.Rank}}</p>
<el-row style="margin-top: 20px;">
<el-col :span="12" style="padding-left:10px">
<div class="imgDiv" :class="`imgDiv${index+1}`">
<img :src="item.Photo" alt="" :onerror="defaultImg">
</div>
</el-col>
<el-col class="info" :span="12">
<p>
<span>公司</span>
<span>{{item.BName}}</span>
</p>
<p>
<span>姓名</span>
<span>{{item.EmpName}}</span>
</p>
<p>
<span>收客数</span>
<span>总计{{item.TotalNum}}</span>
</p>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col class="monthbg" :span="6" style="height:372px">
<el-col class="monthbg" :span="7" style="height:372px">
<div style="margin-top:30px">
<img style="width:51px;height:23px;margin-left:10px" src="../../assets/img/competion/row.png" alt="">
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">月度对比</span>
</div>
<el-row style="margin-top:20px">
<el-col :span="18" style="padding-left:20px">
<div class="bgcan1">
<div class="bgcan2">
<div style="width: 200px;height: 200px;display:inline-block">
<nddb :newdata="NewMonthNum" :olddata="LastMonthNum" :colors="colorArray[0]" title="月度对比"></nddb>
</div>
</div>
</div>
</el-col>
<el-col :span="6" style="color:#fff;font-size: 14px;">
<p style="margin-top:50px;"><span class="dbspan dbspan1"></span>当月</p>
<p style="margin-top:15px;">收客： <span style="color:#2DA7D6">{{NewMonthNum}}</span> </p>
<p style="margin-top:15px;"><span class="dbspan dbspan2"></span>上月</p>
<p style="margin-top:15px;">收客：<span style="color:#FA9801">{{LastMonthNum}}</span> </p>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script>
// import nddb from "../visualization/nianduduibi";
import nddb from "./nianduduibi";
export default {
components: {
nddb
},
data() {
return {
colorArray: [
["#2DA7D6", "#FA9801"]
],
defaultImg: 'this.src="' + require('../../assets/img/litheader.png') + '"',
loading:false,
......@@ -538,6 +647,8 @@ export default {
GRList:[],
XRList:[],
monthactive:9,
LastMonthNum:0,
NewMonthNum:0,
};
},
mounted() {
......@@ -573,6 +684,8 @@ export default {
this.GRList=res.data.data.GRList;
this.XRList=res.data.data.XRList;
this.LastMonthNum=res.data.data.LastMonthNum;
this.NewMonthNum=res.data.data.NewMonthNum;
if(this.depATrendList.length>0){
this.depAXser=[];
......@@ -661,26 +774,7 @@ export default {
}
},
series:that.depAYser,
color: ['#023CA0', '#F24385','#FFA39A']
// series: [{
// data: that.datedata1,
// type: 'line',
// smooth: true,
// areaStyle: {
// normal: {
// color: '#DBE1FF' //改变区域颜色
// },
// },
// symbolSize: 0,
// itemStyle : {
// normal : {
// color:'#fff', //改变折线点的颜色
// lineStyle:{
// color:'#5D78FF' //改变折线颜色
// }
// }
// }
// }]
color: ['#F24385', '#FFA39A','#023CA0']
};
myChart.setOption(option);
},
......@@ -724,7 +818,7 @@ export default {
}
},
series:that.depBYser,
color: ['#023CA0', '#F24385','#FFA39A']
color: ['#6F2DC3', '#FFA037','#0FE7D8']
};
myChart.setOption(option);
......
src/components/activity/nianduduibi.vue 0 → 100644
View file @ f85975c3
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
</div>
</template>
<script>
export default {
props: {
newdata: {
type: Number,
default: 0
},
olddata: {
type: Number,
default: 0
},
colors:{
type:Array,
default:[]
},
title:{
type:String,
default:""
}
},
data() {
return {
placeHolderStyle: {
normal: {
color: "rgba(0,0,0,0)",
label: { show: false },
labelLine: { show: false }
},
emphasis: {
color: "rgba(0,0,0,0)"
}
}
};
},
mounted() {
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
let dataAlias = ["今年", "去年"];
let data2 = [{
name:"今年",
value:this.newdata
}, {
name:"去年",
value:this.olddata,
itemStyle:this.placeHolderStyle
}];
let data3 = [{
name:"去年",
value:this.olddata
},{
name:"今年",
value:this.newdata,
itemStyle:this.placeHolderStyle
}];
let option = {
tooltip: {
show:false
},
graphic: [
{
type: "text",
left:'center',
top: "center",
style: {
text: this.title,
textAlign: "center",
fill: this.colors[0], //文字的颜色
fontSize: 16,
width: 120,
fontFamily: "pingfangR"
}
}
],
calculable: true,
series: [
{
// center: ["25%", "45%"],
name: "订单来源",
type: "pie",
radius: ["80%", "90%"],
hoverAnimation: false,
legendHoverLink:false,
tooltip:false,
startAngle:90,
itemStyle: {
emphasis: {
barBorderRadius: 30
},
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: "#2DA7D6" },
{ offset: 0.35, color: "#2DA7D6" },
{ offset: 1, color: "#2DA7D6" }
])
}
},
data: data2
},
{
// center: ["25%", "45%"],
name: "订单来源",
type: "pie",
radius: ["60%", "70%"],
hoverAnimation: false,
legendHoverLink:false,
tooltip:false,
startAngle:90,
itemStyle: {
emphasis: {
barBorderRadius: 30
},
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: "#FA9801"},
{ offset: 0.35, color: "#FA9801" },
{ offset: 1, color: "#FA9801"}
])
}
},
data: data3
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment