|
|
|
@@ -2,31 +2,7 @@ |
|
|
|
<div class="box-center"> |
|
|
|
<!-- 头 --> |
|
|
|
<div class="app-top"> |
|
|
|
<div class="app-titel" v-if="orgType != 3"> |
|
|
|
<div |
|
|
|
class="label" |
|
|
|
style="color: #32363d; font-weight: 400; font-size: 16px; margin-left: 30px;" |
|
|
|
> |
|
|
|
楼盘选择： |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-select |
|
|
|
v-model="houseId" |
|
|
|
@change="houseChange" |
|
|
|
placeholder="请选择" |
|
|
|
filterable |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in houseList" |
|
|
|
:key="item.id" |
|
|
|
:label="item.propertyName" |
|
|
|
:value="item.id" |
|
|
|
> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="app-titel" style="margin-top: 10px"> |
|
|
|
<div class="app-titel"> |
|
|
|
<div class="titel-text">接待时间</div> |
|
|
|
<div class="toptimeqhuan"> |
|
|
|
<div :class="{ tophove: timeType == 4 }" @click="tabtimetap(4)"> |
|
|
|
@@ -39,10 +15,11 @@ |
|
|
|
近30天 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="margin-left: 26px"> |
|
|
|
<div style="margin-left: 20px"> |
|
|
|
<el-date-picker |
|
|
|
@change="confirmtime" |
|
|
|
v-model="customtime" |
|
|
|
:clearable='false' |
|
|
|
type="daterange" |
|
|
|
range-separator="-" |
|
|
|
format="yyyy-MM-dd" |
|
|
|
@@ -53,19 +30,15 @@ |
|
|
|
> |
|
|
|
</el-date-picker> |
|
|
|
</div> |
|
|
|
<div style="margin-left: 26px"> |
|
|
|
<div style="margin-left: 20px"> |
|
|
|
<el-checkbox v-model="checked" @change="radioChange" |
|
|
|
>对比时间段</el-checkbox |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div style="margin-left: 26px"> |
|
|
|
<div v-if="checked"> |
|
|
|
<div class="demonstration timeSel" @click="show"> |
|
|
|
{{ selectTime1 ? "时段二： " : "请选择： " |
|
|
|
}}<span v-if="selectTime1">{{ |
|
|
|
selectTime + "-" + selectTime1 |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div v-if="checked" style="margin-left: 20px;border:1px solid #DCDFE6;min-width: 220px;height: 30px;border-radius: 4px;max-width:250px; |
|
|
|
font-size: 13px; line-height: 30px; text-indent: 8px;" @click="show"> |
|
|
|
{{ selectTime1 ? "时段二： " : "请选择： "}} |
|
|
|
<span v-if="selectTime1">{{ selectTime + "-" + selectTime1}}</span> |
|
|
|
<el-date-picker |
|
|
|
style="opacity: 0" |
|
|
|
v-model="time" |
|
|
|
@@ -78,55 +51,56 @@ |
|
|
|
:picker-options="pickerOptions" |
|
|
|
> |
|
|
|
</el-date-picker> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- //卡片 --> |
|
|
|
<div class="kapian-box"> |
|
|
|
<div class="kayi"> |
|
|
|
<div class="shang"> |
|
|
|
<div class="zuo"> |
|
|
|
<div class="text1">有效接待</div> |
|
|
|
<div class="text2">2</div> |
|
|
|
<div class="text2">{{cardobj.startSumCustomer||0}}个</div> |
|
|
|
</div> |
|
|
|
<div class="you"> |
|
|
|
<img class="youimg" src="/img/waves1.png" alt="" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="xia"> |
|
|
|
<span class="span1">对比:78</span> |
|
|
|
<span class="span2">50%</span> |
|
|
|
<div v-if="Confirmthecontrast" class="xia"> |
|
|
|
<span class="span1">对比:{{cardobj.endSumCustomer ||0}}个</span> |
|
|
|
<span class="span2">{{cardobj.contrastSumCustomer ||0}}%</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="kayi"> |
|
|
|
<div class="shang"> |
|
|
|
<div class="zuo"> |
|
|
|
<div class="text1">平均执行率</div> |
|
|
|
<div class="text2">2</div> |
|
|
|
<div class="text2">{{cardobj.startFraction||0}}%</div> |
|
|
|
</div> |
|
|
|
<div class="you"> |
|
|
|
<img class="youimg" src="/img/waves2.png" alt="" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="xia"> |
|
|
|
<span class="span1">对比:78</span> |
|
|
|
<span class="span2">50%</span> |
|
|
|
<div v-if="Confirmthecontrast" class="xia"> |
|
|
|
<span class="span1">对比:{{cardobj.endFraction ||0}}%</span> |
|
|
|
<span class="span2">{{cardobj.contrastFraction ||0}}%</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="kayi" style="margin: 0px"> |
|
|
|
<div class="shang"> |
|
|
|
<div class="zuo"> |
|
|
|
<div class="text1">平均接待时长</div> |
|
|
|
<div class="text2">2</div> |
|
|
|
<div class="text1">平均接待时长/min</div> |
|
|
|
<div class="text2">{{Math.floor(cardobj.startSumDuration/60)||0}}</div> |
|
|
|
</div> |
|
|
|
<div class="you"> |
|
|
|
<img class="youimg" src="/img/waves3.png" alt="" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="xia"> |
|
|
|
<span class="span1">对比:78</span> |
|
|
|
<span class="span2">50%</span> |
|
|
|
<div v-if="Confirmthecontrast" class="xia"> |
|
|
|
<span class="span1">对比:{{Math.floor(cardobj.endSumDuration/60) ||0}}</span> |
|
|
|
<span class="span2">{{cardobj.contrastSumDuration ||0}}%</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@@ -175,19 +149,30 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 表格 --> |
|
|
|
<div class="app-box-san"> |
|
|
|
<div class="app-box-san" v-if="Confirmthecontrast"> |
|
|
|
<div class="santitle">对比报表</div> |
|
|
|
<div class="santab"> |
|
|
|
<el-table :data="tableData" height="400" border style="width: 100%"> |
|
|
|
<el-table-column prop="date" label="时间" align="center"> |
|
|
|
<el-table-column prop="name" label="时间" align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="name" label="时段1" align="center"> |
|
|
|
<el-table-column prop="shiduan1" label="时段1" align="center"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span>{{scope.row.shiduan1}}%</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="address" label="时段2" align="center"> |
|
|
|
<el-table-column prop="shiduan2" label="时段2" align="center"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span>{{scope.row.shiduan2}}%</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="address" label="变化" align="center"> |
|
|
|
<el-table-column prop="heji" label="变化" align="center"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span v-if="scope.row.heji>0"> <i class="el-icon-top" style="color: red;"></i>{{scope.row.heji}}%</span> |
|
|
|
<span v-if="scope.row.heji<0"> <i class="el-icon-bottom" style="color: 25CEBA;"></i>{{scope.row.heji}}%</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@@ -199,80 +184,132 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
timeType: 4, |
|
|
|
time: "", |
|
|
|
customtime: [], |
|
|
|
houseList: [], |
|
|
|
orgType: localStorage.getItem("orgType"), |
|
|
|
page: { |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 6, |
|
|
|
openTime: "", |
|
|
|
closeTime: "", |
|
|
|
houseName: "", |
|
|
|
accountName: "", |
|
|
|
imei: "", |
|
|
|
total: "", |
|
|
|
recording: "", |
|
|
|
}, |
|
|
|
pickerOptions: { |
|
|
|
disabledDate(time) { |
|
|
|
//根据当前日期 --- 禁止选中之后的日期 |
|
|
|
return time.getTime() > Date.now(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
selectTime1: "", |
|
|
|
selectTime: "", |
|
|
|
aliasclass: 1, |
|
|
|
fromobj: { |
|
|
|
starttime: "", |
|
|
|
endoftime: "", |
|
|
|
time: "",//对比时间的数组 |
|
|
|
page: { |
|
|
|
openTime: "", |
|
|
|
closeTime: "", |
|
|
|
}, |
|
|
|
houseId: "", |
|
|
|
options: [ |
|
|
|
{ |
|
|
|
value: "选项1", |
|
|
|
label: "黄金糕", |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: "选项2", |
|
|
|
label: "双皮奶", |
|
|
|
}, |
|
|
|
], |
|
|
|
customtime: [],//自定义时间 |
|
|
|
selectTime1: "",//对比时间 |
|
|
|
selectTime: "",//对比时间 |
|
|
|
aliasclass: 1,//tab下标 |
|
|
|
houseId: "",//楼盘id |
|
|
|
options: [], |
|
|
|
value: "", |
|
|
|
checked: false, |
|
|
|
value1: "99999999999999", |
|
|
|
tableData: [], |
|
|
|
checked: false,//是否对比 |
|
|
|
Confirmthecontrast:false, |
|
|
|
tableData: [],//表格数据 |
|
|
|
cardobj:{} |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
|
|
|
|
this.zkhousePage(); |
|
|
|
this.houseId = localStorage.getItem("houseId"); |
|
|
|
this.tabtimetap(4); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
tapChange(idx){ |
|
|
|
this.aliasclass=idx |
|
|
|
//获取卡片 |
|
|
|
trendtrendAnalysis(){ |
|
|
|
let pamaet={ |
|
|
|
showStatus:'', |
|
|
|
houseId:this.houseId, |
|
|
|
timeType:0, |
|
|
|
firstStartDate:this.page.openTime, |
|
|
|
firstEndDate:this.page.closeTime, |
|
|
|
lastStartDate:this.selectTime, |
|
|
|
lastEndDate:this.selectTime1 |
|
|
|
} |
|
|
|
if(this.timeType==-1){ |
|
|
|
pamaet.timeType=null |
|
|
|
}else{ |
|
|
|
pamaet.timeType=this.timeType |
|
|
|
} |
|
|
|
if(this.checked==true){ |
|
|
|
pamaet.showStatus=1; |
|
|
|
pamaet.timeType=null |
|
|
|
}else{ |
|
|
|
pamaet.showStatus=0 |
|
|
|
} |
|
|
|
this.$api.http.trendtrendAnalysis(pamaet).then((res) => { |
|
|
|
this.cardobj=res.data; |
|
|
|
if(this.aliasclass==1){ |
|
|
|
this.trendtrendAnalysisProject(pamaet) |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
}, |
|
|
|
zkhousePage() { |
|
|
|
this.$api.api |
|
|
|
.findHouseByUser({ |
|
|
|
orgType: localStorage.getItem("orgType"), |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
// console.log(res) |
|
|
|
this.houseList = res.data; |
|
|
|
if (localStorage.getItem("orgType") == 3) { |
|
|
|
this.houseId = localStorage.getItem("houseId"); |
|
|
|
} else { |
|
|
|
this.houseId = res.data[0].id; |
|
|
|
} |
|
|
|
this.SwitchCARDS(); |
|
|
|
this.tabtimetap(4); |
|
|
|
}); |
|
|
|
//项目 |
|
|
|
trendtrendAnalysisProject(pamaet){ |
|
|
|
this.$api.http.trendtrendAnalysisProject(pamaet).then((res) => { |
|
|
|
if(this.Confirmthecontrast==false){ |
|
|
|
let newlist=res.data.startList || []; |
|
|
|
var newline=[]; |
|
|
|
var newline2=[]; |
|
|
|
newlist.map(item=>{ |
|
|
|
newline.push(item.fraction) |
|
|
|
newline2.push(item.statDate.slice(5,10)) |
|
|
|
}) |
|
|
|
this.SwitchCARDS(newline,newline2) |
|
|
|
}else{ |
|
|
|
let newlist=res.data.startList || []; |
|
|
|
let newlist2=res.data.endList || []; |
|
|
|
let hejilist=res.data.comparedList || []; |
|
|
|
var newline=[];//起始数据 |
|
|
|
var newline2=[];//对比数据 |
|
|
|
var newline1=[];//时间 |
|
|
|
|
|
|
|
let arr=[]; |
|
|
|
newlist.map(item=>{ |
|
|
|
newline.push(item.fraction) |
|
|
|
}) |
|
|
|
newlist2.map(item=>{ |
|
|
|
newline1.push(item.fraction) |
|
|
|
}) |
|
|
|
newlist.forEach((item, sdf) => { |
|
|
|
newlist2.forEach((child, zxc) => { |
|
|
|
if (sdf == zxc) { |
|
|
|
newline2.push(item.statDate.substring(5,10) + 'vs' + child.statDate.substring(5, 10)) |
|
|
|
arr.push({ |
|
|
|
name:item.statDate.substring(5,10) + 'vs' + child.statDate.substring(5, 10), |
|
|
|
shiduan1:item.fraction, |
|
|
|
shiduan2:child.fraction, |
|
|
|
}); |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
hejilist.forEach((acd,xdx)=>{ |
|
|
|
arr.forEach((che,ind)=>{ |
|
|
|
if(xdx==ind){ |
|
|
|
che.heji=acd.fraction; |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
arr.unshift({ |
|
|
|
name:'项目合计', |
|
|
|
shiduan1:res.data.startSum, |
|
|
|
shiduan2:res.data.endSum, |
|
|
|
heji:res.data.comparedSum, |
|
|
|
}) |
|
|
|
|
|
|
|
this.SwitchCARDS2(newline,newline1,newline2) |
|
|
|
this.tableData=arr; |
|
|
|
console.log( this.tableData) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
houseChange() {}, |
|
|
|
|
|
|
|
//选项卡切换 |
|
|
|
tapChange(idx){ |
|
|
|
this.aliasclass=idx; |
|
|
|
this.trendtrendAnalysis() |
|
|
|
}, |
|
|
|
//时间tab切换 |
|
|
|
tabtimetap(i) { |
|
|
|
this.timeType = i; |
|
|
|
// this.getTableList() |
|
|
|
this.checked = false; |
|
|
|
this.selectTime = ""; |
|
|
|
this.selectTime1 = ""; |
|
|
|
@@ -288,42 +325,30 @@ export default { |
|
|
|
if (this.timeType == 6) { |
|
|
|
num = 24 * 3600 * 1000 * 29; |
|
|
|
} |
|
|
|
|
|
|
|
this.customtime = [ |
|
|
|
this.timestampToTime(new Date().getTime() - num), |
|
|
|
this.timestampToTime(new Date().getTime()), |
|
|
|
]; |
|
|
|
this.$set(this, "time", null); |
|
|
|
// this.getTableList(); |
|
|
|
// this.getdetail(); |
|
|
|
this.Confirmthecontrast=false; |
|
|
|
this.trendtrendAnalysis() |
|
|
|
}, |
|
|
|
// 对比时间选择弹框显示 |
|
|
|
show() { |
|
|
|
this.$refs.time.pickerVisible = true; |
|
|
|
}, |
|
|
|
//选择对比时间 |
|
|
|
timeChange(e) { |
|
|
|
// console.log(e) |
|
|
|
// this.selectTime=e |
|
|
|
// 对数据进行处理 |
|
|
|
// 当当前选择的为自定义时间时 |
|
|
|
this.selectTime = ""; |
|
|
|
this.selectTime1 = ""; |
|
|
|
this.timeSelect(e); |
|
|
|
// this.getdetail(); |
|
|
|
// this.getcompare(); |
|
|
|
}, |
|
|
|
timeSelect(e) { |
|
|
|
console.log(this.$refs.time); |
|
|
|
if (this.timeType == -1) { |
|
|
|
// 将两者的时间戳相减，然后在在选择的自定义时间的时间戳想加 |
|
|
|
// console.log(e,this.page.openTime,this.page.closeTime) |
|
|
|
// console.log(new Date(e).getTime(),new Date(this.page.openTime).getTime(),new Date(this.page.closeTime).getTime(),'时间戳') |
|
|
|
// console.log(this.timestampToTime(new Date(e).getTime()+new Date(this.page.closeTime).getTime()-new Date(this.page.openTime).getTime())) |
|
|
|
this.selectTime = e; |
|
|
|
this.selectTime1 = this.timestampToTime( |
|
|
|
new Date(e).getTime() + |
|
|
|
new Date(this.page.closeTime).getTime() - |
|
|
|
new Date(this.page.openTime).getTime() |
|
|
|
); |
|
|
|
this.selectTime1 = this.timestampToTime(new Date(e).getTime()+new Date(this.page.closeTime).getTime()-new Date(this.page.openTime).getTime()); |
|
|
|
} else { |
|
|
|
// 获取今天昨天近一周 |
|
|
|
// 获取一天的时间戳 |
|
|
|
@@ -338,65 +363,122 @@ export default { |
|
|
|
if (this.timeType == 6) { |
|
|
|
num = 24 * 3600 * 1000 * 29; |
|
|
|
} |
|
|
|
// console.log(-this.timeType*num) |
|
|
|
// this.selectTime=this.timestampToTime(new Date().getTime()-this.timeType*num) |
|
|
|
this.selectTime = e; |
|
|
|
this.selectTime1 = this.timestampToTime(new Date(e).getTime() + num); |
|
|
|
} |
|
|
|
this.Confirmthecontrast=true; |
|
|
|
this.page.openTime=this.customtime[0] |
|
|
|
this.page.closeTime=this.customtime[1] |
|
|
|
this.trendtrendAnalysis() |
|
|
|
}, |
|
|
|
radioChange() { |
|
|
|
this.selectTime = ""; |
|
|
|
this.selectTime1 = ""; |
|
|
|
// this.compareList = []; |
|
|
|
this.$set(this, "time", null); |
|
|
|
}, |
|
|
|
//选择自定义时间 |
|
|
|
confirmtime(e) { |
|
|
|
this.timeType = "-1"; |
|
|
|
// if(this.customtime==''){ }else{ |
|
|
|
// const d = new Date(this.customtime[0]) |
|
|
|
// this.page.openTime = d.getFullYear() + '-' + this.Zeropadding((d.getMonth() + 1)) + '-' + this.Zeropadding(d.getDate()) |
|
|
|
// const c = new Date(this.customtime[1]) |
|
|
|
// this.page.closeTime = c.getFullYear() + '-' + this.Zeropadding((c.getMonth() + 1)) + '-' + this.Zeropadding(c.getDate()) |
|
|
|
// } |
|
|
|
this.checked = false; |
|
|
|
this.selectTime = ""; |
|
|
|
this.selectTime1 = ""; |
|
|
|
this.$set(this, "time", null); |
|
|
|
console.log(e); |
|
|
|
if (!e) return; |
|
|
|
this.page.openTime = this.customtime[0]; |
|
|
|
this.page.closeTime = this.customtime[1]; |
|
|
|
// this.getTableList() |
|
|
|
// this.getdetail() |
|
|
|
this.Confirmthecontrast=false; |
|
|
|
this.trendtrendAnalysis() |
|
|
|
}, |
|
|
|
timestampToTime(timestamp) { |
|
|
|
var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000 |
|
|
|
// var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000 |
|
|
|
|
|
|
|
var yyyy = date.getFullYear() + "-"; |
|
|
|
var MM =(date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1): date.getMonth() + 1) + "-"; |
|
|
|
var dd =(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()); |
|
|
|
return yyyy + MM + dd; |
|
|
|
}, |
|
|
|
|
|
|
|
var MM = |
|
|
|
(date.getMonth() + 1 < 10 |
|
|
|
? "0" + (date.getMonth() + 1) |
|
|
|
: date.getMonth() + 1) + "-"; |
|
|
|
|
|
|
|
// var dd = date.getDate() + ' '; |
|
|
|
var dd = |
|
|
|
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " "; |
|
|
|
|
|
|
|
// var HH = date.getHours() + ':'; |
|
|
|
// var HH = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':'; |
|
|
|
// |
|
|
|
// // var mm = date.getMinutes() + ':'; |
|
|
|
// var mm = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':'; |
|
|
|
// |
|
|
|
// // var ss = date.getSeconds(); |
|
|
|
// var ss = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds()); |
|
|
|
SwitchCARDS(newline,newline2) { |
|
|
|
echarts.init(document.getElementById("main")).dispose(); |
|
|
|
var chartDom = document.getElementById("main"); |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
var option; |
|
|
|
|
|
|
|
// return yyyy+MM+dd+HH+mm+ss; |
|
|
|
return yyyy + MM + dd; |
|
|
|
option = { |
|
|
|
tooltip: { |
|
|
|
trigger: "axis", |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
data: ["起始时间"], |
|
|
|
bottom: "10", |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
left: 10, |
|
|
|
right: 10, |
|
|
|
|
|
|
|
containLabel: true, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: "category", |
|
|
|
data: newline2, |
|
|
|
axisLabel: { |
|
|
|
//重点在这一块，其余可以忽略 |
|
|
|
textStyle: { |
|
|
|
color: "#212121", //更改坐标轴文字颜色 |
|
|
|
}, |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
type: "solid", |
|
|
|
color: "#DDE1EE", //x线的颜色 |
|
|
|
width: "1", //坐标线的宽度 |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: "value", |
|
|
|
splitNumber: 4, |
|
|
|
axisLabel: { |
|
|
|
//重点在这一块，其余可以忽略 |
|
|
|
textStyle: { |
|
|
|
color: "#212121", //更改坐标轴文字颜色 |
|
|
|
}, |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
ype: "solid", |
|
|
|
color: "#DDE1EE", //x线的颜色 |
|
|
|
width: "1", //坐标线的宽度 |
|
|
|
}, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
lineStyle: { |
|
|
|
type: "dashed", // y轴分割线类型 |
|
|
|
}, |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
//y轴刻度线 |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: "起始时间", |
|
|
|
data:newline, |
|
|
|
type: "line", |
|
|
|
smooth: true, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
window.addEventListener("resize", () => { |
|
|
|
myChart.resize(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
SwitchCARDS() { |
|
|
|
SwitchCARDS2(newline,newline1,newline2) { |
|
|
|
echarts.init(document.getElementById("main")).dispose(); |
|
|
|
var chartDom = document.getElementById("main"); |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
var option; |
|
|
|
@@ -406,7 +488,7 @@ export default { |
|
|
|
trigger: "axis", |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
data: ["来访人数/个"], |
|
|
|
data: ["起始时间","对比时间"], |
|
|
|
bottom: "10", |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
@@ -417,7 +499,7 @@ export default { |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: "category", |
|
|
|
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], |
|
|
|
data: newline2, |
|
|
|
axisLabel: { |
|
|
|
//重点在这一块，其余可以忽略 |
|
|
|
textStyle: { |
|
|
|
@@ -460,11 +542,17 @@ export default { |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: "来访人数/个", |
|
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320], |
|
|
|
name: "起始时间", |
|
|
|
data:newline, |
|
|
|
type: "line", |
|
|
|
smooth: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "对比时间", |
|
|
|
data:newline1, |
|
|
|
type: "line", |
|
|
|
smooth: true, |
|
|
|
} |
|
|
|
], |
|
|
|
}; |
|
|
|
|
|
|
|
@@ -556,7 +644,7 @@ export default { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
.zuo { |
|
|
|
flex: 1; |
|
|
|
width: 50%; |
|
|
|
.text1 { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 400; |
|
|
|
@@ -573,7 +661,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.you { |
|
|
|
flex: 2; |
|
|
|
width:50%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
.youimg { |
|
|
|
|
