diff --git a/src/views/cet/cet-ana-1.vue b/src/views/cet/cet-ana-1.vue index bdd274e..fc94b4f 100644 --- a/src/views/cet/cet-ana-1.vue +++ b/src/views/cet/cet-ana-1.vue @@ -24,7 +24,15 @@ -
+
+
+
+ 点击柱状图可查看该学院  + 各年级四级通过率 +
+ + +
@@ -60,6 +68,7 @@ export default { collegetab2: [], collegeMajorOptions: [], collegeMajor: [], + Url: { getBatch: '/cet/getBatch', getEntrydate: '/cet/getEntrydate', @@ -97,26 +106,6 @@ export default { }; }, methods: { - onMajorChange(value) { - console.log(value, 'value'); - let length = value.length; - //遍历value,与this.collegeMajorOptions比较，如果value中的数据在this.collegeMajorOptions中则获得他的children长度 - for (let i = 0; i < value.length; i++) { - for (let j = 0; j < this.collegeMajorOptions.length; j++) { - if (value[i] == this.collegeMajorOptions[j].value) { - length += this.collegeMajorOptions[j].children.length; - length -= 1; - } - if (length > 5) { - message.error('最多选择五个专业'); - //删除value最后一个数据 - value.pop(); - return; - } - } - } - console.log(length, 'length'); - }, allQuery() { this.tab1loading = true; let college = ['全校']; @@ -127,12 +116,11 @@ export default { this.query(query, college, [this.oneentrydate]); }, async majorQuery() { - if (this.majorentrydate.length == 0) { message.error('请选择年级'); return; } - if (this.collegeMajor.length == 0||this.collegeMajor==null) { + if (this.collegeMajor.length == 0 || this.collegeMajor == null) { message.error('请选择学院'); return; } @@ -157,44 +145,6 @@ export default { }); } }, - collegeQuery() { - if (this.collegeentrydate.length == 0) { - message.error('请选择年级'); - return; - } - if (this.collegetab2.length == 0) { - message.error('请选择学院'); - return; - } - - this.tab2loading = true; - let query = 'tab2'; - this.query(query, this.collegetab2, this.collegeentrydate); - }, - test(value) { - console.log(this.collegeMajor); - console.log(value); - }, - //选择全校 - checkAll(e) { - this.college = ['全校']; - this.showGroup = !this.showGroup; - }, - - //选择学院 - checkOne(e) { - console.log(e); - this.college = e; - this.showBox = true; - if (e.length == 0) { - this.showBox = false; - } - }, - //选择年级 - checkoneentrydate(e) { - console.log(e.target.value, 'e'); - this.entrydate = [e.target.value]; - }, //获取学院专业级联数据 async getCollegeMajorData() { @@ -234,309 +184,6 @@ export default { console.log(this.collegeOptions, 'collegeOptions'); }); }, - onMajorEntrydateChange(value) { - console.log(value, 'value'); - if (value.length > 5) { - //找到value中不在this.lastMajorEntrydate中的数据 - for (let i = 0; i < value.length; i++) { - if (!this.lastMajorEntrydate.includes(value[i])) { - message.error('最多选择五个'); - //删除value[i] - value.splice(i, 1); - return; - } - } - } - this.lastMajorEntrydate = value; - }, - //学院对比 学院选项回调函数 - onCollegeChange(value) { - console.log(value, 'value'); - if (value.length > 5) { - message.error('最多选择五个'); - //和lastCollege比较，如果value中的数据不在lastCollege中则删除 - for (let i = 0; i < value.length; i++) { - if (!this.lastCollege.includes(value[i])) { - value.splice(i, 1); - return; - } - } - return; - } - this.lastCollege = value; - }, - //学院对比 年级选项回调函数 - onCollegeEntrydateChange(value) { - console.log(value, 'value'); - if (value.length > 5) { - message.error('最多选择五个'); - //和lastCollegeEntrydate比较，如果value中的数据不在lastCollegeEntrydate中则删除 - for (let i = 0; i < value.length; i++) { - if (!this.lastCollegeEntrydate.includes(value[i])) { - value.splice(i, 1); - return; - } - } - return; - } - this.lastCollegeEntrydate = value; - }, - //专业选项回调函数 - onCollegeMajorChange(value) { - //将value中的数据与this.lastCollegeMajor比较，如果value中的有this.lastCollegeMajor中没有的数据则添加,反之寻找在this.majorOptions中并且在this.lastCollegeMajor中但是不在value中的数据删除 - for (let i = 0; i < value.length; i++) { - if (!this.lastCollegeMajor.map((item) => item[1]).includes(value[i])) { - if (this.majorLength == 5) { - message.error('最多选择五个'); - //从value中删除value[i] - value.splice(i, 1); - return; - } - this.lastCollegeMajor.push([this.collegeMajor, value[i]]); - this.majorLength++; - } - } - for (let i = 0; i < this.lastCollegeMajor.length; i++) { - if (!value.includes(this.lastCollegeMajor[i][1])) { - //查看该数据是都在this.majorOptions中 - if (this.majorOptions.find((item) => item.value == this.lastCollegeMajor[i][1])) { - this.lastCollegeMajor.splice(i, 1); - console.log('splice'); - this.majorLength--; - } - } - } - console.log(value, 'value'); - }, - removeTag(index) { - if (this.majorCheckOn.includes(this.lastCollegeMajor[index][1])) { - let index1 = this.majorCheckOn.indexOf(this.lastCollegeMajor[index][1]); - this.majorCheckOn.splice(index1, 1); - } - this.lastCollegeMajor.splice(index, 1); - this.majorLength--; - }, - //学院选项回调函数 - onMajorCollegeChange(value) { - let val = value.target.value; - console.log(val, 'value'); - console.log(this.collegeMajorOptions.find((item) => item.value == val).children, 'majorOptions'); - this.majorOptions = this.collegeMajorOptions.find((item) => item.value == val).children; - //将this.majorCheckOn中的数据与this.lastCollegeMajor比较，如果this.lastCollegeMajor中有this.majorCheckOn中没有的数据则删除,反之添加 - // for (let i = 0; i < this.majorCheckOn.length; i++) { - // if (!this.lastCollegeMajor.includes(this.majorCheckOn[i])) { - // this.lastCollegeMajor.push(this.majorCheckOn[i]); - // } - // } - // for (let i = 0; i < this.lastCollegeMajor.length; i++) { - // if (!this.majorCheckOn.includes(this.lastCollegeMajor[i])) { - // this.lastCollegeMajor.splice(i, 1); - // console.log("splice") - // } - // } - // this.lastCollegeMajor = this.majorCheckOn; - console.log(this.lastCollegeMajor, 'lastCollegeMajor'); - this.majorCheckOn = this.lastCollegeMajor.map((item) => item[1]); - console.log(this.majorCheckOn, 'majorCheckOn'); - }, - - clearMajor() { - this.majorCheckOn = []; - this.lastCollegeMajor = []; - this.majorLength = 0; - }, - clearCollege() { - this.collegetab2 = []; - this.collegeentrydate = []; - this.lastCollege = []; - this.lastCollegeEntrydate = []; - }, - //tab2\3图标 - drawChart(data, tab) { - let seriesData = []; - - let xData = this.majorentrydate.sort((a, b) => a - b); - if (tab == 'tab2') { - xData = this.collegeentrydate.sort((a, b) => a - b); - } - let k = 0; - let legendData = []; - let colors = [ - '#5370c5', - '#91CC75', - '#fac858', - '#ee6666', - '#73c0de', - '#FF6A6A', - '#FFA500', - '#EE2C2C', - '#90EE90', - '#008B8B', - '#FFC0CB', - '#FFDAB9', - '#FFDEAD', - '#FFE4B5', - '#FFE4C4', - '#FFE4E1', - '#FFEBCD', - '#FFEFD5', - '#FFFAF0', - '#FFFAFA', - '#FFFFE0', - '#FFFFF0', - '#FFFFFF', - '#F0F8FF', - '#FAEBD7', - '#FAF0E6', - '#FAFAD2', - '#F5FFFA', - '#F8F8FF', - '#F0FFF0', - '#F0FFFF', - '#F0E68C', - '#F0F8FF', - '#F0FFF0', - '#F0FFFF', - '#F4A460', - '#F5DEB3', - '#F5F5DC', - '#F5F5F5', - '#F5FFFA', - '#F8F8FF', - '#F9EBEA', - '#FAD7A0', - '#FAF0E6', - '#FAFAD2', - '#FAF0E6 ', - ]; - let isJK = false; - for (let i in data) { - console.log(i, 'i'); - legendData.push(i); - let yData = []; - // legendData=[]; - console.log(data[i], 'data[i]'); - - for (let j in data[i]) { - console.log(data[i][j].college, 'data[i][j].college111'); - // if(data[i][j].college == ''){ - yData.push(data[i][j].passRate); - // legendData.push(data[i][j].college); - } - console.log(yData, 'yData'); - seriesData.push({ - name: i, - type: 'bar', - //设置柱状图大小 - barWidth: 25, - data: yData, - //柱子间距 - barGap: '30%', - //颜色 - itemStyle: { - normal: { - label: { - show: true, //开启显示 - position: 'top', //在上方显示 - formatter: '{c}%', - textStyle: { - //数值样式 - color: 'black', - fontSize: 13, - }, - }, - color: colors[k++], - }, - }, - }); - } - console.log(legendData, 'legendData'); - console.log(seriesData, 'dasaaseriresdata'); - // debugger - let myChart = null; - console.log(tab, 'tab'); - if (tab == 'tab2') { - myChart = document.getElementById('map2'); - if (myChart) { - myChart = echarts.getInstanceByDom(myChart); - if (myChart) { - myChart.dispose(); - } - } - myChart = echarts.init(document.getElementById('map2')); - } else if (tab == 'tab3') { - myChart = document.getElementById('map3'); - if (myChart) { - myChart = echarts.getInstanceByDom(myChart); - if (myChart) { - myChart.dispose(); - } - } - myChart = echarts.init(document.getElementById('map3')); - } - // 指定图表的配置项和数据 - let option = { - title: { - text: '本批次学院四级通过率排名', - }, - legend: {}, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - formatter: function (params) { - //生成tooltip,加上小圆球 - let result = params[0].name + '级通过率
'; - for (let i = 0; i < params.length; i++) { - result += params[i].marker + legendData[i] + ' : ' + params[i].value + '%' + '
'; - } - return result; - }, - }, - toolbox: { - show: true, - feature: { - magicType: { show: true, type: ['line', 'bar'] }, - restore: { show: true }, - saveAsImage: { show: true }, - }, - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true, - }, - xAxis: [ - { - type: 'category', - data: xData, - axisLabel: { - interval: 0, //代表显示所有x轴标签显示 - rotate: 0, //代表倾斜0度显示 - }, - }, - ], - yAxis: [ - { - type: 'value', - name: '通过率', - axisLabel: { - formatter: '{value} %', - }, - }, - ], - series: seriesData, - }; - // 使用刚指定的配置项和数据显示图表。 - console.log(option, 'option'); - console.log(myChart, 'myChart'); - setTimeout(() => { - myChart.setOption(option); - }, 1); - }, - dataChart(data, tab) { let seriesData = []; let xData = []; @@ -664,12 +311,8 @@ export default { } } let myChart = null; - if (tab == 'tab2') { - myChart = echarts.init(document.getElementById('map2')); - } else if (tab == 'tab1') { + if (tab == 'tab1') { myChart = echarts.init(document.getElementById('map1')); - } else if (tab == 'tab3') { - myChart = echarts.init(document.getElementById('map3')); } // 指定图表的配置项和数据 // const college1 = this.college; @@ -792,9 +435,128 @@ export default { }, ]; } + myChart.setOption(option, true); // 使用刚指定的配置项和数据显示图表。 + myChart.on('click', async (params) => { + let name = params.name; + //将name的换行符去掉 + name = name.replace(/\n/g, ''); + console.log( + 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'); + let entrydate = this.entrydateOptions.map((item) => item.value); + let queryParams = { + college: [name], + entrydate: entrydate, + level: 'cet4', + }; + let url = this.Url.getCollegeRate; + console.log(queryParams, 'queryParams'); + let result = await defHttp.post({ url: url, data: queryParams }); - myChart.setOption(option); + console.log(myChart, 'mychart'); + if (!result) { + return; + } + console.log(result.data, 'result'); + result = result.data[name]; + let collegeOption = { + title: { + text: name + '四级通过率', + }, + xAxis: { + data: result.map((item) => item.entrydate), + }, + //显示数据 + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow', + }, + formatter: function (params) { + //生成tooltip,加上小圆球 + let result = params[0].name + '
'; + for (let i = 0; i < params.length; i++) { + result += params[i].marker + name + ' : ' + params[i].value + '%' + '
'; + } + return result; + }, + }, + series: { + type: 'line', + data: result.map((item) => item.passRate), + label: { + show: true, // 开启标签显示 + position: 'top', // 设置标签显示的位置为上方 + formatter: function (params) { + // 在标签文本后面添加百分号 + return params.value + '%'; + }, + // 你可以设置其他的标签样式选项，如颜色、字体大小等 + }, + universalTransition: { + // enabled: true, + // divideShape: 'clone', + }, + }, + yAxis: {}, + + animationDurationUpdate: 500, + graphic: [ + { + type: 'rect', + left: 20, + top: 40, + z: 1, // 确保矩形在文本下方 + shape: { + width: 70, // 矩形的宽度 + height: 35, // 矩形的高度 + }, + style: { + fill: 'rgba(24, 144, 255)', // 矩形的填充色 + }, + }, + { + type: 'text', + left: 38, + top: 50, + z: 2, // 确保文本在矩形上方 + style: { + text: '返 回', + fontSize: 15, + fill: 'white', // 设置文本颜色为白色 + }, + onclick: function () { + + myChart.setOption(option, true); + let spanElement = document.getElementById('span'); + + // 隐藏 span 元素 + spanElement.style.display = 'block'; + + }, + }, + ], + }; + console.log(collegeOption, 'collegeOption'); + + let spanElement = document.getElementById('span'); + + // 隐藏 span 元素 + spanElement.style.display = 'none'; + + myChart.setOption(collegeOption, true); + console.log(myChart, 'mychart'); + // this.college = [params]; + + // this.query(tab, this.college, this.entrydate); + } + }); }, // 获取批次数据 async getBatch() { @@ -846,8 +608,6 @@ export default { this.$nextTick(() => { if (query == 'tab1') { this.dataChart(result.data, query); - } else if (query == 'tab2') { - this.drawChart(result.data, query); } }); } @@ -865,7 +625,7 @@ export default {