# up increment, total chart
This commit is contained in:
xianfuxing
parent
d89fb84047
commit
8f03176d42
|
|
@ -27,9 +27,6 @@ export default {
|
|||
},
|
||||
chartData: {
|
||||
type: Object
|
||||
},
|
||||
xAxis: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -75,11 +72,11 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
setOptions({ totalHistoryData, actualData } = {}) {
|
||||
setOptions({ historyData, xAxis, title } = {}) {
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
data: this.xAxis,
|
||||
data: xAxis,
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
interval: 0
|
||||
|
|
@ -108,10 +105,10 @@ export default {
|
|||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['Total', 'Increment']
|
||||
data: [title]
|
||||
},
|
||||
series: [{
|
||||
name: 'Total', itemStyle: {
|
||||
name: title, itemStyle: {
|
||||
normal: {
|
||||
color: '#FF005A',
|
||||
lineStyle: {
|
||||
|
|
@ -122,29 +119,9 @@ export default {
|
|||
},
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
data: totalHistoryData,
|
||||
data: historyData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut'
|
||||
},
|
||||
{
|
||||
name: 'Increment',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#3888fa',
|
||||
lineStyle: {
|
||||
color: '#3888fa',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#f3f8ff'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: actualData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'quadraticOut'
|
||||
}]
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<el-row class="panel-group" :gutter="40">
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class='card-panel' @click="handleSetLineChartData('historyData')">
|
||||
<div class='card-panel' @click="handleSetLineChartData('total')">
|
||||
<div class="card-panel-icon-wrapper icon-plus">
|
||||
<svg-icon icon-class="plus" class-name="card-panel-icon" />
|
||||
</div>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('messages')">
|
||||
<div class="card-panel" @click="handleSetLineChartData('increment')">
|
||||
<div class="card-panel-icon-wrapper icon-rise">
|
||||
<svg-icon icon-class="rise" class-name="card-panel-icon" />
|
||||
</div>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('purchases')">
|
||||
<div class="card-panel" @click="">
|
||||
<div class="card-panel-icon-wrapper icon-online">
|
||||
<svg-icon icon-class="online" class-name="card-panel-icon" />
|
||||
</div>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
|
||||
<div class="card-panel" @click="">
|
||||
<div class="card-panel-icon-wrapper icon-offline">
|
||||
<svg-icon icon-class="offline" class-name="card-panel-icon" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</panel-group>
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart :chart-data="lineChartData" :xAxis="this.lineChartData.xAxis"></line-chart>
|
||||
<line-chart :chart-data="lineChartData"></line-chart>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
|
|
@ -73,22 +73,15 @@ import
|
|||
} from '@/api/counter'
|
||||
|
||||
const lineChartData = {
|
||||
historyData: {
|
||||
totalHistoryData: [],
|
||||
incrementHistoryData: [],
|
||||
xAxis: []
|
||||
total: {
|
||||
historyData: [],
|
||||
xAxis: [],
|
||||
title: 'Total'
|
||||
},
|
||||
messages: {
|
||||
totalHistoryData: [200, 192, 120, 144, 160, 130, 140],
|
||||
incrementHistoryData: [],
|
||||
xAxis: [1, 2, 3, 4, 5, 6, 7]
|
||||
},
|
||||
purchases: {
|
||||
totalHistoryData: [80, 100, 121, 104, 105, 90, 100]
|
||||
},
|
||||
shoppings: {
|
||||
totalHistoryData: [130, 140, 141, 142, 145, 150, 160],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
||||
increment: {
|
||||
historyData: [],
|
||||
xAxis: [],
|
||||
title: 'Increment'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -108,7 +101,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
lineChartData: lineChartData.historyData,
|
||||
lineChartData: lineChartData.total,
|
||||
totalCount: 0,
|
||||
dailyCount: 0,
|
||||
onlineCount: 0,
|
||||
|
|
@ -135,31 +128,24 @@ export default {
|
|||
})
|
||||
},
|
||||
handleHistoryLine(historyList) {
|
||||
var totalList = []
|
||||
var dateList = []
|
||||
const totalList = []
|
||||
const incrementList = []
|
||||
const dateList = []
|
||||
console.log(historyList)
|
||||
historyList.forEach((item, index) => {
|
||||
totalList.push(item.total)
|
||||
incrementList.push(item.increment)
|
||||
dateList.push(item.date.substr(5))
|
||||
})
|
||||
this.lineChartData.totalHistoryData = totalList.reverse()
|
||||
this.lineChartData.xAxis = dateList.reverse()
|
||||
// console.log(this.lineChartData.totalHistoryData)
|
||||
lineChartData.total.historyData = totalList.reverse()
|
||||
lineChartData.increment.historyData = incrementList.reverse()
|
||||
lineChartData.total.xAxis = dateList.reverse()
|
||||
lineChartData.increment.xAxis = dateList
|
||||
}
|
||||
// getLogStatisticHistory() {
|
||||
// fetchLogStatisticHistory().then(response => {
|
||||
// var totalList = []
|
||||
// this.historyList = response.data.results
|
||||
// this.historyList.forEach((item, index) => {
|
||||
// totalList.push(item.total)
|
||||
// })
|
||||
// this.lineChartData.totalHistoryData = totalList
|
||||
// })
|
||||
// }
|
||||
},
|
||||
created() {
|
||||
this.getDeviceInfoStatistic()
|
||||
this.getDeviceLogStatistic()
|
||||
// this.getLogStatisticHistory()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue