1
This commit is contained in:
xulu
667
src/components/page/analysis_report.vue
Normal file
667
src/components/page/analysis_report.vue
Normal file
@@ -0,0 +1,667 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item>
|
||||
<i class="el-icon-data-analysis"></i> Citation Analysis Report
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container" v-loading="loading" element-loading-text="Loading..." element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)">
|
||||
<div class="handle-box">
|
||||
<el-select v-model="query.journal_id" filterable placeholder="Please select a Journal" value-key="groupID" style="width: 300px;"
|
||||
@change="chan_id">
|
||||
<el-option v-for="item in df_jour" :label="item.title" :key="item.journal_id" :value="item.journal_id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- 国家内外(饼状图) -->
|
||||
<div class="schart-box">
|
||||
<div id="myChart1" class="schart" style="width: 500px;margin: 0 auto;"></div>
|
||||
</div>
|
||||
<!-- 领域（学科）(柱状图) -->
|
||||
<div class="schart-box">
|
||||
<div id="myChart2" class="schart" style="height: 400px;"></div>
|
||||
</div>
|
||||
<!-- 关键词(柱状图) -->
|
||||
<div class="schart-box">
|
||||
<div id="myChart3" class="schart" style="height: 400px;"></div>
|
||||
</div>
|
||||
<!-- 关键词(折线图) -->
|
||||
<div class="schart-box">
|
||||
<div id="myChart4" class="schart" style=""></div>
|
||||
</div>
|
||||
<!-- 文章类型(饼状图) -->
|
||||
<div class="schart-box">
|
||||
<div id="myChart5" class="schart" style="width: 800px;margin: 0 auto;"></div>
|
||||
</div>
|
||||
<!-- 阅读量下载量(表格) -->
|
||||
<h4 class="ta_tit">阅读量下载统计</h4>
|
||||
<el-table :data="tab_le6" border class="table" ref="multipleTable" header-cell-class-name="table-header">
|
||||
<el-table-column prop="title" label="期刊" width="420px"></el-table-column>
|
||||
<el-table-column prop="read_num" label="阅读量"></el-table-column>
|
||||
<el-table-column prop="cite_num" label="引用数"></el-table-column>
|
||||
</el-table>
|
||||
<!-- 标题吸引力程度(表格) -->
|
||||
<h4 class="ta_tit">标题吸引力程度统计</h4>
|
||||
<el-table :data="tab_le7_1" border class="table" ref="multipleTable" header-cell-class-name="table-header">
|
||||
<el-table-column prop="title" label="期刊" width="420px"></el-table-column>
|
||||
<el-table-column prop="cite_num" label="字数"></el-table-column>
|
||||
</el-table>
|
||||
<el-table :data="tab_le7_2" border class="table" ref="multipleTable" header-cell-class-name="table-header">
|
||||
<el-table-column prop="title" label="期刊" width="420px"></el-table-column>
|
||||
<el-table-column prop="cite_num" label="字符"></el-table-column>
|
||||
</el-table>
|
||||
<!-- 摘要吸引力程度(表格) -->
|
||||
<h4 class="ta_tit">摘要吸引力程度统计</h4>
|
||||
<el-table :data="tab_le8_1" border class="table" ref="multipleTable" header-cell-class-name="table-header">
|
||||
<el-table-column prop="title" label="期刊" width="420px"></el-table-column>
|
||||
<el-table-column prop="cite_num" label="字数"></el-table-column>
|
||||
</el-table>
|
||||
<el-table :data="tab_le8_2" border class="table" ref="multipleTable" header-cell-class-name="table-header">
|
||||
<el-table-column prop="title" label="期刊" width="420px"></el-table-column>
|
||||
<el-table-column prop="cite_num" label="字符"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user_id: localStorage.getItem('U_id'),
|
||||
user_cap: localStorage.getItem('U_role'),
|
||||
loading: false,
|
||||
df_jour: [],
|
||||
tableData: [],
|
||||
query: {
|
||||
journal_id: ''
|
||||
},
|
||||
myChart1: '',
|
||||
Ech_1: [{
|
||||
value: 0,
|
||||
name: '国内'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: '国外'
|
||||
}
|
||||
],
|
||||
Ech_2: [],
|
||||
Ech_3: [],
|
||||
Ech_4_1: [],
|
||||
Ech_4_2: [],
|
||||
Ech_5: [],
|
||||
tab_le6: [],
|
||||
tab_le7_1: [],
|
||||
tab_le7_2: [],
|
||||
tab_le8_1: [],
|
||||
tab_le8_2: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// df_jour: function(val) {
|
||||
// var _this = this;
|
||||
// _this.$nextTick(function() {
|
||||
// this.drawLine1();
|
||||
// this.drawLine2();
|
||||
// this.drawLine3();
|
||||
// this.drawLine4();
|
||||
// this.drawLine5();
|
||||
// });
|
||||
// },
|
||||
},
|
||||
mounted() {
|
||||
// this.drawLine();
|
||||
},
|
||||
created() {
|
||||
this.getTable();
|
||||
},
|
||||
computed: {
|
||||
opened() {
|
||||
return this.df_jour.map((i) => {
|
||||
return i.journal_id;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取数据
|
||||
getTable() {
|
||||
if (this.user_cap.includes('chief')) {
|
||||
this.$api
|
||||
.post('api/Chief/getJournalsFromChief', {
|
||||
'user_id': this.user_id
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
this.df_jour = res.data.journals;
|
||||
this.query.journal_id = this.df_jour[0].journal_id
|
||||
this.getData();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
} else {
|
||||
this.$api
|
||||
.post('api/Chief/getJournalsByEditor', {
|
||||
'user_id': this.user_id
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
this.df_jour = res.data.journals;
|
||||
this.query.journal_id = this.df_jour[0].journal_id
|
||||
this.getData();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 下拉分类搜索
|
||||
chan_id(event) {
|
||||
this.$echarts.init(document.getElementById('myChart1')).clear()
|
||||
this.$echarts.init(document.getElementById('myChart2')).clear()
|
||||
this.$echarts.init(document.getElementById('myChart3')).clear()
|
||||
this.$echarts.init(document.getElementById('myChart4')).clear()
|
||||
this.$echarts.init(document.getElementById('myChart5')).clear()
|
||||
this.getData();
|
||||
},
|
||||
|
||||
getData() {
|
||||
this.loading = true;
|
||||
this.$api
|
||||
.post('journalsuper/Publish/getCiteDate', this.query)
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data;
|
||||
this.drawLine1();
|
||||
this.drawLine2();
|
||||
this.drawLine3();
|
||||
this.drawLine4();
|
||||
this.drawLine5();
|
||||
this.dataTable6();
|
||||
this.dataTable7();
|
||||
this.dataTable8();
|
||||
this.loading = false;
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
},
|
||||
|
||||
//图表初始化
|
||||
drawLine1() {
|
||||
this.Ech_1 = [{
|
||||
value: 0,
|
||||
name: '国内'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: '国外'
|
||||
}
|
||||
];
|
||||
let data_num = this.tableData.country
|
||||
this.Ech_1[0].value = data_num.n
|
||||
this.Ech_1[1].value = data_num.w
|
||||
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.myChart1 = this.$echarts.init(document.getElementById('myChart1'))
|
||||
|
||||
// 绘制折现图
|
||||
this.myChart1.setOption({
|
||||
title: {
|
||||
text: '国内外统计',
|
||||
x: '49%',
|
||||
y: 'top',
|
||||
textAlign: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
bottom: '1%',
|
||||
// type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 10,
|
||||
top: 20,
|
||||
},
|
||||
color: ['#FD9E06', '#768BFF'],
|
||||
series: [{
|
||||
name: '来源',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.Ech_1
|
||||
}]
|
||||
}, true);
|
||||
},
|
||||
|
||||
drawLine2() {
|
||||
this.Ech_2 = [];
|
||||
let data_num = this.tableData.topic
|
||||
for (let i in data_num) {
|
||||
this.Ech_2.push([i, data_num[i]])
|
||||
}
|
||||
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.myChart2 = this.$echarts.init(document.getElementById('myChart2'))
|
||||
|
||||
// 绘制折现图
|
||||
this.myChart2.setOption({
|
||||
title: {
|
||||
text: '领域统计',
|
||||
x: '49%',
|
||||
y: 'top',
|
||||
textAlign: 'center'
|
||||
},
|
||||
grid: {
|
||||
bottom: '30%',
|
||||
},
|
||||
dataset: [{
|
||||
dimensions: ['name', 'value'],
|
||||
source: this.Ech_2
|
||||
}, {
|
||||
transform: {
|
||||
type: 'sort',
|
||||
config: {
|
||||
dimension: 'value',
|
||||
order: 'desc'
|
||||
}
|
||||
}
|
||||
}],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function(params) {
|
||||
return params[0].value[0] + "<br>" + params[0].value[1];
|
||||
},
|
||||
textStyle: {
|
||||
align: 'left'
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 30
|
||||
},
|
||||
},
|
||||
yAxis: {},
|
||||
series: {
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function(params) {
|
||||
var colorList = ['#5470c6',
|
||||
'#91cc75',
|
||||
'#fac858',
|
||||
'#ee6666',
|
||||
'#73c0de',
|
||||
'#3ba272',
|
||||
'#fc8452',
|
||||
'#9a60b4',
|
||||
'#ea7ccc',
|
||||
'#45C2E0',
|
||||
'#C1EBDD',
|
||||
'#FFC851',
|
||||
'#768BFF',
|
||||
'#12ED93',
|
||||
'#1869A0',
|
||||
'#FF9393',
|
||||
'#4B7CF3',
|
||||
'#dd3ee5',
|
||||
'#fe8104',
|
||||
'#01C2F9',
|
||||
'#F4CB29',
|
||||
'#FD9E06',
|
||||
'#4962FC',
|
||||
'#d223e7',
|
||||
'#f376e0',
|
||||
'#3F77FE',
|
||||
'#02CBF9',
|
||||
'#18D070',
|
||||
'#01C2F9', '#5470c6',
|
||||
'#91cc75',
|
||||
'#fac858',
|
||||
'#ee6666',
|
||||
'#73c0de',
|
||||
'#3ba272',
|
||||
'#fc8452',
|
||||
'#9a60b4',
|
||||
'#ea7ccc',
|
||||
'#45C2E0',
|
||||
'#C1EBDD',
|
||||
'#FFC851'
|
||||
];
|
||||
return colorList[params.dataIndex]
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
encode: {
|
||||
x: 'name',
|
||||
y: 'value'
|
||||
},
|
||||
datasetIndex: 1
|
||||
}
|
||||
}, true);
|
||||
},
|
||||
|
||||
drawLine3() {
|
||||
this.Ech_3 = [];
|
||||
let data_num = this.tableData.gjz
|
||||
for (let i in data_num) {
|
||||
if (data_num[i] < 6) {
|
||||
delete(data_num[i]);
|
||||
if (i == 0) {
|
||||
i = 0
|
||||
} else {
|
||||
i = i - 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (let i in data_num) {
|
||||
this.Ech_3.push([i, data_num[i]])
|
||||
}
|
||||
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.myChart3 = this.$echarts.init(document.getElementById('myChart3'))
|
||||
|
||||
// 绘制折现图
|
||||
this.myChart3.setOption({
|
||||
title: {
|
||||
text: '关键字统计',
|
||||
x: '49%',
|
||||
y: 'top',
|
||||
textAlign: 'center'
|
||||
},
|
||||
grid: {
|
||||
bottom: '30%',
|
||||
},
|
||||
dataset: [{
|
||||
dimensions: ['name', 'value'],
|
||||
source: this.Ech_3
|
||||
}, {
|
||||
transform: {
|
||||
type: 'sort',
|
||||
config: {
|
||||
dimension: 'value',
|
||||
order: 'desc'
|
||||
}
|
||||
}
|
||||
}],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function(params) {
|
||||
return params[0].value[0] + "<br>" + params[0].value[1];
|
||||
},
|
||||
textStyle: {
|
||||
align: 'left'
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 30
|
||||
},
|
||||
},
|
||||
yAxis: {},
|
||||
series: {
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function(params) {
|
||||
var colorList = ['#5470c6',
|
||||
'#91cc75',
|
||||
'#fac858',
|
||||
'#ee6666',
|
||||
'#73c0de',
|
||||
'#3ba272',
|
||||
'#fc8452',
|
||||
'#9a60b4',
|
||||
'#ea7ccc',
|
||||
'#45C2E0',
|
||||
'#C1EBDD',
|
||||
'#FFC851',
|
||||
'#768BFF',
|
||||
'#12ED93',
|
||||
'#1869A0',
|
||||
'#FF9393',
|
||||
'#4B7CF3',
|
||||
'#dd3ee5',
|
||||
'#fe8104',
|
||||
'#01C2F9',
|
||||
'#F4CB29',
|
||||
'#FD9E06',
|
||||
'#4962FC',
|
||||
'#d223e7',
|
||||
'#f376e0',
|
||||
'#3F77FE',
|
||||
'#02CBF9',
|
||||
'#18D070',
|
||||
'#01C2F9', '#5470c6',
|
||||
'#91cc75',
|
||||
'#fac858',
|
||||
'#ee6666',
|
||||
'#73c0de',
|
||||
'#3ba272',
|
||||
'#fc8452',
|
||||
'#9a60b4',
|
||||
'#ea7ccc',
|
||||
'#45C2E0',
|
||||
'#C1EBDD',
|
||||
'#FFC851'
|
||||
];
|
||||
return colorList[params.dataIndex]
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
encode: {
|
||||
x: 'name',
|
||||
y: 'value'
|
||||
},
|
||||
datasetIndex: 1
|
||||
}
|
||||
}, true);
|
||||
},
|
||||
|
||||
drawLine4() {
|
||||
this.Ech_4_1 = [];
|
||||
this.Ech_4_2 = [];
|
||||
|
||||
let data_num = this.tableData.time
|
||||
for (let i in data_num) {
|
||||
this.Ech_4_1.push(i)
|
||||
this.Ech_4_2.push(data_num[i])
|
||||
}
|
||||
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.myChart4 = this.$echarts.init(document.getElementById('myChart4'))
|
||||
|
||||
// 绘制折现图
|
||||
this.myChart4.setOption({
|
||||
title: {
|
||||
text: '时间统计',
|
||||
x: '49%',
|
||||
y: 'top',
|
||||
textAlign: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function(params) {
|
||||
return params[0].axisValueLabel + "<br>" + params[0].data;
|
||||
},
|
||||
textStyle: {
|
||||
align: 'left'
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.Ech_4_1
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: this.Ech_4_2,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#edae21", //折线点的颜色
|
||||
lineStyle: {
|
||||
color: "#fac858" //折线的颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
}]
|
||||
}, true);
|
||||
},
|
||||
|
||||
|
||||
drawLine5() {
|
||||
this.Ech_5 = [];
|
||||
let data_num = this.tableData.type
|
||||
for (let i in data_num) {
|
||||
this.Ech_5.push({
|
||||
name: i,
|
||||
value: data_num[i]
|
||||
})
|
||||
}
|
||||
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.myChart5 = this.$echarts.init(document.getElementById('myChart5'))
|
||||
|
||||
// 绘制折现图
|
||||
this.myChart5.setOption({
|
||||
title: {
|
||||
text: '文章类型统计',
|
||||
x: '49%',
|
||||
y: 'top',
|
||||
textAlign: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
bottom: '1%',
|
||||
// type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 10,
|
||||
top: 20,
|
||||
},
|
||||
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
|
||||
'#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#45C2E0',
|
||||
'#C1EBDD', '#FFC851', '#768BFF', '#12ED93',
|
||||
'#1869A0', '#FF9393', '#4B7CF3', '#dd3ee5', '#fe8104',
|
||||
'#01C2F9', '#F4CB29', '#FD9E06', '#4962FC', '#d223e7',
|
||||
'#f376e0', '#3F77FE', '#02CBF9', '#18D070', '#01C2F9'
|
||||
],
|
||||
series: [{
|
||||
name: '来源',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.Ech_5
|
||||
}]
|
||||
}, true);
|
||||
},
|
||||
|
||||
dataTable6() {
|
||||
this.tab_le6 = this.tableData.read
|
||||
},
|
||||
|
||||
dataTable7() {
|
||||
this.tab_le7_1 = this.tableData.zs_title
|
||||
this.tab_le7_2 = this.tableData.zf_title
|
||||
},
|
||||
|
||||
dataTable8() {
|
||||
this.tab_le8_1 = this.tableData.zs_abstract
|
||||
this.tab_le8_2 = this.tableData.zf_abstract
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.handle-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.ta_tit {
|
||||
text-align: center;
|
||||
margin: 50px 0 20px 0;
|
||||
}
|
||||
|
||||
.schart-box {
|
||||
width: 100%;
|
||||
margin-bottom: 50px;
|
||||
/* display: inline-block; */
|
||||
}
|
||||
|
||||
.schart-box .schart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user