From 8670a0e655354d0e6f8a422074d054eed50636a3 Mon Sep 17 00:00:00 2001 From: Qi <3194726156@qq.com> Date: Thu, 10 Apr 2025 20:27:41 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=9B=E7=BA=A7=E6=88=90?= =?UTF-8?q?=E7=BB=A9=E5=88=86=E6=9E=90=E9=A1=B5=E9=9D=A2=20=E9=A5=BC?= =?UTF-8?q?=E5=9B=BE=E6=94=B9=E4=B8=BA=E6=9F=B1=E7=8A=B6=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/cet/analyze.vue | 297 +++++++++++++++++++++++++++----------- 1 file changed, 209 insertions(+), 88 deletions(-) diff --git a/src/views/cet/analyze.vue b/src/views/cet/analyze.vue index 235758c..af4f801 100644 --- a/src/views/cet/analyze.vue +++ b/src/views/cet/analyze.vue @@ -177,8 +177,25 @@ //生成饼图 console.log(result, 'res'); const resdata = []; - resdata.push({ value: result.rateByBatch.rate, name: '400-425人数占比' }); - resdata.push({ value: 100 - result.rateByBatch.rate, name: '其他分数占比' }); + // 遍历后端返回的数据 + for (const [range, rate] of Object.entries(result.rateByBatch)) { + // 将数据转换为图表需要的格式 + resdata.push({ + value: parseFloat(rate), // 将比率转换为数字类型 + name: `${range}分人数占比`, + }); + } + // 对数组按区间进行排序（先提取区间的起始值进行排序） + resdata.sort((a, b) => { + const aMin = parseInt(a.name.split('-')[0]); // 获取起始分数 + const bMin = parseInt(b.name.split('-')[0]); // 获取起始分数 + return aMin - bMin; // 按起始分数升序排序 + }); + console.log(resdata, 'resdata'); + //独立修改第一个数据 + resdata[0].name = '400分以下人数占比'; + //独立修改最后一个数据 + resdata[4].name = '475分以上人数占比'; const piedata = []; piedata.push({ value: result.scoreByBatch.read, name: '阅读' }); piedata.push({ value: result.scoreByBatch.listen, name: '听力' }); @@ -312,18 +329,80 @@ drawResChart(piedata) { console.log(this.passRatePie); console.log('piedata', piedata); + let xData = piedata.map((item) => item.name); + let Data = piedata.map((item) => item.value); + console.log('xData', xData); + console.log('Data', Data); let myChart = echarts.init(document.getElementById('resChart')); - let option = { - tooltip: { - trigger: 'item', - confine: false, - avoidLabelOverlap: true, - //字体大小 - itemStyle: { - fontSize: 100, - }, - }, + //let option = { + // tooltip: { + // trigger: 'item', + // confine: false, + // avoidLabelOverlap: true, + // //字体大小 + // itemStyle: { + // fontSize: 100, + // }, + // }, + // title: { + // text: '四级分数占比', + // left: 'left', + // top: '0%', + // textStyle: { + // fontSize: 16, + // }, + // }, + // legend: { + // top: 'center', + // right: '0%', + // orient: 'vertical', + // }, + // color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'], + + // series: [ + // //外圈饼图 + // { + // name: '四级通过率', + // type: 'pie', + // center: ['30%', '50%'], + // radius: ['35%', '70%'], + // itemStyle: { + // borderRadius: 10, + // borderColor: '#fff', + // borderWidth: 2, + // }, + // label: { + // show: true, + // fontSize: 14, + // overflow: 'truncate', + // minMargin: -1, + // }, + // emphasis: { + // itemStyle: { + // shadowBlur: 10, + // shadowOffsetX: 0, + // shadowColor: 'rgba(0, 0, 0, 0.5)', + // }, + // label: { + // show: true, + // fontSize: 15, + // fontWeight: 'bold', + // }, + // }, + // data: piedata, + // }, + // ], + //}; + let option = { + grid: { + left: '10%', // 增加左侧边距 + right: '10%', // 增加右侧边距 + bottom: '30%', // 增加底部边距，为 X 轴标签留出更多空间 + }, + tooltip: { + trigger: 'axis', + }, title: { text: '四级分数占比', left: 'left', @@ -332,44 +411,37 @@ fontSize: 16, }, }, - legend: { - top: 'center', - right: '0%', - orient: 'vertical', + xAxis: { + type: 'category', + data: xData, + axisLabel: { + interval: 0, // 显示所有标签 + //rotate: 10, // 标签旋转45度，减少水平占用 + margin: 15, // 增加标签与轴线的间距 + formatter: function (value) { + // 在 '分' 字符后插入换行符 + return value.replace(/分/g, '分\n'); + }, + }, + axisLine: { + show: true, + }, + boundaryGap: true, // 保持此选项，控制类目轴起始位置 + }, + yAxis: { + type: 'value', }, - color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'], - series: [ - //外圈饼图 { - name: '四级通过率', - type: 'pie', - center: ['30%', '50%'], - radius: ['35%', '70%'], - itemStyle: { - borderRadius: 10, - borderColor: '#fff', - borderWidth: 2, - }, + data: Data, + type: 'bar', label: { - show: true, - fontSize: 14, - overflow: 'truncate', - minMargin: -1, + show: true, // 显示标签 + position: 'top', // 标签位置在柱子的顶部 + formatter: '{c}%', // 使用 {c} 来显示柱子的数值，百分号可以根据需求显示 + fontSize: 12, // 字体大小 + color: '#000', // 字体颜色 }, - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)', - }, - label: { - show: true, - fontSize: 15, - fontWeight: 'bold', - }, - }, - data: piedata, }, ], }; @@ -379,18 +451,78 @@ drawPieChart(piedata) { console.log(this.passRatePie); console.log('piedata', piedata); + let xData = piedata.map((item) => item.name); + let data = piedata.map((item) => item.value); let myChart = echarts.init(document.getElementById('pieChart')); - let option = { - tooltip: { - trigger: 'item', - confine: false, - avoidLabelOverlap: true, - //字体大小 - itemStyle: { - fontSize: 100, - }, - }, + //let option = { + // tooltip: { + // trigger: 'item', + // confine: false, + // avoidLabelOverlap: true, + // //字体大小 + // itemStyle: { + // fontSize: 100, + // }, + // }, + // title: { + // text: '四级分数分析', + // left: 'left', + // top: '0%', + // textStyle: { + // fontSize: 16, + // }, + // }, + // legend: { + // top: 'center', + // right: '0%', + // orient: 'vertical', + // }, + // color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'], + + // series: [ + // //外圈饼图 + // { + // name: '四级通过率', + // type: 'pie', + // center: ['30%', '50%'], + // radius: ['35%', '70%'], + // itemStyle: { + // borderRadius: 10, + // borderColor: '#fff', + // borderWidth: 2, + // }, + // label: { + // show: true, + // fontSize: 14, + // overflow: 'truncate', + // minMargin: -1, + // }, + // emphasis: { + // itemStyle: { + // shadowBlur: 10, + // shadowOffsetX: 0, + // shadowColor: 'rgba(0, 0, 0, 0.5)', + // }, + // label: { + // show: true, + // fontSize: 15, + // fontWeight: 'bold', + // }, + // }, + // data: piedata, + // }, + // ], + //}; + let option = { + grid: { + left: '10%', // 增加左侧边距 + right: '10%', // 增加右侧边距 + bottom: '30%', // 增加底部边距，为 X 轴标签留出更多空间 + }, + tooltip: { + trigger: 'axis', + }, title: { text: '四级分数分析', left: 'left', @@ -399,44 +531,33 @@ fontSize: 16, }, }, - legend: { - top: 'center', - right: '0%', - orient: 'vertical', + xAxis: { + type: 'category', + data: xData, + axisLabel: { + interval: 0, // 显示所有标签 + //rotate: 10, // 标签旋转45度，减少水平占用 + margin: 15, // 增加标签与轴线的间距 + }, + axisLine: { + show: true, + }, + boundaryGap: true, // 保持此选项，控制类目轴起始位置 + }, + yAxis: { + type: 'value', }, - color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'], - series: [ - //外圈饼图 { - name: '四级通过率', - type: 'pie', - center: ['30%', '50%'], - radius: ['35%', '70%'], - itemStyle: { - borderRadius: 10, - borderColor: '#fff', - borderWidth: 2, - }, + data: data, + type: 'bar', label: { - show: true, - fontSize: 14, - overflow: 'truncate', - minMargin: -1, + show: true, // 显示标签 + position: 'top', // 标签位置在柱子的顶部 + fontSize: 12, // 字体大小 + color: '#000', // 字体颜色 }, - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)', - }, - label: { - show: true, - fontSize: 15, - fontWeight: 'bold', - }, - }, - data: piedata, + barWidth: '25%', }, ], };