|
|
|
@ -13,7 +13,15 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<p class="surplus" v-if="item.deadline"><span class="name">剩余期限:</span><span class="num">{{item.deadline}}</span> 天</p> |
|
|
|
|
<p class="surplus"><span class="name">账号数量:</span><span class="num">{{item.accountNum}}</span> 个</p> |
|
|
|
|
<p class="surplus"> |
|
|
|
|
<span class="name">账号数量:</span> |
|
|
|
|
<template v-if="item.accountNum > 1000"> |
|
|
|
|
<span>♾</span> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<span class="num">{{item.accountNum}}</span> 个 |
|
|
|
|
</template> |
|
|
|
|
</p> |
|
|
|
|
<el-button class="renew" size="small" type="primary" v-if="!item.deadline">续费</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
@ -234,36 +242,86 @@ export default { |
|
|
|
|
// 按月份统计数据库使用概况图表 |
|
|
|
|
initChart(list){ |
|
|
|
|
const seriesList = [] |
|
|
|
|
const data = ['下载量', '点击量', '登录量'] |
|
|
|
|
// 生成series |
|
|
|
|
for (let i in list) { |
|
|
|
|
const series = [] |
|
|
|
|
for (let n in list[i]) { |
|
|
|
|
const datas = list[i][n] |
|
|
|
|
const item = [] |
|
|
|
|
datas.map((e, j) => { |
|
|
|
|
item.push([`${j + 1}`, e]) |
|
|
|
|
}) |
|
|
|
|
const temp = { |
|
|
|
|
name: n, |
|
|
|
|
type: 'line', |
|
|
|
|
stack: 'Total', |
|
|
|
|
data: list[i][n] |
|
|
|
|
smooth: true, |
|
|
|
|
stack: 'a', |
|
|
|
|
symbol: 'circle', |
|
|
|
|
symbolSize: 5, |
|
|
|
|
sampling: 'average', |
|
|
|
|
data: item |
|
|
|
|
} |
|
|
|
|
// 三个统计量分别赋予不同颜色 |
|
|
|
|
if (n === '下载量') { |
|
|
|
|
temp.name = '下载量' |
|
|
|
|
temp.itemStyle = { |
|
|
|
|
color: '#55D3DE' |
|
|
|
|
} |
|
|
|
|
temp.areaStyle = { |
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
|
|
|
{ |
|
|
|
|
offset: 0, |
|
|
|
|
color: 'rgba(109,219,229,0.3)' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
offset: 1, |
|
|
|
|
color: 'rgba(37,237,225,0.6)' |
|
|
|
|
} |
|
|
|
|
]) |
|
|
|
|
} |
|
|
|
|
} else if (n === '点击量') { |
|
|
|
|
temp.name = '点击量' |
|
|
|
|
temp.itemStyle = { |
|
|
|
|
color: '#7ED321' |
|
|
|
|
} |
|
|
|
|
temp.areaStyle = { |
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
|
|
|
{ |
|
|
|
|
offset: 0, |
|
|
|
|
color: 'rgba(255, 255, 255, 0.18)' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
offset: 1, |
|
|
|
|
color: 'rgba(210, 247, 215, 0.6)' |
|
|
|
|
} |
|
|
|
|
]) |
|
|
|
|
} |
|
|
|
|
} else if (n === '登录量') { |
|
|
|
|
temp.name = '登录量' |
|
|
|
|
temp.itemStyle = { |
|
|
|
|
color: '#57A0FF' |
|
|
|
|
} |
|
|
|
|
temp.areaStyle = { |
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
|
|
|
{ |
|
|
|
|
offset: 0, |
|
|
|
|
color: '#E8F0FF' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
offset: 1, |
|
|
|
|
color: 'rgba(255, 255, 255, 0.5)' |
|
|
|
|
} |
|
|
|
|
]) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
series.push(temp) |
|
|
|
|
} |
|
|
|
|
seriesList.push(series) |
|
|
|
|
} |
|
|
|
|
// 年份循环 |
|
|
|
|
seriesList.map((e, i) => { |
|
|
|
|
echarts.init(document.querySelector(`#chart${i + 1}`)).setOption({ |
|
|
|
|
title: { |
|
|
|
|
text: '' |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis' |
|
|
|
|
}, |
|
|
|
|
// legend: { |
|
|
|
|
// data |
|
|
|
|
// }, |
|
|
|
|
grid: { |
|
|
|
|
left: '3%', |
|
|
|
|
right: '4%', |
|
|
|
|
bottom: '3%', |
|
|
|
|
containLabel: true |
|
|
|
|
trigger: 'item' |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
show: false |
|
|
|
@ -271,6 +329,12 @@ export default { |
|
|
|
|
yAxis: { |
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
left: '3%', |
|
|
|
|
right: '4%', |
|
|
|
|
bottom: '3%', |
|
|
|
|
containLabel: true |
|
|
|
|
}, |
|
|
|
|
series: e |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|