|
@@ -107,7 +107,7 @@
|
|
|
:style="kuaishou.costProportion>0?'color:red':'color:#0bcd74'"
|
|
|
class="styleElse"
|
|
|
style=" margin-left:0"
|
|
|
- >{{(kuaishou.costProportion*100).toFixed(2)+'%'}}</span>
|
|
|
+ >{{Math.abs(kuaishou.costProportion*100).toFixed(2)+'%'}}</span>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
<a-col :span="6">
|
|
@@ -137,7 +137,7 @@
|
|
|
:style="kuaishou.photoClickProportion>0?'color:red':'color:#0bcd74'"
|
|
|
style="margin-left:0"
|
|
|
class="styleElse"
|
|
|
- >{{(kuaishou.photoClickProportion*100).toFixed(2)+'%'}}</span>
|
|
|
+ >{{Math.abs(kuaishou.photoClickProportion*100).toFixed(2)+'%'}}</span>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
<a-col :span="6">
|
|
@@ -167,7 +167,7 @@
|
|
|
:style="kuaishou.showProportion>0?'color:red':'color:#0bcd74'"
|
|
|
class="styleElse"
|
|
|
style=" margin-left:0"
|
|
|
- >{{(kuaishou.showProportion*100).toFixed(2)+'%'}}</span>
|
|
|
+ >{{Math.abs(kuaishou.showProportion*100).toFixed(2)+'%'}}</span>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
<a-col :span="6">
|
|
@@ -198,7 +198,7 @@
|
|
|
:style="kuaishou.aClickProportion>0?'color:red':'color:#0bcd74'"
|
|
|
class="styleElse"
|
|
|
style=" margin-left:0"
|
|
|
- >{{(kuaishou.aClickProportion*100).toFixed(2)+'%'}}</span>
|
|
|
+ >{{Math.abs(kuaishou.aClickProportion*100).toFixed(2)+'%'}}</span>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
@@ -215,7 +215,7 @@
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-modal title="数据对比" v-model="visible" width="80%" class="yincang">
|
|
|
- <a-radio-group v-model="value" style="margin-bottom:10px">
|
|
|
+ <a-radio-group v-model="value" style="margin-bottom:10px" @change="clear">
|
|
|
<a-radio-button value="month">对比月</a-radio-button>
|
|
|
<a-radio-button value="day">对比天</a-radio-button>
|
|
|
</a-radio-group>
|
|
@@ -237,9 +237,10 @@
|
|
|
/>
|
|
|
<a-button type="primary" style="margin-left:5px" @click="search">查询</a-button>
|
|
|
</div>
|
|
|
- <a-row :gutter="15" style="margin-top:15px" v-if="contrastDataAll">
|
|
|
+ <a-row :gutter="15" style="margin-bottom:15px;margin-top:15px" v-if="contrastDataAll">
|
|
|
<a-col :span="6">
|
|
|
<a-card title="总消耗对比">
|
|
|
+ <!-- <div id="chart3" style="width:100%;height:186px"></div> -->
|
|
|
<p>{{contrastDataAll.beCompared.statDate}}:{{contrastDataAll.beCompared.cost}}</p>
|
|
|
<p>
|
|
|
{{contrastDataAll.compared.statDate}}:{{contrastDataAll.compared.cost}}
|
|
@@ -265,7 +266,7 @@
|
|
|
:style="contrastDataAll.compared.costProportion>0?'color:red':'color:#0bcd74'"
|
|
|
class="styleElse"
|
|
|
style=" margin-left:0"
|
|
|
- >{{contrastDataAll.compared.costProportion.toFixed(2)+'%'}}</span>
|
|
|
+ >{{Math.abs(contrastDataAll.compared.costProportion).toFixed(2)+'%'}}</span>
|
|
|
</p>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
@@ -296,7 +297,7 @@
|
|
|
:style="contrastDataAll.compared.photoClickProportion>0?'color:red':'color:#0bcd74'"
|
|
|
class="styleElse"
|
|
|
style=" margin-left:0"
|
|
|
- >{{contrastDataAll.compared.photoClickProportion.toFixed(2)+'%'}}</span>
|
|
|
+ >{{Math.abs(contrastDataAll.compared.photoClickProportion).toFixed(2)+'%'}}</span>
|
|
|
</p>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
@@ -327,7 +328,7 @@
|
|
|
:style="contrastDataAll.compared.showProportion>0?'color:red':'color:#0bcd74'"
|
|
|
class="styleElse"
|
|
|
style=" margin-left:0"
|
|
|
- >{{contrastDataAll.compared.showProportion.toFixed(2)+'%'}}</span>
|
|
|
+ >{{Math.abs(contrastDataAll.compared.showProportion).toFixed(2)+'%'}}</span>
|
|
|
</p>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
@@ -358,15 +359,27 @@
|
|
|
:style="contrastDataAll.compared.comparedAclick>0?'color:red':'color:#0bcd74'"
|
|
|
class="styleElse"
|
|
|
style=" margin-left:0"
|
|
|
- >{{contrastDataAll.compared.comparedAclick.toFixed(2)+'%'}}</span>
|
|
|
+ >{{Math.abs(contrastDataAll.compared.comparedAclick).toFixed(2)+'%'}}</span>
|
|
|
</p>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-row v-else>
|
|
|
- <a-col :span="24" style="text-align:center;height:20px;line-height:20px">暂无数据</a-col>
|
|
|
+ <a-col :span="24" style="text-align:center;height:186px;line-height:186px">暂无数据</a-col>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
+ <a-row :gutter="10">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-card
|
|
|
+ style="width:100%"
|
|
|
+ :tabList="tabListNoTitle"
|
|
|
+ :activeTabKey="noTitleKeyTwo"
|
|
|
+ @tabChange="key => onTabChange(key, 'noTitleKeyTwo')"
|
|
|
+ >
|
|
|
+ <div id="chart1" style="width:100%;height:500px"></div>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
</a-row>
|
|
|
- <div id="chart1" style="width:100%;height:500px"></div>
|
|
|
</a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -376,7 +389,7 @@ import ARow from 'ant-design-vue/es/grid/Row'
|
|
|
import ACol from 'ant-design-vue/es/grid/Col'
|
|
|
import moment from 'moment'
|
|
|
import countTo from 'vue-count-to'
|
|
|
-import { getAccountReport, getKsAccountReport, getKsDetail } from '@api/video.js'
|
|
|
+import { getAccountReport, getKsAccountReport, getKsDetail, getReportList } from '@api/video.js'
|
|
|
import { getAction, postAction } from '@/api/manage'
|
|
|
// 引入基本模板
|
|
|
let echarts = require('echarts/lib/echarts')
|
|
@@ -389,6 +402,7 @@ require('echarts/lib/component/tooltip')
|
|
|
require('echarts/lib/component/title')
|
|
|
require('echarts/lib/component/graphic')
|
|
|
require('echarts/lib/component/toolbox')
|
|
|
+require('echarts/lib/component/legend')
|
|
|
|
|
|
export default {
|
|
|
name: 'statistics',
|
|
@@ -401,7 +415,7 @@ export default {
|
|
|
data: function() {
|
|
|
return {
|
|
|
title: '报表统计',
|
|
|
- visible: true,
|
|
|
+ visible: false,
|
|
|
statistics: [],
|
|
|
showData: null,
|
|
|
startValue: [],
|
|
@@ -440,15 +454,27 @@ export default {
|
|
|
}
|
|
|
],
|
|
|
noTitleKey: 'cost',
|
|
|
+ noTitleKeyTwo: 'cost',
|
|
|
chart: null,
|
|
|
chart1: null,
|
|
|
active: 1,
|
|
|
duration: 1000,
|
|
|
- dataDetail: null
|
|
|
+ dataDetail: null,
|
|
|
+ contrastDataList: []
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
moment,
|
|
|
+ clear() {
|
|
|
+ this.twoMonth = null
|
|
|
+ this.oneMonth = null
|
|
|
+ this.contrastDataAll = null
|
|
|
+ this.contrastDataList = null
|
|
|
+ this.contrastValue = []
|
|
|
+ if (this.chart) {
|
|
|
+ this.chart.clear()
|
|
|
+ }
|
|
|
+ },
|
|
|
search() {
|
|
|
var params = {}
|
|
|
params.type = 10
|
|
@@ -461,21 +487,315 @@ export default {
|
|
|
this.$message.error('请选择两个需要对比的数据')
|
|
|
}
|
|
|
} else if (this.value == 'day') {
|
|
|
- params.smallDate = moment(this.startValue[0]._d).format('YYYY-MM-DD')
|
|
|
- params.bigDate = moment(this.startValue[1]._d).format('YYYY-MM-DD')
|
|
|
+ params.smallDate = moment(this.contrastValue[0]._d).format('YYYY-MM-DD')
|
|
|
+ params.bigDate = moment(this.contrastValue[1]._d).format('YYYY-MM-DD')
|
|
|
}
|
|
|
+ getReportList(params).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
getKsAccountReport(params).then(res => {
|
|
|
console.log(res)
|
|
|
if (res.compared) {
|
|
|
this.contrastDataAll = res
|
|
|
+ // this.drawPieAll(res)
|
|
|
} else {
|
|
|
this.contrastDataAll = null
|
|
|
}
|
|
|
})
|
|
|
getKsDetail(params).then(res => {
|
|
|
- console.log(res)
|
|
|
+ this.contrastDataList = res
|
|
|
+ this.drawSearchLine(this.noTitleKeyTwo, res)
|
|
|
})
|
|
|
},
|
|
|
+ drawPieAll(data) {
|
|
|
+ var option = {
|
|
|
+ title: {
|
|
|
+ text: '61.3%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#e41c1c',
|
|
|
+ fontSize: 20
|
|
|
+ },
|
|
|
+ subtext: '人口城镇化率',
|
|
|
+ subtextStyle: {
|
|
|
+ color: '#999'
|
|
|
+ },
|
|
|
+ top: '50%',
|
|
|
+ right: '2%'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{a} <br/>{b} : {c}万 ({d}%)'
|
|
|
+ },
|
|
|
+ color: ['#e41c1c', '#142944'],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '城乡结构',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '80%',
|
|
|
+ center: ['50%', '60%'],
|
|
|
+ selectedMode: 'single',
|
|
|
+ hoverOffset: 3,
|
|
|
+ selectedOffset: 5,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: 'inside',
|
|
|
+ color: '#fff',
|
|
|
+ formatter: '{b}\n {d}%'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ length: 3,
|
|
|
+ length2: 5
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: data.compared.cost,
|
|
|
+ name: '2019-09',
|
|
|
+ selected: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: data.beCompared.cost,
|
|
|
+ name: '2019-10'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: '#fff',
|
|
|
+ borderWidth: 2,
|
|
|
+ shadowBlur: 2,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: '#00a5f4',
|
|
|
+ opacity: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ var chart = echarts.init(document.getElementById('chart3'))
|
|
|
+ chart.clear()
|
|
|
+ chart.setOption(option, true)
|
|
|
+ },
|
|
|
+ drawSearchLine(type, data) {
|
|
|
+ var dataLegend = []
|
|
|
+ var dataLength = [] //小月份数据
|
|
|
+ var dataLengthBig = [] //大月份数据
|
|
|
+ var dataElse = []
|
|
|
+ var dataDate = []
|
|
|
+ var that = this
|
|
|
+ var showName = null
|
|
|
+ if (data) {
|
|
|
+ if (this.value == 'month') {
|
|
|
+ dataLegend = [moment(this.oneMonth._d).format('YYYY-MM'), moment(this.twoMonth._d).format('YYYY-MM')]
|
|
|
+ dataDate = data.map(item => {
|
|
|
+ return item.statDate.substring(item.statDate.length - 2, item.statDate.length)
|
|
|
+ })
|
|
|
+ } else if (this.value == 'day') {
|
|
|
+ dataLegend = [
|
|
|
+ moment(this.contrastValue[0]._d).format('YYYY-MM-DD'),
|
|
|
+ moment(this.contrastValue[1]._d).format('YYYY-MM-DD')
|
|
|
+ ]
|
|
|
+ dataDate = data.map(item => {
|
|
|
+ return item.statHour
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (type == 'cost') {
|
|
|
+ showName = '总消耗'
|
|
|
+ dataLength = data.map(item => {
|
|
|
+ return item.beComparedCost
|
|
|
+ })
|
|
|
+ dataLengthBig = data.map(item => {
|
|
|
+ return item.cost
|
|
|
+ })
|
|
|
+ dataElse = data.map(item => {
|
|
|
+ if (this.value == 'month') {
|
|
|
+ return { proportion: (item.costProportion * 100).toFixed(2) + '%', statHour: item.beComparedDate }
|
|
|
+ } else {
|
|
|
+ return { proportion: (item.costProportion * 100).toFixed(2) + '%', statHour: item.statHour }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (type == 'photoClick') {
|
|
|
+ showName = '封面点击数'
|
|
|
+ dataLength = data.map(item => {
|
|
|
+ return item.beComparedPhotoClick
|
|
|
+ })
|
|
|
+ dataLengthBig = data.map(item => {
|
|
|
+ return item.photoClick
|
|
|
+ })
|
|
|
+ dataElse = data.map(item => {
|
|
|
+ if (this.value == 'month') {
|
|
|
+ return { proportion: (item.photoClickProportion * 100).toFixed(2) + '%', statHour: item.beComparedDate }
|
|
|
+ } else {
|
|
|
+ return { proportion: (item.photoClickProportion * 100).toFixed(2) + '%', statHour: item.statHour }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (type == 'photoShow') {
|
|
|
+ showName = '封面曝光数'
|
|
|
+ dataLength = data.map(item => {
|
|
|
+ return item.beComparedPhotoShow
|
|
|
+ })
|
|
|
+ dataLengthBig = data.map(item => {
|
|
|
+ return item.photoShow
|
|
|
+ })
|
|
|
+ dataElse = data.map(item => {
|
|
|
+ if (this.value == 'month') {
|
|
|
+ return { proportion: (item.showProportion * 100).toFixed(2) + '%', statHour: item.beComparedDate }
|
|
|
+ } else {
|
|
|
+ return { proportion: (item.showProportion * 100).toFixed(2) + '%', statHour: item.statHour }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (type == 'aclick') {
|
|
|
+ showName = '素材曝光数'
|
|
|
+ dataLength = data.map(item => {
|
|
|
+ return item.beComparedAClick
|
|
|
+ })
|
|
|
+ dataLengthBig = data.map(item => {
|
|
|
+ return item.aClick
|
|
|
+ })
|
|
|
+ dataElse = data.map(item => {
|
|
|
+ if (this.value == 'month') {
|
|
|
+ return { proportion: (item.comparedAclick * 100).toFixed(2) + '%', statHour: item.beComparedDate }
|
|
|
+ } else {
|
|
|
+ return { proportion: (item.comparedAclick * 100).toFixed(2) + '%', statHour: item.statHour }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var option = {
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: function(params) {
|
|
|
+ var index
|
|
|
+ if (that.value == 'month') {
|
|
|
+ index = dataElse.findIndex(
|
|
|
+ v => v.statHour.substring(v.statHour.length - 2, v.statHour.length) == params[0].name
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ index = dataElse.findIndex(
|
|
|
+ v => v.statHour.substring(v.statHour.length - 2, v.statHour.length) == params[0].name
|
|
|
+ )
|
|
|
+ }
|
|
|
+ var da = null
|
|
|
+ if (index >= 0) {
|
|
|
+ da = dataElse[index].proportion
|
|
|
+ }
|
|
|
+ if (that.value == 'month') {
|
|
|
+ return `${params[0].marker}时间:${params[0].seriesName}-${params[0].name}:${showName}:${params[0].data} <br/>
|
|
|
+ ${params[1].marker}时间:${params[1].seriesName}-${params[0].name}:${showName}:${params[1].data} <br/>
|
|
|
+ 涨跌:${da}<br/> `
|
|
|
+ } else {
|
|
|
+ return `${params[0].marker}时间:${params[0].seriesName}:${showName}:${params[0].data} <br/>
|
|
|
+ ${params[1].marker}时间:${params[1].seriesName}:${showName}:${params[1].data} <br/>
|
|
|
+ 涨跌:${da}<br/> `
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: dataLegend
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '2%',
|
|
|
+ right: '2%',
|
|
|
+ bottom: '2%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ left: 'right',
|
|
|
+ feature: {
|
|
|
+ dataZoom: {
|
|
|
+ yAxisIndex: 'none'
|
|
|
+ },
|
|
|
+ restore: {},
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: dataDate,
|
|
|
+ boundaryGap: false,
|
|
|
+ // 坐标轴线
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 分割线
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed',
|
|
|
+ color: '#e5e5e5'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed',
|
|
|
+ color: '#e5e5e5'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: dataLegend[0],
|
|
|
+ type: 'line',
|
|
|
+ color: '#0bcd74',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 1,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ color: '#0bcd74'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: '#ffffff',
|
|
|
+ borderWidth: 3
|
|
|
+ },
|
|
|
+ data: dataLength
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: dataLegend[1],
|
|
|
+ type: 'line',
|
|
|
+ color: '#9933ff',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 1,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ color: '#9933ff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: '#ffffff',
|
|
|
+ borderWidth: 3
|
|
|
+ },
|
|
|
+ data: dataLengthBig
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.chart = echarts.init(document.getElementById('chart1'))
|
|
|
+ this.chart.clear()
|
|
|
+ this.chart.setOption(option, true)
|
|
|
+ // window.onresize = function() {
|
|
|
+ // chart.resize()
|
|
|
+ // }
|
|
|
+ },
|
|
|
disabledDate(current) {
|
|
|
// Can not select days before today and today
|
|
|
return current && current > moment().endOf('day')
|
|
@@ -483,8 +803,11 @@ export default {
|
|
|
onTabChange(key, type) {
|
|
|
console.log(key, type)
|
|
|
this[type] = key
|
|
|
- console.log()
|
|
|
- this.drawPie(key, this.dataDetail)
|
|
|
+ if (type == 'noTitleKey') {
|
|
|
+ this.drawPie(key, this.dataDetail)
|
|
|
+ } else {
|
|
|
+ this.drawSearchLine(key, this.contrastDataList)
|
|
|
+ }
|
|
|
},
|
|
|
getAdd(checked) {
|
|
|
// console.log(this.startValue[0].moment('YYYY-MM-DD'))
|
|
@@ -499,29 +822,20 @@ export default {
|
|
|
}
|
|
|
console.log(checked)
|
|
|
this.active = checked
|
|
|
+ let params = {}
|
|
|
+ params.type = checked
|
|
|
+ if (checked == 9) {
|
|
|
+ params.startDate = this.allValue[0]
|
|
|
+ params.endDate = this.allValue[1]
|
|
|
+ }
|
|
|
+ getReportList(params).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
this.drawLine(checked, this.allValue)
|
|
|
this.getKsDetail(checked, this.allValue).then(res => {
|
|
|
this.drawPie(this.noTitleKey, res)
|
|
|
})
|
|
|
},
|
|
|
- updateChart() {
|
|
|
- // const max = 90
|
|
|
- // const min = 20
|
|
|
- getAccountReport().then(res => {
|
|
|
- for (const key in res) {
|
|
|
- this.options.series[0].data.push(res[key])
|
|
|
- }
|
|
|
- console.log(res)
|
|
|
- })
|
|
|
- const newData = this.series[0].data.map(() => {
|
|
|
- return Math.floor(Math.random() * (max - min + 1)) + min
|
|
|
- })
|
|
|
- this.series = [
|
|
|
- {
|
|
|
- data: newData
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
getKsDetail(type, dateValue) {
|
|
|
var that = this
|
|
|
return new Promise(function(resolve) {
|
|
@@ -567,6 +881,7 @@ export default {
|
|
|
var dataLength = []
|
|
|
var dataElse = []
|
|
|
var dataDate = []
|
|
|
+ var that = this
|
|
|
if (this.active == 1 || this.active == 2) {
|
|
|
data.sort(function(a, b) {
|
|
|
return a.statHour - b.statHour
|
|
@@ -582,38 +897,98 @@ export default {
|
|
|
return item.statDate
|
|
|
})
|
|
|
}
|
|
|
- // data.sort(function(a, b) {
|
|
|
- // return a.statHour - b.statHour
|
|
|
- // })
|
|
|
-
|
|
|
- dataElse = data.map(item => {
|
|
|
- if (this.active == 1 || this.active == 2) {
|
|
|
- return { proportion: (item.proportion * 100).toFixed(2) + '%', statHour: item.statHour }
|
|
|
- } else {
|
|
|
- return { proportion: (item.proportion * 100).toFixed(2) + '%', statHour: item.statDate }
|
|
|
- }
|
|
|
- })
|
|
|
if (type == 'cost') {
|
|
|
dataLegend = ['总消耗']
|
|
|
- dataLength = data.map(item => {
|
|
|
- return item.cost
|
|
|
- })
|
|
|
} else if (type == 'photoClick') {
|
|
|
dataLegend = ['封面点击数']
|
|
|
- dataLength = data.map(item => {
|
|
|
- return item.photoClick
|
|
|
- })
|
|
|
} else if (type == 'photoShow') {
|
|
|
dataLegend = ['封面曝光数']
|
|
|
- dataLength = data.map(item => {
|
|
|
- return item.photoShow
|
|
|
- })
|
|
|
} else if (type == 'aclick') {
|
|
|
dataLegend = ['素材曝光数']
|
|
|
- dataLength = data.map(item => {
|
|
|
- return item.aclick
|
|
|
+ }
|
|
|
+ dataLength = data.map(item => {
|
|
|
+ return item[type]
|
|
|
+ })
|
|
|
+ var series
|
|
|
+ if (this.active == 1) {
|
|
|
+ dataElse = data.map(item => {
|
|
|
+ if (item.now) {
|
|
|
+ return { proportion: (item.now.proportion * 100).toFixed(2) + '%', statHour: item.statHour }
|
|
|
+ } else {
|
|
|
+ return { proportion: 0, statHour: item.statHour }
|
|
|
+ }
|
|
|
})
|
|
|
+ dataLegend = ['今天', '昨天']
|
|
|
+ series = [
|
|
|
+ {
|
|
|
+ name: dataLegend[0],
|
|
|
+ type: 'line',
|
|
|
+ color: '#9933ff',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 1,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ color: '#9933ff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: '#ffffff',
|
|
|
+ borderWidth: 3
|
|
|
+ },
|
|
|
+ data: data.map(item => {
|
|
|
+ if (item.now) {
|
|
|
+ return item.now[type]
|
|
|
+ } else {
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: dataLegend[1],
|
|
|
+ type: 'line',
|
|
|
+ color: '#0bcd74',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 1,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ color: '#0bcd74'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: '#ffffff',
|
|
|
+ borderWidth: 3
|
|
|
+ },
|
|
|
+ data: dataLength
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ } else {
|
|
|
+ series = [
|
|
|
+ {
|
|
|
+ name: dataLegend[0],
|
|
|
+ type: 'line',
|
|
|
+ color: '#0bcd74',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 1,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ color: '#0bcd74'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: '#ffffff',
|
|
|
+ borderWidth: 3
|
|
|
+ },
|
|
|
+ data: dataLength
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
+
|
|
|
var option = {
|
|
|
backgroundColor: '#fff',
|
|
|
tooltip: {
|
|
@@ -624,9 +999,14 @@ export default {
|
|
|
if (index > 0) {
|
|
|
da = dataElse[index].proportion
|
|
|
}
|
|
|
- return `时间:${params[0].name} \n
|
|
|
- 涨跌:${da} \n
|
|
|
+ if (that.active == 1) {
|
|
|
+ return `${params[0].marker}今天${params[0].name}时:${params[0].data} <br/>
|
|
|
+ ${params[1].marker}昨天${params[1].name}时:${params[1].data} <br/>
|
|
|
+ 涨跌:${da} <br/> `
|
|
|
+ } else {
|
|
|
+ return `${params[0].marker}时间:${params[0].name} <br/>
|
|
|
数值:${params[0].data} `
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
@@ -639,7 +1019,7 @@ export default {
|
|
|
containLabel: true
|
|
|
},
|
|
|
toolbox: {
|
|
|
- left: 'center',
|
|
|
+ left: 'right',
|
|
|
feature: {
|
|
|
dataZoom: {
|
|
|
yAxisIndex: 'none'
|
|
@@ -683,27 +1063,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: dataLegend[0],
|
|
|
- type: 'line',
|
|
|
- color: '#0bcd74',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 1,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2,
|
|
|
- color: '#0bcd74'
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- borderColor: '#ffffff',
|
|
|
- borderWidth: 3
|
|
|
- },
|
|
|
- data: dataLength
|
|
|
- }
|
|
|
- ]
|
|
|
+ series: series
|
|
|
}
|
|
|
var chart = echarts.init(document.getElementById('chart'))
|
|
|
chart.clear()
|