概要
echarts 绘制四象限图
技术名词解释
四象限图在统计学往往使用的频率较高,尤其是多次数据对比的时候,而echarts官方也找到直接可用的案例,只能自己通过散点图实现,接下来分享给大家,仅供参考
效果图如下
body {
font-family: "Microsoft YaHei", sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f7fa;
}
.container {
max-width: 900px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 20px;
}
#main5 {
width: 100%;
height: 500px;
}
.title {
text-align: center;
color: #333;
margin-bottom: 15px;
}
.description {
text-align: center;
color: #666;
font-size: 14px;
margin-bottom: 25px;
}
学业稳定性诊断分析图
分析对象:XX班级 | 数据来源:2023年期末考试
document.addEventListener('DOMContentLoaded', function() {
var myChart = echarts.init(document.getElementById('main5'));
// 模拟数据
var data = [
{name: '张三', value: [34.31, 67.62]},
{name: '李四', value: [75.42, 82.13]},
{name: '王五', value: [45.67, 42.31]},
{name: '赵六', value: [85.24, 62.78]},
{name: '孙七', value: [35.89, 75.43]},
{name: '周八', value: [65.37, 45.92]},
{name: '吴九', value: [55.61, 55.49]},
{name: '郑十', value: [72.35, 78.64]}
];
// 计算平均值
var xSum = 0, ySum = 0;
data.forEach(function(item) {
xSum += item.value[0];
ySum += item.value[1];
});
var xMean = xSum / data.length;
var yMean = ySum / data.length;
var option5 = {
title: [
{
text: '学业稳定性诊断分析图',
left: 'center',
textStyle: {
fontSize: 18,
fontWeight: 'bold',
color: '#333'
},
},
{
text: '高位稳定区',
textStyle: {
fontSize: 14,
color: '#ff6b6b'
},
left: '85%',
top: '10%'
},
{
text: '进步显著区',
textStyle: {
fontSize: 14,
color: '#1dd1a1'
},
left: '85%',
top: '85%'
},
{
text: '低位稳定区',
textStyle: {
fontSize: 14,
color: '#feca57'
},
left: '5%',
top: '85%'
},
{
text: '下滑明显区',
textStyle: {
fontSize: 14,
color: '#54a0ff'
},
left: '5%',
top: '10%'
}
],
grid: {
top: '15%',
left: '10%',
right: '10%',
bottom: '10%',
containLabel: true
},
tooltip: {
trigger: 'item',
formatter: function(params) {
return params.data.name +
'
上次成绩: ' + params.data.value[0].toFixed(2) +
'
本次成绩: ' + params.data.value[1].toFixed(2);
}
},
xAxis: {
name: '上次成绩',
nameLocation: 'end',
nameGap: 10,
nameTextStyle: {
fontSize: 12,
padding: [0, 0, 0, 10]
},
min: 0,
max: 100,
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#ddd'
}
}
},
yAxis: {
name: '本次成绩',
nameLocation: 'end',
nameGap: 15,
nameTextStyle: {
fontSize: 12,
padding: [0, 0, 5, 0]
},
min: 0,
max: 100,
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#ddd'
}
}
},
series: [
{
name: '参考线',
type: 'scatter',
data: [[xMean, yMean]],
markLine: {
symbol: 'none',
lineStyle: {
type: 'solid',
color: '#c23531',
width: 2
},
data: [
{
xAxis: xMean,
lineStyle: {
type: 'solid',
color: '#c23531',
width: 1.5
}
},
{
yAxis: yMean,
lineStyle: {
type: 'solid',
color: '#c23531',
width: 1.5
}
}
]
}
},
{
name: '学生成绩',
type: 'scatter',
symbolSize: function(data) {
// 根据离平均值的距离调整点的大小
var dx = Math.abs(data[0] - xMean);
var dy = Math.abs(data[1] - yMean);
return Math.sqrt(dx * dx + dy * dy) / 2 + 8;
},
itemStyle: {
color: function(params) {
var x = params.data[0];
var y = params.data[1];
if (x >= xMean && y >= yMean) {
return '#ff6b6b'; // 高位稳定区 - 红色
} else if (x >= xMean && y < yMean) {
return '#54a0ff'; // 下滑明显区 - 蓝色
} else if (x < xMean && y >= yMean) {
return '#1dd1a1'; // 进步显著区 - 绿色
} else {
return '#feca57'; // 低位稳定区 - 黄色
}
},
borderColor: '#fff',
borderWidth: 1,
shadowBlur: 5,
shadowColor: 'rgba(0, 0, 0, 0.2)'
},
label: {
show: true,
formatter: function(params) {
return data[params.dataIndex].name;
},
position: 'top',
fontSize: 11,
color: '#333'
},
emphasis: {
label: {
show: true,
fontSize: 12,
fontWeight: 'bold'
},
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: data.map(function(item) {
return item.value;
})
}
],
animation: true,
animationDuration: 1500,
animationEasing: 'cubicOut'
};
myChart.setOption(option5);
// 响应窗口调整大小
window.addEventListener('resize', function() {
myChart.resize();
});
});