修改四级成绩分析页面 饼图改为柱状图
This commit is contained in:
parent
c8405d3d11
commit
8670a0e655
|
|
@ -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%',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue