创新实训博客（34）——用户画像部分前端展示

初步计划的展示效果

接口请求编写

[code]import request from '@/utils/request'

// 获取活动数据
export function getUserStatistic() {
return request({
url: '/portrait/statistics',
method: 'get',
params: { day: 14 }
})
}

// 获取用户最喜欢的标签
export function getUserStatisticTag() {
return request({
url: '/portrait/tags',
method: 'get',
params: { size: 10 }
})
}

// 获取用户最喜欢的博主
export function getUserStatisticBlog() {
return request({
url: '/portrait/blogs',
method: 'get',
params: { size: 5 }
})
}

// 获取用户最喜欢的文章
export function getUserStatisticArticle() {
return request({
url: '/portrait/articles',
method: 'get',
params: { size: 5 }
})
}

前端调用

1. 趋势折线图

[code]    init_trend_dashboard() {
var that = this
getUserStatistic().then(response => {
const { data } = response
var date = []
var count1 = []
var count2 = []
for (var i in data.userBrowsingCounts) {
date.push(data.userLikingCounts[i].time)
count1.push(data.userBrowsingCounts[i].count)
count2.push(data.userLikingCounts[i].count)
}
var option = {
title: {
text: '最近趋势'
},
grid: {
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
data: date,
axisLabel: {
rotate: 50
}
},
yAxis: {
type: 'value'
},
legend: {
data: ['阅读量', '点赞量']
},
series: [{
name: '阅读量',
data: count1,
type: 'line',
smooth: false,
label: {
show: true,
position: 'top'
},
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
}
}, {
name: '点赞量',
data: count2,
type: 'bar',
areaStyle: {},
smooth: false,
label: {
show: false
},
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
}
}]
}
that.user_trend_dashboard.setOption(option)
})
}

2. 标签词云

[code]    init_top_tag_cloud() {
var that = this
getUserStatisticTag().then(response => {
const { data } = response
var list = []
for (var i in data) {
list.push({ 'name': data[i].tag.name, 'value': data[i].score })
}
var option = {
title: {
text: '标签偏好'
},
tooltip: {
show: true
},
series: [{
type: 'wordCloud',
gridSize: 1,
shape: 'rectangle',
sizeRange: [20, 60],
width: 411,
height: 350,
textStyle: {
normal: {
color: function() {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')'
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: list
}]
}
that.user_top_tag_cloud.setOption(option)
})
},

3. 热门柱状图

[code]    init_top_read_article() {
var that = this
getUserStatisticArticle().then(response => {
const { data } = response
var title = []
var count = []
for (var i in data) {
title.push(data[i].article.title)
count.push(data[i].browsingCount)
}
var option = {
title: {
text: '最喜欢的文章'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
xAxis: {
type: 'value',
show: false
},
yAxis: {
type: 'category',
axisLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
splitLine: { show: false },
data: title.reverse()
},
series: [
{
name: '评分',
type: 'bar',
barWidth: 10,
data: count.reverse(),
color: '#27299a',
label: {
show: true,
position: [0, '-16px'],
formatter: function(a) {
let num = ''
let str = ''
num = '0' + (5 - a.dataIndex)
str = `${num}-${a.name}`
return str
}
},
showBackground: true,
backgroundStyle: {
color: '#eeeeee'
}
}
]
}
that.user_top_read_article.setOption(option)
})
},