修改四级成绩分析页面 饼图改为柱状图
This commit is contained in:
parent
c8405d3d11
commit
8670a0e655
|
|
@ -177,8 +177,25 @@
|
||||||
//生成饼图
|
//生成饼图
|
||||||
console.log(result, 'res');
|
console.log(result, 'res');
|
||||||
const resdata = [];
|
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 = [];
|
const piedata = [];
|
||||||
piedata.push({ value: result.scoreByBatch.read, name: '阅读' });
|
piedata.push({ value: result.scoreByBatch.read, name: '阅读' });
|
||||||
piedata.push({ value: result.scoreByBatch.listen, name: '听力' });
|
piedata.push({ value: result.scoreByBatch.listen, name: '听力' });
|
||||||
|
|
@ -312,18 +329,80 @@
|
||||||
drawResChart(piedata) {
|
drawResChart(piedata) {
|
||||||
console.log(this.passRatePie);
|
console.log(this.passRatePie);
|
||||||
console.log('piedata', piedata);
|
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 myChart = echarts.init(document.getElementById('resChart'));
|
||||||
let option = {
|
//let option = {
|
||||||
tooltip: {
|
// tooltip: {
|
||||||
trigger: 'item',
|
// trigger: 'item',
|
||||||
confine: false,
|
// confine: false,
|
||||||
avoidLabelOverlap: true,
|
// avoidLabelOverlap: true,
|
||||||
//字体大小
|
// //字体大小
|
||||||
itemStyle: {
|
// itemStyle: {
|
||||||
fontSize: 100,
|
// 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: {
|
title: {
|
||||||
text: '四级分数占比',
|
text: '四级分数占比',
|
||||||
left: 'left',
|
left: 'left',
|
||||||
|
|
@ -332,44 +411,37 @@
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
xAxis: {
|
||||||
top: 'center',
|
type: 'category',
|
||||||
right: '0%',
|
data: xData,
|
||||||
orient: 'vertical',
|
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: [
|
series: [
|
||||||
//外圈饼图
|
|
||||||
{
|
{
|
||||||
name: '四级通过率',
|
data: Data,
|
||||||
type: 'pie',
|
type: 'bar',
|
||||||
center: ['30%', '50%'],
|
|
||||||
radius: ['35%', '70%'],
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: 10,
|
|
||||||
borderColor: '#fff',
|
|
||||||
borderWidth: 2,
|
|
||||||
},
|
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true, // 显示标签
|
||||||
fontSize: 14,
|
position: 'top', // 标签位置在柱子的顶部
|
||||||
overflow: 'truncate',
|
formatter: '{c}%', // 使用 {c} 来显示柱子的数值，百分号可以根据需求显示
|
||||||
minMargin: -1,
|
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) {
|
drawPieChart(piedata) {
|
||||||
console.log(this.passRatePie);
|
console.log(this.passRatePie);
|
||||||
console.log('piedata', piedata);
|
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 myChart = echarts.init(document.getElementById('pieChart'));
|
||||||
let option = {
|
//let option = {
|
||||||
tooltip: {
|
// tooltip: {
|
||||||
trigger: 'item',
|
// trigger: 'item',
|
||||||
confine: false,
|
// confine: false,
|
||||||
avoidLabelOverlap: true,
|
// avoidLabelOverlap: true,
|
||||||
//字体大小
|
// //字体大小
|
||||||
itemStyle: {
|
// itemStyle: {
|
||||||
fontSize: 100,
|
// 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: {
|
title: {
|
||||||
text: '四级分数分析',
|
text: '四级分数分析',
|
||||||
left: 'left',
|
left: 'left',
|
||||||
|
|
@ -399,44 +531,33 @@
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
xAxis: {
|
||||||
top: 'center',
|
type: 'category',
|
||||||
right: '0%',
|
data: xData,
|
||||||
orient: 'vertical',
|
axisLabel: {
|
||||||
|
interval: 0, // 显示所有标签
|
||||||
|
//rotate: 10, // 标签旋转45度，减少水平占用
|
||||||
|
margin: 15, // 增加标签与轴线的间距
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
boundaryGap: true, // 保持此选项，控制类目轴起始位置
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
},
|
},
|
||||||
color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'],
|
|
||||||
|
|
||||||
series: [
|
series: [
|
||||||
//外圈饼图
|
|
||||||
{
|
{
|
||||||
name: '四级通过率',
|
data: data,
|
||||||
type: 'pie',
|
type: 'bar',
|
||||||
center: ['30%', '50%'],
|
|
||||||
radius: ['35%', '70%'],
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: 10,
|
|
||||||
borderColor: '#fff',
|
|
||||||
borderWidth: 2,
|
|
||||||
},
|
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true, // 显示标签
|
||||||
fontSize: 14,
|
position: 'top', // 标签位置在柱子的顶部
|
||||||
overflow: 'truncate',
|
fontSize: 12, // 字体大小
|
||||||
minMargin: -1,
|
color: '#000', // 字体颜色
|
||||||
},
|
},
|
||||||
emphasis: {
|
barWidth: '25%',
|
||||||
itemStyle: {
|
|
||||||
shadowBlur: 10,
|
|
||||||
shadowOffsetX: 0,
|
|
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: 15,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: piedata,
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue