Skip to content

M
Muse
Commit ba9cce03 authored by 黄媛媛's avatar 黄媛媛
Browse files
Options

业绩竞赛

parent 9d0ad942
Hide whitespace changes
Inline Side-by-side
Showing with 1029 additions and 0 deletions
src/components/viitto/PerCompetition.vue 0 → 100644
View file @ ba9cce03
<style>
.PerCompetition{
background: rgb(16,25,53);
padding:20px 8px;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
width: 100%;
height: 100%;
}
.PerCompetition::-webkit-scrollbar ,.content::-webkit-scrollbar,.el-cascader-menu::-webkit-scrollbar{
/*滚动条整体样式*/
width: 6px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 47px;
}
.PerCompetition::-webkit-scrollbar-thumb ,.content::-webkit-scrollbar-thumb,.el-cascader-menu::-webkit-scrollbar-thumb{
/*滚动条里面小方块*/
border-radius: 4px;
background: rgba(106,116,146, .35);
}
.PerCompetition::-webkit-scrollbar-track ,.content::-webkit-scrollbar-track,.el-cascader-menu::-webkit-scrollbar-track{
/*滚动条里面轨道*/
border-radius: 4px;
background: #252D48;
}
.PerCompetition .head{
height: 88px;
width: 100%;
background: url('../../assets/img/competion/top.png');
background-size:100% 100%;
}
.PerCompetition .monthcol{
padding-top: 36px;
}
.PerCompetition .monthcol span{
background: url('../../assets/img/competion/monthb.png');
background-size:100% 100%;
display: inline-block;
width: 114px;
height: 55px;
text-align: center;
margin-right: 20px;
font-size:30px;
font-family:PangMenZhengDao;
font-weight:400;
color:rgba(73,89,125,1);
cursor: pointer;
}
.PerCompetition .monthcol .active{
background: url('../../assets/img/competion/montha.png')!important;
background-size:100% 100%!important;
}
.PerCompetition .Pingbi{
height: 482px;
background: url('../../assets/img/competion/Pingbi.png');
background-size:100% 100%;
}
.PerCompetition .Pingbi .personNum{
display: inline-block;
border:1px solid rgba(2, 60, 160, 1);
border-radius:17px;
padding: 6px 22px;
}
.PerCompetition .Pingbi .rankDiv{
height: 390px;
width: 90%;
margin:0 auto;
margin-top: 10px;
background: url('../../assets/img/competion/phtoprank.png') bottom no-repeat;
background-size:contain;
position: relative;
background-position: 0 247px;
}
.PerCompetition .Pingbi .rankDiv .imgDiv1{
width: 198px;
height: 198px;
background: url('../../assets/img/competion/quan1.png')no-repeat;
background-size:100% 100%;
position: relative;
margin-top:13%;
}
.PerCompetition .Pingbi .rankDiv .imgDiv2{
width: 240px;
height: 240px;
background: url('../../assets/img/competion/quan2.png')no-repeat;
background-size:100% 100%;
position: relative;
}
.PerCompetition .Pingbi .rankDiv .imgDiv3{
width: 180px;
height: 180px;
background: url('../../assets/img/competion/quan3.png')no-repeat;
background-size:100% 100%;
position: relative;
margin-top:26%;
}
.PerCompetition .Pingbi .rankDiv .imgDiv{
color:#121534;
display: inline-flex;
align-items: center;
justify-content: center;
}
.PerCompetition .Pingbi .rankDiv .imgDiv img{
width: 68%;
height: 68%;
margin-top: 4%;
border-radius: 50%;
box-shadow: 0 0 5px 0 #fff;
}
.PerCompetition .Pingbi .rankDiv .imgDiv .desDiv{
text-align: center;
position: absolute;
bottom: -20px;
width: 100%;
}
.PerCompetition .Pingbi .rankDiv .imgDiv .desSpan{
display: inline-block;
padding: 2px 10px;
border-radius: 20px;
}
.PerCompetition .Pingbi .rankDiv .imgDiv .desSpan1{
background: #fff;
box-shadow: 0 0 5px 0 #fff;
}
.PerCompetition .Pingbi .rankDiv .imgDiv .desSpan2{
background: #FFF029;
box-shadow: 0 0 5px 0 #FFF029;
}
.PerCompetition .Pingbi .rankDiv .imgDiv .desSpan3{
background: #F5DBC0;
box-shadow: 0 0 5px 0 #F5DBC0;
}
.PerCompetition .zousi{
height: 482px;
background: url('../../assets/img/competion/zousi.png');
background-size:100% 100%;
}
.PerCompetition .zousi .colorSpan{
display: inline-block;
width:10px;
height:10px;
}
.PerCompetition .zousi .zouTitle0 .colorSpan{
background:rgba(242,67,133,1);
}
.PerCompetition .zousi .zouTitle1 .colorSpan{
background:rgb(255, 163, 154);
}
.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; */
background: url('../../assets/img/competion/grpingbi.png');
background-size:100% 100%;
padding: 20px 0;
box-sizing: border-box;
}
.PerCompetition .grPingbi .grDiv{
background: url('../../assets/img/competion/grdiv.png');
background-size:100% 100%;
width: 95%;
margin:10px auto;
padding: 20px 0;
}
.PerCompetition .grPingbi .grItem{
width: 200px;
display: inline-block;
text-align: center;
margin: 15px 0;
}
.PerCompetition .grPingbi .grItem .imgbg{
width: 125px;
height: 125px;
display: inline-block;
position: relative;
}
.PerCompetition .grPingbi .grItem .imgbg .imgDiv{
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
top: 0;
left: 0;
padding: 8px;
box-sizing: border-box;
}
.PerCompetition .grPingbi .grItem .imgbg .imgDiv img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.PerCompetition .el-progress /deep/ path:first-child {
stroke: #1B386D;
}
.PerCompetition .grPingbi .grItem .imgbg .imgnum{
position: absolute;
width: 36px;
height: 36px;
top: -19px;
left: 5px;
}
.PerCompetition .xinren{
background: url('../../assets/img/competion/xinren.png');
background-size:100% 100%;
}
.PerCompetition .xinren .xinrenItem{
background: url('../../assets/img/competion/xrItem.png');
background-size:100% 100%;
height: 232px;
}
.PerCompetition .xinren .xinrenItem .imgDiv{
height: 133px;
width: 184px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.PerCompetition .xinren .xinrenItem .imgDiv1{
background: url('../../assets/img/competion/xr1.png');
background-size:100% 100%;
}
.PerCompetition .xinren .xinrenItem .imgDiv2{
background: url('../../assets/img/competion/xr2.png');
background-size:100% 100%;
}
.PerCompetition .xinren .xinrenItem .imgDiv3{
background: url('../../assets/img/competion/xr3.png');
background-size:100% 100%;
}
.PerCompetition .xinren .xinrenItem .imgDiv img{
width: 110px;
height: 110px;
border-radius: 50%;
margin-top: 57px;
}
.PerCompetition .xinren .info p{
color:#fff;
margin-top:15px;
}
.PerCompetition .xinren .info p span:nth-child(1){
font-size:16px;
font-family:Microsoft YaHei;
font-weight:400;
color:#ccc;
display: inline-block;
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" element-loading-background="rgba(2,60,160,0.3)">
<el-row class="head">
<el-col class="monthcol" :span="8">
<span @click="ChangeMoth(10)" :class="monthactive==10?'active':''">10月</span>
<span @click="ChangeMoth(11)" :class="monthactive==11?'active':''">11月</span>
<span @click="ChangeMoth(12)" :class="monthactive==12?'active':''">12月</span>
</el-col>
<el-col :span="8" style="color:#fff;text-align:center">
<p style="font-size:34px;padding-top:10px">2019印象集团杯业绩竞赛</p>
<p style="font-size:14px">Performance Competition</p>
</el-col>
</el-row>
<!-- A组 -->
<el-row style="margin-top:20px">
<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}}人 &nbsp;小组：{{item.PeopleNum}}人</p>
</span>
</div>
</div>
<div v-else>&nbsp;</div>
</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}}人 &nbsp;小组：{{item.PeopleNum}}人</p>
</span>
</div>
</div>
</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}}人 &nbsp;小组：{{item.PeopleNum}}人</p>
</span>
</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col class="zousi" :span="11">
<el-row style="padding-top:15px">
<el-col :span="7" 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="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">
<span class="colorSpan"></span>
<span>{{item.DepName}}：总收客</span>
<span style="color:#FA9801;">{{item.TotalNum}}</span>
</span>
</el-col>
</el-row>
<div id="chartsMap" class="bgDiv" style="height:400px;width:100%;padding:20px 10px"></div>
</el-col>
</el-row>
<!-- B组 -->
<el-row style="margin-top:20px">
<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}}人 &nbsp;小组：{{item.PeopleNum}}人</p>
</span>
</div>
</div>
<div v-else>&nbsp;</div>
</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}}人 &nbsp;小组：{{item.PeopleNum}}人</p>
</span>
</div>
</div>
</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}}人 &nbsp;小组：{{item.PeopleNum}}人</p>
</span>
</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col class="zousi" :span="11">
<el-row style="padding-top:15px">
<el-col :span="7" 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="16" style="margin-top: 18px;">
<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>
</span>
</el-col>
</el-row>
<div id="chartsMap2" class="bgDiv" style="height:400px;width:100%;padding:20px 10px"></div>
</el-col>
</el-row>
<!-- 个人评比 -->
<el-row v-if="GRList.length>0" class="grPingbi" style="margin-top:20px;margin-left:8px">
<div 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:26px">个人评比</span>
</div>
<div class="grDiv">
<div v-if="index<3" v-for="(item,index) in GRList" :key="index+500" class="grItem">
<div class="imgbg">
<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 :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 v-if="index>2" v-for="(item,index) in GRList" :key="index+500" class="grItem">
<div class="imgbg">
<el-progress :show-text="false" color="#023CA0" :stroke-width="10" type="circle" :percentage="item.Avg"></el-progress>
<div class="imgDiv">
<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>
</el-row>
<!--新人评比 -->
<el-row style="margin-top:20px">
<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 v-if="index==0" src="../../assets/img/competion/xr1.png" alt="">
<img v-if="index==1" src="../../assets/img/competion/xr2.png" alt="">
<img v-if="index==2" src="../../assets/img/competion/xr3.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.Avg}}</span>
</p>
<p>
<span>收客数</span>
<span>{{item.TotalNum}}人</span>
</p>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
<el-col class="monthbg" :span="7" style="height:372px">
<div style="margin-top:30px">
<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 v-if="MonthState" 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 {
MonthState:false,
colorArray: [
["#2DA7D6", "#FA9801"]
],
defaultImg: 'this.src="' + require('../../assets/img/litheader.png') + '"',
loading:false,
Month:'2019-10',
depAList:[],
depBList:[],
depATrendList:[],
depAXser:[],
depAYser:[],
depBTrendList:[],
depBXser:[],
depBYser:[],
GRList:[],
XRList:[],
monthactive:10,
LastMonthNum:0,
NewMonthNum:0,
};
},
mounted() {
this.GetData();
},
methods: {
ChangeMoth(num){
this.MonthState=false;
if(num==12){
this.Month='2019-12';
}
if(num==10){
this.Month='2019-10';
}
if(num==11){
this.Month='2019-11';
}
this.monthactive=num;
this.GetData();
},
GetData(){
this.loading=true;
this.apipost('sellorder_get_GetCompanyTrophyCompetitionRank', {Month:this.Month}, res => {
this.loading=false;
if (res.data.resultCode == 1) {
this.depAList=res.data.data.depAList;
this.depBList=res.data.data.depBList;
this.depATrendList=res.data.data.depATrendList;
this.depBTrendList=res.data.data.depBTrendList;
this.GRList=res.data.data.GRList;
this.XRList=res.data.data.XRList;
this.LastMonthNum=res.data.data.LastMonthNum;
this.NewMonthNum=res.data.data.NewMonthNum;
this.MonthState=true;
this.depAXser=[];
this.depAYser=[];
if(this.depATrendList.length>0){
this.depATrendList[0].MonthList.forEach(item=>{
this.depAXser.push(item.Day);
})
this.depATrendList.forEach(item=>{
let obj={
name:item.DepName,
type:'line',
data:[],
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
};
item.MonthList.forEach(val=>{
obj.data.push(val.Num);
})
this.depAYser.push(obj)
})
}
this.depBXser=[];
this.depBYser=[];
if(this.depBTrendList.length>0){
this.depBTrendList[0].MonthList.forEach(item=>{
this.depBXser.push(item.Day);
})
this.depBTrendList.forEach(item=>{
let obj={
name:item.DepName,
type:'line',
data:[],
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
};
item.MonthList.forEach(val=>{
obj.data.push(val.Num);
})
this.depBYser.push(obj)
})
}
this.LineChart();
this.LineChart2();
} else {
}
}, err => {
})
},
LineChart(){
var that = this;
var myChart = this.$echarts.init(document.getElementById('chartsMap'));
var option={
textStyle: {
fontFamily: 'PINGFANG REGULAR',
},
title: {
color:"#2C3343"
},
// 提示框
tooltip: {
trigger: 'axis',
axisPointer: {
animation: true,
symbol:'',
type: 'cross',
label: {
backgroundColor: 'transparent',
},
lineStyle: {
width: 2,
color: 'rgba(255,255,255,.1)'
}
},
backgroundColor: '#032761',
confine: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
// 设置x轴颜色
color: '#DADADA'
}
},
data:that.depAXser
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
// 设置y轴颜色
color: '#DADADA',
}
},
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#023CA0',
}
}
},
series:that.depAYser,
color: ['#F24385', '#FFA39A','#023CA0']
};
// myChart.setOption(option);
myChart.setOption(option,true);
},
LineChart2(){
var that = this;
var myChart = this.$echarts.init(document.getElementById('chartsMap2'));
var option={
title: {
color:"#2C3343"
},
// 提示框
tooltip: {
trigger: 'axis',
axisPointer: {
animation: true,
symbol:'',
type: 'cross',
label: {
backgroundColor: 'transparent',
},
lineStyle: {
width: 2,
color: 'rgba(255,255,255,.1)'
}
},
backgroundColor: '#032761',
confine: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
// 设置x轴颜色
color: '#DADADA'
}
},
data:that.depBXser
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
// 设置y轴颜色
color: '#DADADA',
}
},
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#023CA0',
}
}
},
series:that.depBYser,
color: ['#6F2DC3', '#FFA037','#0FE7D8']
};
myChart.setOption(option,true);
},
}
};
</script>
\ No newline at end of file
src/components/viitto/nianduduibi.vue 0 → 100644
View file @ ba9cce03
<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,true);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
}
</style>
src/router.js
View file @ ba9cce03
...@@ -5,6 +5,8 @@ import index from './views/index' ...@@ -5,6 +5,8 @@ import index from './views/index'
import viittoData from './components/viitto/viittoData' import viittoData from './components/viitto/viittoData'
import viittoData2 from './components/viitto/viittoData2' import viittoData2 from './components/viitto/viittoData2'
import dataLook from './components/viitto/dataLook' import dataLook from './components/viitto/dataLook'
import PerCompetition from './components/viitto/PerCompetition'
Vue.use(Router) Vue.use(Router)
export default new Router({ export default new Router({
...@@ -40,6 +42,11 @@ export default new Router({ ...@@ -40,6 +42,11 @@ export default new Router({
path: '/dataLook', path: '/dataLook',
name: 'dataLook', name: 'dataLook',
component: dataLook, component: dataLook,
},
{
path: '/PerCompetition',
name: 'PerCompetition',
component: PerCompetition,
} }
] ]
}) })
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