From 4aef7d706d0bd77f94ed2201566f3068c6c29ebb Mon Sep 17 00:00:00 2001 From: YuNan <3194726156@qq.com> Date: Wed, 23 Oct 2024 14:00:27 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96=20?= =?UTF-8?q?=E5=92=8C=20=E6=95=B0=E6=8D=AE=E5=AF=BC=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/cet/cet-ana-2.vue | 276 +++++++++++++++++++++++----------- src/views/cet/cet-ana-3.vue | 291 +++++++++++++++++++----------------- 2 files changed, 340 insertions(+), 227 deletions(-) diff --git a/src/views/cet/cet-ana-2.vue b/src/views/cet/cet-ana-2.vue index d029a2e..2ec20df 100644 --- a/src/views/cet/cet-ana-2.vue +++ b/src/views/cet/cet-ana-2.vue @@ -209,7 +209,7 @@ } console.log(result.data, 'result'); - let titleText = major ? `${college} / ${major}专业 最新批次通过人数饼图` : `${college} 最新批次通过人数饼图`; + let titleText = major ? `${college} / ${major}专业 最新批次通过人数` : `${college} 最新批次通过人数`; // 使用 API 返回的数据填充饼图 let chartData = []; @@ -221,109 +221,57 @@ }); } console.log(chartData, '123'); + let xData = chartData.map((item) => item.name); // 提取类别数据 + let yData = chartData.map((item) => item.value); // 提取值数据 let option = { - tooltip: { - trigger: 'item', - //conginee: false, - //字体大小 - itemStytle: { - // 设置阴影效果 - shadowBlur: 10, // 阴影模糊大小 - shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色 - shadowOffsetX: 5, // 阴影水平方向偏移 - shadowOffsetY: 5, // 阴影垂直方向偏移 - fontSize: 100, - }, + grid: { + left: '20%', // 增加左边距，可以根据需要调整 + right: '5%', // 右边距 + top: '10%', // 上边距 + bottom: '10%', // 下边距 }, title: { - text: '最新批次每一年级的通过率饼图', + text: '最新批次每一年级的通过率', left: 'top', top: '0%', textStyle: { fontSize: 12, }, }, - legend: { - top: '15%', - left: 'center', - // orient: 'vertical', - itemGap: 3, - selectedMode: true, - // inactiveColor: '#ccc', - // icon: 'circle', - - // formatter: function (name) { - // var value; - // for (var i = 0; i < data.length; i++){ - // if(data[i].name == name){ - // value = data[i].value; - // } - // } - // return name + ' : ' + Math.round(value / num * 10000) / 100 + "%"; - // }, + tooltip: { + trigger: 'item', + }, + xAxis: { + type: 'category', + data: xData, + //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + }, + yAxis: { + type: 'value', + axisLabel: { + formatter: '{value}%', + }, }, - color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'], series: [ { name: titleText, - type: 'pie', - radius: ['50%', '100%'], - center: ['50%', '50%'], - startAngle: 130, - top: 80, - //暂时没有 + data: yData, + //data: [150, 230, 224, 218, 135, 147, 260], + type: 'line', itemStyle: { - // borderRadius: 5, - // borderColor: '#fff', - borderWidth: 2, - }, - label: { - show: true, - // position: 'inside', - fontSize: 12, - overflow: 'truncate', - }, - labelLine: { - show: true, - smooth: true, - length: 10, - }, - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)', - }, - label: { - show: true, - fontSize: 15, - fontWeight: 'bold', + normal: { + label: { + show: true, //开启显示 + position: 'top', //在上方显示 + textStyle: { + //数值样式 + color: 'black', + fontSize: 12, + }, + formatter: '{c}%', + }, }, }, - data: chartData, - }, - { - type: 'pie', - startAngle: 130, - top: 80, - radius: ['40%', '51%'], - center: ['50%', '50%'], - //暂时没有 - itemStyle: { - // borderRadius: 3, - // borderColor: '#fff', - borderWidth: 2, - }, - label: { - show: false, - }, - hoverAnimation: false, - legendHoverLink: false, - // animationn：false, - tooltip: { - show: false, - }, - data: chartData, }, ], }; @@ -337,6 +285,158 @@ }); }, + ////绘画饼图--最新批次每一年级的通过率饼图 + //async draPieChart_Participate() { + // console.log(this.collegeMajor, 'collegeMajor'); + // let college = this.collegeMajor[0]; + // let major = this.collegeMajor[1]; + // console.log(college, major, 'college major'); + + // let myChart = echarts.init(document.getElementById('participate_Piechart')); + + // let queryParams = { + // college: college, + // major: major, + // level: 'cet4', + // }; + // let url = this.Url.getRateByMajorAndLastestBatch; + // console.log(queryParams, 'queryParams'); + + // let result = await defHttp.post({ url: url, data: queryParams }); + + // if (!result) { + // return; + // } + // console.log(result.data, 'result'); + + // let titleText = major ? `${college} / ${major}专业 最新批次通过人数饼图` : `${college} 最新批次通过人数饼图`; + + // // 使用 API 返回的数据填充饼图 + // let chartData = []; + + // for (let key in result.data) { + // chartData.push({ + // name: key + '级', + // value: result.data[key].passRate, + // }); + // } + // console.log(chartData, '123'); + // let option = { + // tooltip: { + // trigger: 'item', + // //conginee: false, + // //字体大小 + // itemStytle: { + // // 设置阴影效果 + // shadowBlur: 10, // 阴影模糊大小 + // shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色 + // shadowOffsetX: 5, // 阴影水平方向偏移 + // shadowOffsetY: 5, // 阴影垂直方向偏移 + // fontSize: 100, + // }, + // }, + // title: { + // text: '最新批次每一年级的通过率饼图', + // left: 'top', + // top: '0%', + // textStyle: { + // fontSize: 12, + // }, + // }, + // legend: { + // top: '15%', + // left: 'center', + // // orient: 'vertical', + // itemGap: 3, + // selectedMode: true, + // // inactiveColor: '#ccc', + // // icon: 'circle', + + // // formatter: function (name) { + // // var value; + // // for (var i = 0; i < data.length; i++){ + // // if(data[i].name == name){ + // // value = data[i].value; + // // } + // // } + // // return name + ' : ' + Math.round(value / num * 10000) / 100 + "%"; + // // }, + // }, + // color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'], + // series: [ + // { + // name: titleText, + // type: 'pie', + // radius: ['50%', '100%'], + // center: ['50%', '50%'], + // startAngle: 130, + // top: 80, + // //暂时没有 + // itemStyle: { + // // borderRadius: 5, + // // borderColor: '#fff', + // borderWidth: 2, + // }, + // label: { + // show: true, + // // position: 'inside', + // fontSize: 12, + // overflow: 'truncate', + // }, + // labelLine: { + // show: true, + // smooth: true, + // length: 10, + // }, + // emphasis: { + // itemStyle: { + // shadowBlur: 10, + // shadowOffsetX: 0, + // shadowColor: 'rgba(0, 0, 0, 0.5)', + // }, + // label: { + // show: true, + // fontSize: 15, + // fontWeight: 'bold', + // }, + // }, + // data: chartData, + // }, + // { + // type: 'pie', + // startAngle: 130, + // top: 80, + // radius: ['40%', '51%'], + // center: ['50%', '50%'], + // //暂时没有 + // itemStyle: { + // // borderRadius: 3, + // // borderColor: '#fff', + // borderWidth: 2, + // }, + // label: { + // show: false, + // }, + // hoverAnimation: false, + // legendHoverLink: false, + // // animationn：false, + // tooltip: { + // show: false, + // }, + // data: chartData, + // }, + // ], + // }; + // myChart.setOption(option); + // myChart.dispatchAction({ + // type: 'highlight', + // seriesIndex: 1, + // }); + // window.addEventListener('resize', function () { + // myChart.resize(); + // }); + //}, + //绘画饼图--学院/专业每个年级的通过率柱状图 async draPieChart_Pass() { //console.log(this.passRatePie); diff --git a/src/views/cet/cet-ana-3.vue b/src/views/cet/cet-ana-3.vue index 50648a5..3ffcaa3 100644 --- a/src/views/cet/cet-ana-3.vue +++ b/src/views/cet/cet-ana-3.vue @@ -23,17 +23,6 @@ -
@@ -44,42 +33,60 @@
- -
+ + +
+ +
- -