期刊数据图
This commit is contained in:
@@ -362,7 +362,11 @@ export default {
|
|||||||
{
|
{
|
||||||
icon: 'el-icon-data-analysis',
|
icon: 'el-icon-data-analysis',
|
||||||
index: 'citationanalysis',
|
index: 'citationanalysis',
|
||||||
title: this.$t('sidebar.analysis')
|
title: this.$t('sidebar.datasis'),
|
||||||
|
subs: [
|
||||||
|
{ icon: 'el-icon-data-analysis', index: 'citationanalysis', title: this.$t('sidebar.analysis') },
|
||||||
|
{ icon: 'el-icon-data-analysis', index: 'evaluationsis', title: this.$t('sidebar.evaluationsis') }
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'el-icon-chat-line-square',
|
icon: 'el-icon-chat-line-square',
|
||||||
|
|||||||
@@ -94,7 +94,9 @@ const en = {
|
|||||||
userManSys9: 'Editors & Staff',
|
userManSys9: 'Editors & Staff',
|
||||||
userManSys11: 'Journal Agreement',
|
userManSys11: 'Journal Agreement',
|
||||||
analyp: 'Manager',
|
analyp: 'Manager',
|
||||||
|
datasis: 'Journal Data Statistics',
|
||||||
analysis: 'Journal Evaluation System',
|
analysis: 'Journal Evaluation System',
|
||||||
|
evaluationsis: 'Journal Evaluation Statistics',
|
||||||
rev_ewer: 'Reviewer',
|
rev_ewer: 'Reviewer',
|
||||||
rev_ewer1: 'Peer Review',
|
rev_ewer1: 'Peer Review',
|
||||||
rev_ewer2: 'Review History',
|
rev_ewer2: 'Review History',
|
||||||
@@ -147,6 +149,17 @@ const en = {
|
|||||||
act1: 'Dealing',
|
act1: 'Dealing',
|
||||||
act2: 'Finished'
|
act2: 'Finished'
|
||||||
},
|
},
|
||||||
|
evaluationsis: {
|
||||||
|
EmploymentRate: 'Employment Rate',
|
||||||
|
contry: 'Contry',
|
||||||
|
zr: 'To Change Into',
|
||||||
|
zc: 'Transfer Out',
|
||||||
|
articles: 'Total Number Of Articles',
|
||||||
|
boardMembers: 'Number Of Editorial Board Members',
|
||||||
|
InternationalDistributionNumber: 'International Distribution Of Editorial Board Members',
|
||||||
|
InternationalDistributionTotal: 'total',
|
||||||
|
InternationalDistributionArticles: 'International Distribution Of Articles',
|
||||||
|
},
|
||||||
charact: {
|
charact: {
|
||||||
role: 'Role',
|
role: 'Role',
|
||||||
role1: 'Role editor',
|
role1: 'Role editor',
|
||||||
|
|||||||
@@ -93,7 +93,9 @@ const zh = {
|
|||||||
userManSys9: '期刊编辑',
|
userManSys9: '期刊编辑',
|
||||||
userManSys11: '期刊协议',
|
userManSys11: '期刊协议',
|
||||||
analyp: '管理',
|
analyp: '管理',
|
||||||
|
datasis: '数据统计',
|
||||||
analysis: '引用统计',
|
analysis: '引用统计',
|
||||||
|
evaluationsis: '评价统计',
|
||||||
rev_ewer: '审稿人',
|
rev_ewer: '审稿人',
|
||||||
rev_ewer1: '审稿',
|
rev_ewer1: '审稿',
|
||||||
rev_ewer2: '审稿记录',
|
rev_ewer2: '审稿记录',
|
||||||
@@ -146,6 +148,24 @@ const zh = {
|
|||||||
act1: '审查中',
|
act1: '审查中',
|
||||||
act2: '已完结'
|
act2: '已完结'
|
||||||
},
|
},
|
||||||
|
evaluationsis: {
|
||||||
|
EmploymentRate: '录用率',
|
||||||
|
contry: '国家',
|
||||||
|
articles: '全部文章数',
|
||||||
|
zr: '转入',
|
||||||
|
zc: '转出',
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
boardMembers: '编委人数',
|
||||||
|
|
||||||
|
|
||||||
|
InternationalDistributionNumber: '编委国际化分布',
|
||||||
|
InternationalDistributionArticles: '文章国际化分布',
|
||||||
|
|
||||||
|
InternationalDistributionTotal: '总计',
|
||||||
|
|
||||||
|
},
|
||||||
charact: {
|
charact: {
|
||||||
role: '角色',
|
role: '角色',
|
||||||
role1: '主编',
|
role1: '主编',
|
||||||
|
|||||||
800
src/components/page/evaluationsis_report.vue
Normal file
800
src/components/page/evaluationsis_report.vue
Normal file
@@ -0,0 +1,800 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="crumbs">
|
||||||
|
<el-breadcrumb separator="/">
|
||||||
|
<el-breadcrumb-item> <i class="el-icon-data-analysis"></i> Journal Evaluation Statistics </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="journal_id"
|
||||||
|
filterable
|
||||||
|
placeholder="Please select a Journal"
|
||||||
|
value-key="groupID"
|
||||||
|
style="width: 300px"
|
||||||
|
@change="chan_id"
|
||||||
|
>
|
||||||
|
<el-option v-for="item in evaList" :label="item.title" :key="item.journal_id" :value="item.journal_id"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="myChart" class="schart" style="width: 40%; height: calc(70vh * 0.25); margin: 0 auto; float: right; z-index: 20"></div>
|
||||||
|
<!-- <div style="width: 100%; height: 200px; margin: 0 auto; margin-bottom: 40px; overflow: hidden">
|
||||||
|
|
||||||
|
<div id="myChart" class="schart" style="width: 50%; height: 100%; margin: 0 auto; float: right"></div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<div id="myChartgjhp" class="schart" style="width: 100%; height: 70vh; margin: 0 auto"></div>
|
||||||
|
<!-- <div style="width: 100%; display: flex; align-items: center; justify-content: space-between"> -->
|
||||||
|
|
||||||
|
<!-- </div> -->
|
||||||
|
|
||||||
|
<!-- 国家内外(饼状图) -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var p_year = new Date().getFullYear() - 1;
|
||||||
|
var year = new Date().getFullYear();
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
evaList: [],
|
||||||
|
user_id: localStorage.getItem('U_id'),
|
||||||
|
user_cap: localStorage.getItem('U_role'),
|
||||||
|
loading: false,
|
||||||
|
df_jour: [],
|
||||||
|
tableData: [],
|
||||||
|
journal_id: '',
|
||||||
|
journal_data: {},
|
||||||
|
|
||||||
|
myChart1: '',
|
||||||
|
myChart: '',
|
||||||
|
myChartgjh: '',
|
||||||
|
myChartgjhp: '',
|
||||||
|
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: [],
|
||||||
|
category: [
|
||||||
|
{
|
||||||
|
title: this.$t('evaluationsis.articles'),
|
||||||
|
key: 'mq'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: this.$t('evaluationsis.zr'),
|
||||||
|
key: 'zr'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: this.$t('evaluationsis.zc'),
|
||||||
|
key: 'zc'
|
||||||
|
}
|
||||||
|
// {
|
||||||
|
// title: '录用率',
|
||||||
|
// key: 'lyl'
|
||||||
|
// }
|
||||||
|
],
|
||||||
|
option: {
|
||||||
|
legend: {
|
||||||
|
// type: 'scroll',
|
||||||
|
// orient: 'vertical',
|
||||||
|
right: 0
|
||||||
|
// top: 10,
|
||||||
|
// bottom: 20
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dataset: {
|
||||||
|
source: []
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisLabel: {
|
||||||
|
// formatter: function (value) {
|
||||||
|
// console.log('value at line 86:', value);
|
||||||
|
// // 格式化标签，例如只显示年月日
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
gridIndex: 0
|
||||||
|
},
|
||||||
|
grid: [
|
||||||
|
{
|
||||||
|
top: '25%',
|
||||||
|
width: '100%',
|
||||||
|
bottom: '5%',
|
||||||
|
left: 0,
|
||||||
|
containLabel: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
series: []
|
||||||
|
},
|
||||||
|
|
||||||
|
optiongjh: {
|
||||||
|
title: {
|
||||||
|
text: '文章国际化分布'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
grid: [
|
||||||
|
{
|
||||||
|
top: 50,
|
||||||
|
width: '100%',
|
||||||
|
bottom: '34%',
|
||||||
|
left: 10,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
top: '33%',
|
||||||
|
width: '100%',
|
||||||
|
bottom: 0,
|
||||||
|
left: 10,
|
||||||
|
containLabel: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
xAxis: [],
|
||||||
|
yAxis: [
|
||||||
|
{ gridIndex: 0, type: 'value', boundaryGap: [0, 0.01] },
|
||||||
|
{ gridIndex: 1, type: 'value', boundaryGap: [0, 0.01] }
|
||||||
|
],
|
||||||
|
|
||||||
|
series: []
|
||||||
|
},
|
||||||
|
|
||||||
|
name: [
|
||||||
|
{ title: p_year + '', key: 'p_year' },
|
||||||
|
{ title: year + '', key: 'year' }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// df_jour: function(val) {
|
||||||
|
// var _this = this;
|
||||||
|
// _this.$nextTick(function() {
|
||||||
|
// this.drawLine1();
|
||||||
|
// this.drawLine2();
|
||||||
|
// this.drawLine3();
|
||||||
|
// this.drawLine4();
|
||||||
|
// this.drawLine5();
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getData();
|
||||||
|
// this.drawLine();
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
computed: {
|
||||||
|
opened() {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async chan_id(value) {
|
||||||
|
this.loading = true;
|
||||||
|
console.log('value at line 138:', value);
|
||||||
|
this.$echarts.init(document.getElementById('myChart')).clear();
|
||||||
|
this.$echarts.init(document.getElementById('myChartgjhp')).clear();
|
||||||
|
this.journal_id = value;
|
||||||
|
console.log('this.evaList at line 169:', this.evaList);
|
||||||
|
this.journal_data = this.evaList.find((e) => e.journal_id == this.journal_id);
|
||||||
|
|
||||||
|
await this.initEcharts();
|
||||||
|
await this.initEchartsgjh();
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
// 获取数据
|
||||||
|
async getData() {
|
||||||
|
this.loading = true;
|
||||||
|
|
||||||
|
this.$api
|
||||||
|
.post('api/Super/editorJournal', {
|
||||||
|
editor_id: this.user_id
|
||||||
|
})
|
||||||
|
.then(async (res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.loading = false;
|
||||||
|
this.evaList = res.data.list;
|
||||||
|
this.journal_id = res.data.list[0].journal_id;
|
||||||
|
console.log('this.evaList at line 169:', this.evaList);
|
||||||
|
this.journal_data = this.evaList.find((e) => e.journal_id == this.journal_id);
|
||||||
|
|
||||||
|
await this.initEcharts();
|
||||||
|
await this.initEchartsgjh();
|
||||||
|
} else {
|
||||||
|
this.loading = false;
|
||||||
|
this.$message.error(res.msg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
this.loading = false;
|
||||||
|
this.$message.error(err);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
initEcharts() {
|
||||||
|
this.myChart = this.$echarts.init(document.getElementById('myChart'));
|
||||||
|
|
||||||
|
const downloadJson = { ...this.journal_data.board };
|
||||||
|
var option = {
|
||||||
|
title: {
|
||||||
|
text: `${this.$t('evaluationsis.InternationalDistributionNumber')} `,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
// top: index == 0 ? '27%' : '62%',
|
||||||
|
right: '10%',
|
||||||
|
textAlign: 'left'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
// formatter函数动态修改tooltip样式
|
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
// type: 'scroll',
|
||||||
|
orient: 'vertical',
|
||||||
|
right: 10,
|
||||||
|
top: 20,
|
||||||
|
bottom: 20,
|
||||||
|
data: Object.keys(downloadJson.country).map(function (key) {
|
||||||
|
return key;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
formatter: '\n {b|{b}：}{c}',
|
||||||
|
|
||||||
|
rich: {
|
||||||
|
b: {
|
||||||
|
color: '#4C5058',
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
lineHeight: 10
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: this.$t('evaluationsis.boardMembers'),
|
||||||
|
|
||||||
|
type: 'pie',
|
||||||
|
radius: '65%',
|
||||||
|
center: ['40%', '65%'],
|
||||||
|
data: Object.keys(downloadJson.country).map(function (key) {
|
||||||
|
return {
|
||||||
|
name: key,
|
||||||
|
value: downloadJson.country[key]
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
this.myChart.setOption(option);
|
||||||
|
console.log('option at line 194:', option);
|
||||||
|
},
|
||||||
|
uniqueArr(arr1, arr2) {
|
||||||
|
//合并两个数组
|
||||||
|
arr1.push(...arr2); //或者arr1 = [...arr1,...arr2]
|
||||||
|
//去重
|
||||||
|
let arr3 = Array.from(new Set(arr1)); //let arr3 = [...new Set(arr1)]
|
||||||
|
console.log(arr3);
|
||||||
|
return arr3;
|
||||||
|
},
|
||||||
|
|
||||||
|
async initEchartsgjh(type, title) {
|
||||||
|
this.myChartgjhp = this.$echarts.init(document.getElementById('myChartgjhp'));
|
||||||
|
var p_year = [];
|
||||||
|
var year = [];
|
||||||
|
var xAxis = [];
|
||||||
|
var series = [];
|
||||||
|
var legend = [];
|
||||||
|
var title = [];
|
||||||
|
var category = this.category;
|
||||||
|
var sourceList = [];
|
||||||
|
var product = ['product'];
|
||||||
|
|
||||||
|
var xcategory = this.category.map((e) => e.title);
|
||||||
|
console.log('xcategory at line 306:', xcategory);
|
||||||
|
for (let i in this.journal_data['p_year'].gjh) {
|
||||||
|
p_year.push(i);
|
||||||
|
}
|
||||||
|
for (let i in this.journal_data['year'].gjh) {
|
||||||
|
year.push(i);
|
||||||
|
}
|
||||||
|
var yAxisData = this.uniqueArr(p_year, year);
|
||||||
|
console.log('yAxisData at line 333:', yAxisData);
|
||||||
|
var str = '';
|
||||||
|
this.name.forEach((e, index) => {
|
||||||
|
var otherInfo = { ...this.journal_data[e.key] };
|
||||||
|
console.log('otherInfo at line 312:', otherInfo);
|
||||||
|
var value = [];
|
||||||
|
var sourceListYear = [];
|
||||||
|
this.category.forEach((v, i) => {
|
||||||
|
sourceListYear.push({ value: this.journal_data[e.key][v.key] ? this.journal_data[e.key][v.key] : 0, ...otherInfo });
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('sourceListYear at line 359:', sourceListYear);
|
||||||
|
series[index] = {
|
||||||
|
name: e.title,
|
||||||
|
type: 'bar',
|
||||||
|
label: {
|
||||||
|
position: 'top',
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
hoverAnimation: true, // 悬浮的动画加上
|
||||||
|
xAxisIndex: 0,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
data: sourceListYear,
|
||||||
|
barWidth: 20
|
||||||
|
};
|
||||||
|
var strValue = Number(this.journal_data[e.key]['lyl']) * 100;
|
||||||
|
if (index == 0) {
|
||||||
|
str += `${e.title} : ${Number(strValue).toFixed(2)}% \n\n`;
|
||||||
|
} else {
|
||||||
|
str += `${e.title} : ${Number(strValue).toFixed(2)}%`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
title[0] = {
|
||||||
|
text: this.$t('evaluationsis.EmploymentRate'),
|
||||||
|
subtext: str,
|
||||||
|
top: '0%',
|
||||||
|
left: '30%',
|
||||||
|
textAlign: 'left',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.name.forEach((e, index) => {
|
||||||
|
var otherInfo = { ...this.journal_data[e.key] };
|
||||||
|
|
||||||
|
title[index + 1] = {
|
||||||
|
text:
|
||||||
|
!localStorage.getItem('langs') || localStorage.getItem('langs') == 'en'
|
||||||
|
? `${this.$t('evaluationsis.InternationalDistributionArticles')} in ${e.title} `
|
||||||
|
: `${e.title} 年 ${this.$t('evaluationsis.InternationalDistributionArticles')}`,
|
||||||
|
// subtext: '总计 ',
|
||||||
|
top: index == 0 ? '27%' : '62%',
|
||||||
|
left: '0%',
|
||||||
|
textAlign: 'left',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
};
|
||||||
|
legend.push(e.title);
|
||||||
|
|
||||||
|
series[index + 3] = {
|
||||||
|
name: e.title,
|
||||||
|
type: 'bar',
|
||||||
|
|
||||||
|
label: {
|
||||||
|
position: 'top',
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
hoverAnimation: true, // 悬浮的动画加上
|
||||||
|
data: [],
|
||||||
|
|
||||||
|
// type: 'bar',
|
||||||
|
barWidth: 20
|
||||||
|
};
|
||||||
|
var value = [];
|
||||||
|
yAxisData.forEach((v, i) => {
|
||||||
|
value.push({ value: this.journal_data[e.key].gjh[v] ? this.journal_data[e.key].gjh[v] : 0, ...otherInfo });
|
||||||
|
});
|
||||||
|
series[index + 3] = { ...series[index + 3], xAxisIndex: index + 1, yAxisIndex: index + 1, data: value };
|
||||||
|
console.log('series at line 352:', series);
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('series at line 352:', series);
|
||||||
|
|
||||||
|
var option = {
|
||||||
|
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||||
|
// color: ['#bfa', '#baf', 'pink', '#baf'], // 配置数据颜色
|
||||||
|
grid: [
|
||||||
|
// 配置第一个折线图的位置
|
||||||
|
{
|
||||||
|
left: '5%',
|
||||||
|
right: '2%',
|
||||||
|
width: '400',
|
||||||
|
top: '5%',
|
||||||
|
height: '15%'
|
||||||
|
},
|
||||||
|
// 配置第二个折线图位置
|
||||||
|
{
|
||||||
|
left: '5%',
|
||||||
|
right: '2%',
|
||||||
|
top: '35%',
|
||||||
|
height: '20%'
|
||||||
|
},
|
||||||
|
// 配置第二个折线图位置
|
||||||
|
{
|
||||||
|
left: '5%',
|
||||||
|
right: '2%',
|
||||||
|
top: '75%',
|
||||||
|
height: '20%'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
left: '5%',
|
||||||
|
right: '2%',
|
||||||
|
width: '900',
|
||||||
|
top: '5%',
|
||||||
|
height: '15%'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
// formatter函数动态修改tooltip样式
|
||||||
|
formatter: function (params) {
|
||||||
|
var that = this;
|
||||||
|
console.log('params at line 430:', params);
|
||||||
|
if (params) {
|
||||||
|
var htmlStr = '';
|
||||||
|
// htmlStr += params[0].name.replace(/\-/g, '/') + '<br/>'; //x轴的名称
|
||||||
|
|
||||||
|
if (params[0].axisIndex == 0) {
|
||||||
|
htmlStr += '<div>';
|
||||||
|
htmlStr += params[0].name + '<br/>';
|
||||||
|
//圆点后面显示的文本
|
||||||
|
for (var i = 0; i < params.length; i++) {
|
||||||
|
var param = params[i]; // 存一份item项
|
||||||
|
console.log('param at line 404:', param);
|
||||||
|
var seriesName = param.seriesName; //图例名称
|
||||||
|
var value = param.value; //y轴值
|
||||||
|
var color = param.color; //图例颜色
|
||||||
|
|
||||||
|
htmlStr +=
|
||||||
|
'<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
|
||||||
|
color +
|
||||||
|
';"></span>';
|
||||||
|
htmlStr += `${param.seriesName}: ${value}<br/>`; //2023年
|
||||||
|
|
||||||
|
htmlStr += '</div>';
|
||||||
|
}
|
||||||
|
} else if (params[0].axisIndex == 1 || params[0].axisIndex == 2) {
|
||||||
|
htmlStr += '<div>';
|
||||||
|
htmlStr +=
|
||||||
|
!localStorage.getItem('langs') || localStorage.getItem('langs') == 'en'
|
||||||
|
? 'Contry' + `：` + params[0].name + '<br/>'
|
||||||
|
: '国家' + ` ：` + params[0].name + '<br/>';
|
||||||
|
//圆点后面显示的文本
|
||||||
|
for (var i = 0; i < params.length; i++) {
|
||||||
|
var param = params[i]; // 存一份item项
|
||||||
|
console.log('param at line 404:', param);
|
||||||
|
var seriesName = param.seriesName; //图例名称
|
||||||
|
var value = param.value; //y轴值
|
||||||
|
var color = param.color; //图例颜色
|
||||||
|
|
||||||
|
htmlStr +=
|
||||||
|
'<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
|
||||||
|
color +
|
||||||
|
';"></span>';
|
||||||
|
htmlStr += `${param.seriesName}: ${value}<br/>`; //2023年
|
||||||
|
|
||||||
|
htmlStr += '</div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return htmlStr;
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
backgroundColor: '#ccc',
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: '#ccc',
|
||||||
|
padding: 10,
|
||||||
|
textStyle: {
|
||||||
|
color: '#000',
|
||||||
|
fontSize: 12,
|
||||||
|
align: 'left'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
title: title,
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
// left: '0',
|
||||||
|
x: 'center',
|
||||||
|
y: '0',
|
||||||
|
data: legend,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 将上下两个tootip合成一个
|
||||||
|
axisPointer: {
|
||||||
|
link: { xAxisIndex: [1, 2] }
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
gridIndex: 0,
|
||||||
|
type: 'category',
|
||||||
|
scale: true,
|
||||||
|
|
||||||
|
axisLabel: { interval: 0, show: true, fontSize: 12 },
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: xcategory //x轴时间的数据
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gridIndex: 1,
|
||||||
|
type: 'category',
|
||||||
|
scale: true,
|
||||||
|
|
||||||
|
axisLabel: { interval: 0, show: true, fontSize: 12 },
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: yAxisData //x轴时间的数据
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gridIndex: 2,
|
||||||
|
type: 'category',
|
||||||
|
scale: true,
|
||||||
|
|
||||||
|
axisLabel: { interval: 0, show: true, fontSize: 12 },
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: yAxisData //x轴时间的数据
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '',
|
||||||
|
nameLocation: 'center',
|
||||||
|
gridIndex: 0,
|
||||||
|
nameGap: 30,
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
min: function (value) {
|
||||||
|
return parseInt(value.min);
|
||||||
|
},
|
||||||
|
max: function (value) {
|
||||||
|
return parseInt(value.max * 1.05);
|
||||||
|
},
|
||||||
|
scale: true,
|
||||||
|
boundaryGap: [0, '100%'],
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
// splitNumber: 4 //设置坐标轴的分割段数
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '',
|
||||||
|
nameLocation: 'center',
|
||||||
|
nameGap: 50,
|
||||||
|
gridIndex: 1,
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: '500'
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
min: function (value) {
|
||||||
|
return parseInt(value.min);
|
||||||
|
},
|
||||||
|
max: function (value) {
|
||||||
|
return parseInt(value.max * 1.05);
|
||||||
|
},
|
||||||
|
scale: false,
|
||||||
|
boundaryGap: [0, '100%'],
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
// splitNumber: 4 //设置坐标轴的分割段数
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '',
|
||||||
|
nameLocation: 'center',
|
||||||
|
gridIndex: 2,
|
||||||
|
nameGap: 30,
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
min: function (value) {
|
||||||
|
return parseInt(value.min);
|
||||||
|
},
|
||||||
|
max: function (value) {
|
||||||
|
return parseInt(value.max * 1.05);
|
||||||
|
},
|
||||||
|
scale: true,
|
||||||
|
boundaryGap: [0, '100%'],
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
// splitNumber: 4 //设置坐标轴的分割段数
|
||||||
|
}
|
||||||
|
|
||||||
|
// {
|
||||||
|
// type: 'value',
|
||||||
|
// name: '负荷/百分比',
|
||||||
|
// nameLocation: 'center',
|
||||||
|
// gridIndex: 1,
|
||||||
|
// nameGap: 42,
|
||||||
|
// nameTextStyle: {
|
||||||
|
// fontSize: 12
|
||||||
|
// },
|
||||||
|
// axisLabel: {
|
||||||
|
// fontSize: 12
|
||||||
|
// },
|
||||||
|
// // min: function (value) {
|
||||||
|
// // return parseInt(value.min);
|
||||||
|
// // },
|
||||||
|
// // max: function (value) {
|
||||||
|
// // return parseInt(value.max * 1.05);
|
||||||
|
// // },
|
||||||
|
// scale: true,
|
||||||
|
// boundaryGap: [0, '100%'],
|
||||||
|
// splitLine: {
|
||||||
|
// show: false
|
||||||
|
// },
|
||||||
|
// splitNumber: 4 //设置坐标轴的分割段数
|
||||||
|
// }
|
||||||
|
],
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: 'inside',
|
||||||
|
// startValue: this.y1Data.length - 4, // 放置最后4个数组
|
||||||
|
// endValue: this.y1Data.length - 1,
|
||||||
|
xAxisIndex: [0, 1] // 显示 0 1 的数据，这个要加，不加的话，悬浮提示就会出问题
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: series
|
||||||
|
};
|
||||||
|
|
||||||
|
await this.myChartgjhp.setOption(option);
|
||||||
|
// await this.myChartgjh.setOption(this.getgjhData('year', this.name[1].title));
|
||||||
|
}
|
||||||
|
// async initEchartsgjh() {
|
||||||
|
// this.myChartgjhp = this.$echarts.init(document.getElementById('myChartgjhp'));
|
||||||
|
|
||||||
|
// var option = { ...this.optiongjh };
|
||||||
|
// var datas = [];
|
||||||
|
// var series = [];
|
||||||
|
// var p_year = [];
|
||||||
|
// var year = [];
|
||||||
|
// var xAxis = [];
|
||||||
|
// for (let i in this.journal_data['p_year'].gjh) {
|
||||||
|
// p_year.push(i);
|
||||||
|
// }
|
||||||
|
// for (let i in this.journal_data['year'].gjh) {
|
||||||
|
// year.push(i);
|
||||||
|
// }
|
||||||
|
// var yAxisData = this.uniqueArr(p_year, year);
|
||||||
|
// this.name.forEach((e, index) => {
|
||||||
|
// xAxis[index] = {
|
||||||
|
// type: 'category',
|
||||||
|
// gridIndex: index,
|
||||||
|
// axisLabel: {
|
||||||
|
// interval: 0
|
||||||
|
// // formatter: function (value) {
|
||||||
|
// // console.log('value at line 86:', value);
|
||||||
|
// // // 格式化标签，例如只显示年月日
|
||||||
|
// // }
|
||||||
|
// },
|
||||||
|
// data: yAxisData
|
||||||
|
// };
|
||||||
|
// series[index] = {
|
||||||
|
// name: e.title,
|
||||||
|
// type: 'bar',
|
||||||
|
// barWidth: 20,
|
||||||
|
// label: {
|
||||||
|
// position: 'top',
|
||||||
|
// show: true
|
||||||
|
// },
|
||||||
|
// data: []
|
||||||
|
// };
|
||||||
|
// var value = [];
|
||||||
|
// yAxisData.forEach((v, i) => {
|
||||||
|
// console.log('v at line 292:', v, i);
|
||||||
|
// value.push(this.journal_data[e.key].gjh[v] ? this.journal_data[e.key].gjh[v] : 0);
|
||||||
|
// });
|
||||||
|
// if (index == 0) {
|
||||||
|
// series[index] = { ...series[index], data: value };
|
||||||
|
// } else {
|
||||||
|
// series[index] = { ...series[index], xAxisIndex: index, yAxisIndex: index, data: value };
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// option.xAxis = xAxis;
|
||||||
|
// option.series = series;
|
||||||
|
|
||||||
|
// await this.myChartgjhp.setOption(option);
|
||||||
|
// // await this.myChartgjh.setOption(this.getgjhData('year', this.name[1].title));
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</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>
|
||||||
@@ -545,6 +545,14 @@ export default new Router({
|
|||||||
},
|
},
|
||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/evaluationsis', //引用情况分析
|
||||||
|
component: () => import('../components/page/evaluationsis_report.vue'),
|
||||||
|
meta: {
|
||||||
|
title: 'Journal Evaluation Statistics'
|
||||||
|
},
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/TMRGPT', //TMRGPT
|
path: '/TMRGPT', //TMRGPT
|
||||||
component: () => import('../components/page/tmrGPT'),
|
component: () => import('../components/page/tmrGPT'),
|
||||||
|
|||||||
Reference in New Issue
Block a user