diff --git a/src/views/cet/cet-ana-1.vue b/src/views/cet/cet-ana-1.vue index 6355ae4..010ba23 100644 --- a/src/views/cet/cet-ana-1.vue +++ b/src/views/cet/cet-ana-1.vue @@ -10,7 +10,7 @@
-
+
@@ -44,13 +44,19 @@ export default { }; }, methods: { - dataChart() { - // 基于准备好的dom,初始化echarts实例 这个和上面的main对应 + dataChart(data) { + let xData = []; + let yData = []; + for (let key in data) { + xData.push(key); + // 将数据转换为百分比(加上%) + yData.push((data[key] * 100).toFixed(2)); + } let myChart = echarts.init(document.getElementById("map1")); // 指定图表的配置项和数据 let option = { title: { - text: "总上座人数对比", + text: "本批次学院通过率排名", }, tooltip: { trigger: 'axis', @@ -58,37 +64,34 @@ export default { type: 'shadow' } }, - legend: { - data: ["英国", "中国"],//上方的标签 + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true }, - xAxis: { - data: ["一级", "二级", "三级", "四级"], - axisLabel: { - interval: 0, - // rotate: 30 + xAxis: [ + { + type: 'category', + data: xData, + axisTick: { + alignWithLabel: true + } } - }, - yAxis: { - name: '总上座人数(万)', - }, + ], + yAxis: [ + { + type: 'value' + } + ], series: [ { - name: "英国", - type: "bar", - data: [1450, 1100, 450, 300], - label: { - formatter: '{@value}' - } - }, - { - name: "中国", - type: "bar", - data: [552, 180, 200, 0], - label: { - formatter: '{@value}' - } - }, - ], + name: 'Direct', + type: 'bar', + barWidth: '60%', + data: yData + } + ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); @@ -96,33 +99,31 @@ export default { // 获取批次数据 async getBatch() { const getBatch = await defHttp.get({ url: this.Url.getBatch }); - this.batchOptions = getBatch.batches; this.batch = this.batchOptions[0].value; this.level = this.levelOptions[0].value; - this.query(); }, // 查询数据 async query() { + let data = null; try { this.loading = true; let params = { batch: this.batch, level: 'cet4' } - const data = await defHttp.get({ url: this.Url.getRate, params }); + data = await defHttp.get({ url: this.Url.getRate, params }); } finally { this.loading = false; this.$nextTick(() => { - this.dataChart(); + this.dataChart(data); }) } } }, mounted() { this.getBatch(); - this.dataChart(); } } diff --git a/src/views/cet/cet-ana-2.vue b/src/views/cet/cet-ana-2.vue index 08b15d6..0a7b13f 100644 --- a/src/views/cet/cet-ana-2.vue +++ b/src/views/cet/cet-ana-2.vue @@ -3,15 +3,13 @@
-
+
@@ -46,13 +44,23 @@ export default { }; }, methods: { - dataChart() { - // 基于准备好的dom,初始化echarts实例 这个和上面的main对应 + dataChart(data) { + let xData = []; + let yData = []; + for (let key in data) { + xData.push(key); + // 将数据转换为百分比(加上%) + yData.push((data[key] * 100).toFixed(2)); + } let myChart = echarts.init(document.getElementById("map1")); // 指定图表的配置项和数据 let option = { title: { - text: "总上座人数对比", + text: "学院通过率变化", + }, + xAxis: { + type: 'category', + data: xData, }, tooltip: { trigger: 'axis', @@ -60,37 +68,15 @@ export default { type: 'shadow' } }, - legend: { - data: ["英国", "中国"],//上方的标签 - }, - xAxis: { - data: ["一级", "二级", "三级", "四级"], - axisLabel: { - interval: 0, - // rotate: 30 - } - }, yAxis: { - name: '总上座人数(万)', + type: 'value' }, series: [ { - name: "英国", - type: "bar", - data: [1450, 1100, 450, 300], - label: { - formatter: '{@value}' - } - }, - { - name: "中国", - type: "bar", - data: [552, 180, 200, 0], - label: { - formatter: '{@value}' - } - }, - ], + data: yData, + type: 'line' + } + ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); @@ -109,24 +95,24 @@ export default { }, // 查询数据 async query() { + let data = null; try { this.loading = true; let params = { college: this.college, level: 'cet4' } - const data = await defHttp.get({ url: this.Url.getRate, params }); + data = await defHttp.get({ url: this.Url.getRate, params }); } finally { this.loading = false; this.$nextTick(() => { - this.dataChart(); + this.dataChart(data); }) } } }, mounted() { this.getBatch(); - this.dataChart(); } }