methods: {
// formatDate(date) {
// var d = new Date(date)
// var month = '' + (d.getMonth() + 1)
// var day = '' + d.getDate()
// var year = d.getFullYear()
// if (month.length < 2) month = '0' + month
// if (day.length < 2) day = '0' + day
// return [year, month, day].join('-')
// },
async initDate() { //关键字async await
await totalPkgCountByDay().then(response => {
this.items = response.data.items
})
},
async initChart() {//关键字async await
this.chart = echarts.init(document.getElementById(this.id))
const listdata = []
await this.initDate()//关键字async await
const xData = []
for (let i = 0; i < this.items.length; i++) {
xData.push(this.items[i].dayStr)
listdata.push(this.items[i].totalPackage)
}
this.chart.setOption({
backgroundColor: '#414545',
title: {
text: '每日包数曲线图',
x: '20',
top: '20',
textStyle: {
color: '#fff',
fontSize: '22'
},
subtextStyle: {
color: '#90979c',
fontSize: '16'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
textStyle: {
color: '#fff'
}
}
},
grid: {
left: '5%',
right: '5%',
borderWidth: 0,
top: 150,
bottom: 95,
textStyle: {
color: '#fff'
}
},
legend: {
x: '5%',
top: '10%',
textStyle: {
color: '#90979c'
},
data: ['柱状图', '曲线图']
},
calculable: true,
xAxis: [{
type: 'category',
axisLine: {
lineStyle: {
color: '#90979c'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
interval: 0
},
data: xData
}],
yAxis: [{
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#90979c'
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0
},
splitArea: {
show: false
}
}],
dataZoom: [{
show: true,
height: 30,
xAxisIndex: [
0
],
bottom: 30,
start: 10,
end: 80,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
color: '#d3dee5'
},
textStyle: {
color: '#fff'
},
borderColor: '#90979c'
}, {
type: 'inside',
show: true,
height: 15,
start: 1,
end: 35
}],
series: [{
name: '柱状图',
type: 'bar',
stack: 'total',
barMaxWidth: 35,
barGap: '10%',
itemStyle: {
normal: {
color: 'rgba(255,144,128,1)',
label: {
show: true,
textStyle: {
color: '#fff'
},
position: 'insideTop',
formatter(p) {
return p.value > 0 ? p.value : ''
}
}
}
},
data: listdata
},
// {
// name: 'male',
// type: 'bar',
// stack: 'total',
// itemStyle: {
// normal: {
// color: 'rgba(0,191,183,1)',
// barBorderRadius: 0,
// label: {
// show: true,
// position: 'top',
// formatter(p) {
// return p.value > 0 ? p.value : ''
// }
// }
// }
// },
// data: [
// 327,
// 1776,
// 507,
// 1200,
// 800,
// 482,
// 204,
// 1390,
// 1001,
// 951,
// 381,
// 220
// ]
// },
{
name: '曲线图',
type: 'line',
stack: 'total',
symbolSize: 10,
symbol: 'circle',
itemStyle: {
normal: {
color: 'rgba(252,230,48,1)',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter(p) {
return p.value > 0 ? p.value : ''
}
}
}
},
data: listdata
}
]
})
}
}
async initDate() { //关键字async await
await totalPkgCountByDay().then(response => {
this.items = response.data.items
})
},
async initChart() {//关键字async await
this.chart = echarts.init(document.getElementById(this.id))
const listdata = []
await this.initDate()//关键字async await
const xData = []
for (let i = 0; i < this.items.length; i++) {
xData.push(this.items[i].dayStr)
listdata.push(this.items[i].totalPackage)
}