801 lines
29 KiB
Vue
801 lines
29 KiB
Vue
<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>
|