diff --git a/src/views/cet/cet-ana-1.vue b/src/views/cet/cet-ana-1.vue index 311b5f1..9457ace 100644 --- a/src/views/cet/cet-ana-1.vue +++ b/src/views/cet/cet-ana-1.vue @@ -25,10 +25,10 @@ - +
- +
@@ -74,8 +74,8 @@ getRateByMajor: '/cet/getRateByMajor', }, map1loading: false, - tab2loading: false, - tab3loading: false, + map2loading: false, + map3loading: false, collegeOptions: [], batchOptions: [], @@ -106,12 +106,12 @@ this.getEntrydate(); this.allQuery(); this.getCollegeMajorData(); - this.gradePassRate(); - this.majorPassRate(); }, methods: { allQuery() { this.map1loading = true; + this.map2loading = true; // 新增 + this.map3loading = true; // 新增 let college = ['全校']; let query = 'tab1'; if (this.oneentrydate == null) { @@ -192,7 +192,7 @@ }, // 年级通过率 async gradePassRate() { - var myChart = echarts.init(document.getElementById('map2')); + this.map2loading = true; const getEntrydate = await defHttp.get({ url: this.Url.getEntrydate }); this.entrydateOptions = getEntrydate.entrydates; let entrydate = this.entrydateOptions.map((item) => item.value); @@ -203,14 +203,10 @@ level: 'cet4', }; let url = this.Url.getCollegeRate; - console.log(queryParams, 'queryParams'); let result = await defHttp.post({ url: url, data: queryParams }); - - console.log(myChart, 'mychart'); if (!result) { return; } - console.log(result.data, 'result'); result = result.data[name]; let collegeOption = { title: { @@ -258,17 +254,18 @@ animationDurationUpdate: 500, }; - myChart.setOption(collegeOption); + this.map2loading = false; + this.$nextTick(() => { + var myChart = echarts.init(document.getElementById('map2')); + myChart.setOption(collegeOption); + }); }, // 各专业通过率 async majorPassRate() { - var myChart = echarts.init(document.getElementById('map3')); + this.map3loading = true; const name = '西语学院'; - //let entrydate = this.oneentrydate.map((item) => item.value); - //console.log(entrydata, 'entrydata'); - let queryParams = { college: [[name]], entrydate: [this.oneentrydate], @@ -276,14 +273,11 @@ }; let url = this.Url.getMajorRate; console.log(queryParams, 'queryParams'); - let result = await defHttp.post({ url: url, data: queryParams }); - console.log(myChart, 'mychart'); if (!result) { return; } - console.log(result.data, 'result'); //result = result.data[name]; // 遍历 result.data 中的所有专业 @@ -359,7 +353,11 @@ ], animationDurationUpdate: 500, }; - myChart.setOption(majorOption); + this.map3loading = false; + this.$nextTick(() => { + var myChart = echarts.init(document.getElementById('map3')); + myChart.setOption(majorOption); + }); }, dataChart(data, tab) { @@ -458,34 +456,32 @@ .sort((a, b) => b - a) .map((value) => yData.indexOf(value) + 1); //如果选择全校，增加排名 - if (tab == 'tab1') { - seriesData.push({ - name: i + '级累计总通过率排名', - type: 'line', - yAxisIndex: 1, - data: rankData, - bar: {}, - show: false, + seriesData.push({ + name: i + '级累计总通过率排名', + type: 'line', + yAxisIndex: 1, + data: rankData, + bar: {}, + show: false, - itemStyle: { - normal: { - label: { - show: false, //开启显示 - position: 'top', //在上方显示 - formatter: '{c}', - textStyle: { - //数值样式 - color: 'black', - fontSize: 8, - }, + itemStyle: { + normal: { + label: { + show: false, //开启显示 + position: 'top', //在上方显示 + formatter: '{c}', + textStyle: { + //数值样式 + color: 'black', + fontSize: 8, }, - color: colors[j++], }, + color: colors[j++], }, - }); - if (j == colors.length) { - j = 0; - } + }, + }); + if (j == colors.length) { + j = 0; } } let myChart = null; @@ -623,7 +619,6 @@ this.collegeOptions.map((item) => item.value), 'collegeOptions' ); - console.log(name, 'params'); console.log(this.collegeOptions.map((item) => item.value).includes(name), 'bool'); if (params != null && params != undefined && params.name != '' && this.collegeOptions.map((item) => item.value).includes(name)) { console.log(params, 'params'); @@ -634,14 +629,13 @@ level: 'cet4', }; let url = this.Url.getCollegeRate; - console.log(queryParams, 'queryParams'); + this.map2loading = true; + this.map3loading = true; let result = await defHttp.post({ url: url, data: queryParams }); - console.log(myChart, 'mychart'); if (!result) { return; } - console.log(result.data, 'result'); result = result.data[name]; let collegeOption = { title: { @@ -689,21 +683,6 @@ animationDurationUpdate: 500, }; - console.log(collegeOption, 'collegeOption'); - - //let spanElement = document.getElementById('span'); - - // 隐藏 span 元素 - //spanElement.style.display = 'none'; - var map2Chart = echarts.init(document.getElementById('map2')); - map2Chart.setOption(collegeOption, true); - //myChart.setOption(collegeOption, true); - - console.log(myChart, 'mychart'); - // this.college = [params]; - - // this.query(tab, this.college, this.entrydate); - //点击事件中的个专业四级通过率 let querMajorParam = { college: [[name]], @@ -711,16 +690,12 @@ level: 'cet4', }; let urlMajor = this.Url.getMajorRate; - console.log(querMajorParam, 'querMajorParam'); let resultMajor = await defHttp.post({ url: urlMajor, data: querMajorParam }); - console.log(myChart, 'mychart'); if (!resultMajor) { return; } - console.log(resultMajor.data, 'resultMajor'); - //result = result.data[name]; // 遍历 result.data 中的所有专业 const majors = Object.keys(resultMajor.data); // 获取所有专业名称 @@ -792,9 +767,14 @@ ], animationDurationUpdate: 500, }; - console.log(majorOption, 'majorOption'); - var map3Chart = echarts.init(document.getElementById('map3')); - map3Chart.setOption(majorOption, true); + this.map3loading = false; + this.map2loading = false; + this.$nextTick(() => { + var map2Chart = echarts.init(document.getElementById('map2')); + map2Chart.setOption(collegeOption, true); + var map3Chart = echarts.init(document.getElementById('map3')); + map3Chart.setOption(majorOption, true); + }); } }); }, @@ -844,11 +824,9 @@ // }); console.log('data', result.data); } finally { - query == 'tab1' ? (this.map1loading = false) : (this.tab2loading = false); + this.map1loading = false; this.$nextTick(() => { - if (query == 'tab1') { - this.dataChart(result.data, query); - } + this.dataChart(result.data, query); }); } },