Skip to content

E
exhibition_backstage
提交 d390af64 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

完善首页行为数据接口对接

上级 3e98ec35
隐藏空白字符变更
内嵌 并排
正在显示 包含 288 行增加 和 20 行删除
src/settings.js
浏览文件 @ d390af64
......@@ -6,7 +6,7 @@ module.exports = {
* @type {boolean} true | false
* @description Whether fix the header
*/
fixedHeader: false,
fixedHeader: true,
/**
* @type {boolean} true | false
......
src/views/home/index.vue
浏览文件 @ d390af64
......@@ -2,10 +2,44 @@
<div class="home">
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="用户行为数据统计" name="behavior">
<div style="height: 400px;">
<Echart :options="options" id="可选" height='100%' width="100%" v-if="options"></Echart>
</div>
<el-card>
<div slot="header" class="clearfix">
<div style="float: left;font-weight: bold;">点击率Top20</div>
</div>
<div style="height: 500px;">
<Echart :options="allOptions" id="可选" height='100%' width="100%" v-if="allOptions"></Echart>
</div>
</el-card>
<el-card style="margin-top: 20px;">
<div slot="header" class="clearfix">
<div style="float: left;font-weight: bold;">各类排名Top5</div>
</div>
<el-row>
<el-col :span="12">
<div style="height: 250px;">
<Echart :options="displayOptions" height='100%' width="100%" v-if="displayOptions"></Echart>
</div>
</el-col>
<el-col :span="12">
<div style="height: 250px;">
<Echart :options="crOptions" height='100%' width="100%" v-if="crOptions"></Echart>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div style="height: 250px;">
<Echart :options="virtualOptions" height='100%' width="100%" v-if="virtualOptions"></Echart>
</div>
</el-col>
<!-- <el-col :span="12">
<Echart :options="options" height='100%' width="100%" v-if="options"></Echart>
</el-col> -->
</el-row>
</el-card>
<el-card class="box-card" style="margin-top: 20px;">
<div slot="header" class="clearfix">
<div style="float: left;font-weight: bold;">精品展数据统计</div>
......@@ -152,7 +186,10 @@
}
]
},
options: null,
allOptions: null,
displayOptions: null,
crOptions: null,
virtualOptions: null,
currentSortPage: 2,//1-文物；2-展览；3-虚拟展厅；4-精品展览，0-所有。默认0
}
},
......@@ -173,27 +210,60 @@
'#3CC4EF', '#EF7F3C', '#EF3C81', '#0DBF8C', '#2F73C0', '#C55E18', '#C899FF', '#C6D727',
'#FF688F', '#87A0DC', '#00D9F7', '#A24EED'
];
let barListAll = []
var legendList = [];
let displaySource = [] //展览的数据集
let virtualSource = []//虚拟展的数据集
let crSource = []//文物的数据集
let res = await getBarMap()
const { allBrowseSortList, culturalRelicSortList, exhibitionSortList, virtualSortList } = res.data
let barListAll = []
allBrowseSortList.map(item => {
let obj = {}
if (item.data > 0) {
obj.name = item.name
obj.value = item.data
barListAll.push(obj)
// if (item.data > 0) {
obj.name = item.name
obj.value = item.data
barListAll.push(obj)
// }
})
culturalRelicSortList.map(item => {
let obj = {
"name": item.name,
"浏览量": item.browseCount,
"收藏量": item.collectCount,
"点赞量": item.loveCount
}
crSource.push(obj)
})
exhibitionSortList.map(item => {
let obj = {
"name": item.name,
"浏览量": item.browseCount,
"收藏量": item.collectCount,
"点赞量": item.loveCount
}
displaySource.push(obj)
})
// console.log('allBrowseSortList', allBrowseSortList);
virtualSortList.map(item => {
let obj = {
"name": item.name,
"浏览量": item.browseCount,
"收藏量": item.collectCount,
"点赞量": item.loveCount
}
virtualSource.push(obj)
})
console.log('crSource', crSource);
console.log('displaySource', displaySource);
console.log('virtualSource', virtualSource);
console.log('barListAll', barListAll);
for (var i = 0; i < barListAll.length; i++) {
legendList.push(barListAll[i].name);
}
this.options = {
this.allOptions = {
color: pie_color,
title: {
show: false,
......@@ -210,14 +280,15 @@
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
},
grid: {
grid: [{
show: false,
left: '2%',
right: '50%',
right: '10%',
bottom: 0,
top: '2%',
containLabel: true
},
],
// legend: {
// bottom: '4%',
// right: '10%',
......@@ -238,7 +309,7 @@
// },
// data: legendList,
// },
xAxis: {
xAxis: [{
type: 'value',
gridIndex: 0,
name: '次',
......@@ -267,9 +338,10 @@
},
splitLine: {
show: false
}
},
yAxis: {
},
show: false
}],
yAxis: [{
type: 'category',
gridIndex: 0,
data: legendList,
......@@ -291,7 +363,7 @@
splitLine: {
show: false
}
},
}],
series: [{
name: '浏览量',
type: 'bar',
......@@ -333,6 +405,202 @@
}
},]
}
this.crOptions = {
title: {
text: '文物排行TOP5',
left: '5%',
top: '15',
textStyle: {
fontWeight: '400',
color: '#000',
fontSize: 14,
},
},
legend: { "top": "10", right: "60" },
tooltip: {},
color: ['#5470c6', '#73c0de', '#fac858', '#ee6666', '#91cc75'],
dataset: {
dimensions: ['name', '浏览量', '收藏量', '点赞量',],
source: crSource,
},
xAxis: {
type: 'category',
axisLabel: {
rotate: -18,
color: '#606266',
interval: 0,
margin: 20,
align: 'center',
textStyle: {
fontSize: 10
}
}
},
yAxis: {},
series: [
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
},
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
},
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
},
],
};
this.displayOptions = {
title: {
text: '展览排行TOP5',
left: '5%',
top: '15',
textStyle: {
fontWeight: '400',
color: '#000',
fontSize: 14,
},
},
tooltip: {},
color: ['#5470c6', '#73c0de', '#fac858', '#ee6666', '#91cc75'],
dataset: {
dimensions: ['name', '浏览量', '收藏量', '点赞量',],
source: displaySource,
},
xAxis: {
type: 'category', axisLabel: {
rotate: -18,
color: '#606266',
interval: 0,
margin: 20,
align: 'center',
textStyle: {
fontSize: 10
}
}
},
yAxis: {},
series: [
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
},
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
},
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
},
// {
// type: 'bar',
// barWidth: '10%',
// itemStyle: {
// normal: {
// barBorderRadius: 6,
// },
// },
// },
],
};
this.virtualOptions = {
// legend: { "top": "20", right: "60" },
title: {
text: '虚拟展排行TOP5',
left: '5%',
top: '15',
textStyle: {
fontWeight: '400',
color: '#000',
fontSize: 14,
},
},
tooltip: {},
color: ['#5470c6', '#73c0de', '#fac858', '#ee6666', '#91cc75'],
dataset: {
dimensions: ['name', '浏览量', '收藏量', '点赞量',],
source: virtualSource,
},
xAxis: {
type: 'category', axisLabel: {
rotate: -18,
color: '#606266',
interval: 0,
margin: 20,
align: 'center',
textStyle: {
fontSize: 10
}
}
},
yAxis: {},
series: [
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
},
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
},
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
},
],
};
},
// 加载下方点击量明细
async loadListByPageSort() {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论