代码拉取完成，页面将自动刷新
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>数据分析维度统计</title>
<link rel="stylesheet" href="css/app.css" />
<script src="js/echarts.min.js"></script>
</head>
<body class="biao1">
<div class="header">
<h1 class="header-title" style="color: #FFFFFF;">数据分析维度统计</h1>
</div>
<div class="wrapper">
<div class="content">
<div class="col col-l">
<div class="xpanel-wrapper xpanel-wrapper-40">
<div class="xpanel xpanel-l-t Bj">
<div class="title">学生类别（人数）指标</div>
<div class="xslb" id="xslb" style="width: 100%;height: 90%;"></div>
</div>
</div>
<div class="xpanel-wrapper xpanel-wrapper-60">
<div class="xpanel xpanel-l-b Bj">
<div class="title">年度学生的就读方式分析</div>
<div class="tu" id="tu1" style="width: 100%;height: 90%;"></div>
</div>
</div>
</div>
<div class="col col-c">
<div class="xpanel-wrapper xpanel-wrapper-100">
<div class="xpanel xpanel-c-b Bj">
<div class="title">学生居住地区的入学方式</div>
<div class="tu" id="tu" style="width: 100%;height: 90%;"></div>
</div>
</div>
</div>
<div class="col col-r">
<div class="xpanel-wrapper xpanel-wrapper-40">
<div class="xpanel xpanel-r-t Bj">
<div class="title">班级人数分析</div>
<div class="xslb" id="tu7" style="width: 100%;height: 90%;"></div>
</div>
</div>
<div class="xpanel-wrapper xpanel-wrapper-60">
<div class="xpanel xpanel-r-m Bj">
<div class="title">专业人数分析</div>
<div class="tu" id="tu6" style="width: 100%;height: 90%;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var myxslb = echarts.init(document.getElementById('xslb'));
var mytu3 = echarts.init(document.getElementById('tu'));
var mytu4 = echarts.init(document.getElementById('tu1'));
var mytu6 = echarts.init(document.getElementById('tu6'));
var mytu7 = echarts.init(document.getElementById('tu7'));
//学生类别（人数）指标
var option1 = {
// backgroundColor: "#05224d",
tooltip: {},
grid: {
top: '8%',
left: '4%',
right: '4%',
bottom: '4%',
containLabel: true,
},
// legend: {
// itemGap: 50,
// data: ['社团人数'],
// textStyle: {
// color: '#f9f9f9',
// borderColor: '#fff'
// },
// },
xAxis: [{
type: 'category',
boundaryGap: true,
axisLine: { //坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: '#0a3256',
fontSize: 12,
},
},
axisLabel: { //坐标轴刻度标签的相关设置
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
// rotate: 45,
textStyle: {
color: '#d1e6eb',
margin: 15,
fontSize: 12,
},
},
axisTick: {
show: false,
},
data: ['调整后中职学生', '职业高中学生', '普通中专学生', '成人中专学生', '技工学校学生', '其他'],
}],
yAxis: [{
type: 'value',
min: 0,
// max: 140,
splitNumber: 7,
splitLine: {
show: true,
lineStyle: {
color: '#0a3256'
}
},
axisLine: {
show: false,
},
axisLabel: {
margin: 20,
textStyle: {
color: '#d1e6eb',
},
},
axisTick: {
show: false,
},
}],
series: [{
// name: '社团人数',
type: 'bar',
barWidth: 16,
tooltip: {
show: false
},
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
},
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#41E1D4' // 0% 处的颜色
}, {
offset: 1,
color: '#10A7DB' // 100% 处的颜色
}], false),
barBorderRadius: [30, 30, 0, 0],
shadowBlur: 4,
}
},
data: [200, 382, 102, 267, 186, 315, 316]
}]
};
//学生居住地区的入学方式
var option3 = {
// backgroundColor: "#05224d",
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '14%',
left: '4%',
right: '4%',
bottom: '4%',
containLabel: true, //防止溢出
},
legend: {
itemGap: 50,
data: ['其他', '县城', '乡镇非农', '城市', '农村'],
textStyle: {
color: '#f9f9f9',
borderColor: '#fff'
},
},
xAxis: [{
type: 'category',
boundaryGap: true,
axisLine: { //坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: '#f9f9f9'
},
},
axisLabel: { //坐标轴刻度标签的相关设置
color: '#fff',
interval: 0, //强制显示文字
textStyle: {
color: '#d1e6eb',
margin: 15,
},
},
axisTick: {
show: false,
},
data: ['其他', '统一招生考试/普通入学', '保送', '民族班', '定向培养', '体育特招', '文艺特招', '学生干部保送', '考试推荐', '外校转入', '恢复入学资格'],
}],
yAxis: [{
type: 'value',
min: 0,
// max: 140,
splitNumber: 7,
splitLine: {
show: true,
lineStyle: {
color: '#0a3256'
}
},
axisLine: {
show: false,
},
axisLabel: {
margin: 20,
textStyle: {
color: '#d1e6eb',
},
},
axisTick: {
show: false,
},
}],
series: [{
name: '其他',
type: 'line',
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: "#28ffb3", // 线条颜色
},
borderColor: '#f0f'
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
}
},
itemStyle: {
normal: {
color: "#28ffb3",
}
},
tooltip: {
// show: false
},
areaStyle: { //区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,154,120,1)'
}, {
offset: 1,
color: 'rgba(0,0,0, 0)'
}], false),
shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}
},
data: [9, 13, 14, 16, 15, 14, 17, 11, 13, 11, 13]
}, {
name: '县城',
type: 'line',
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: "#28ffb3", // 线条颜色
},
borderColor: '#f0f'
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
}
},
itemStyle: {
normal: {
color: "#28ffb3",
}
},
tooltip: {
show: false
},
areaStyle: { //区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,154,120,1)'
}, {
offset: 1,
color: 'rgba(0,0,0, 0)'
}], false),
shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}
},
data: [6, 7, 8, 9, 11, 8, 7, 6, 9, 4, 7]
}, {
name: '乡镇非农',
type: 'bar',
barWidth: 15,
tooltip: {
show: false
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(249,251,4,1)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(9,227,221,1)' // 100% 处的颜色
}], false),
barBorderRadius: [30, 30, 30, 30],
shadowBlur: 4,
}
},
data: [1, 2, 2, 7, 9, 5, 6, 7, 8, 5, 6]
}, {
name: '城市',
type: 'bar',
barWidth: 15,
tooltip: {
show: false
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#41E1D4' // 0% 处的颜色
}, {
offset: 1,
color: '#10A7DB' // 100% 处的颜色
}], false),
barBorderRadius: [30, 30, 0, 0],
shadowBlur: 4,
}
},
data: [2, 3, 1, 4, 5, 6, 1, 1, 6, 9, 8]
}, {
name: '农村',
type: 'bar',
barWidth: 15,
tooltip: {
show: false
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,244,255,1)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(0,77,167,1)' // 100% 处的颜色
}], false),
barBorderRadius: [30, 30, 30, 30],
shadowBlur: 4,
}
},
data: [2, 1, 4, 5, 6, 5, 4, 7, 6, 5, 6]
}]
};
//年度学生就读方式分析
var option4 = {
tooltip: {},
legend: {
bottom: '1%',
itemWidth: 12,
itemHeight: 12,
data: ['走读', '住校'],
textStyle: {
color: '#fff'
}
},
grid: {
left: '1%',
right: '1%',
top: '1%',
bottom: '1%',
containLabel: true
},
radar: {
radius: '60%',
splitNumber: 8,
axisLine: {
lineStyle: {
color: '#fff',
opacity: .1
}
},
splitLine: {
lineStyle: {
color: '#fff',
opacity: .1
}
},
splitArea: {
areaStyle: {
color: 'rgba(255,255,255,.1)',
opacity: 1,
shadowBlur: 45,
shadowColor: 'rgba(0,0,0,.5)',
shadowOffsetX: 0,
shadowOffsetY: 15,
}
},
indicator: [{
name: '1978',
max: 60
}, {
name: '1997',
max: 160
}, {
name: '1998',
max: 300
}, {
name: '1999',
max: 350
}, {
name: '2000',
max: 500
}, {
name: '2001',
max: 250
}, {
name: '2002',
max: 350
}, {
name: '2003',
max: 500
}, {
name: '2004',
max: 250,
}, {
name: '2005',
max: 250
}, {
name: '2006',
max: 350
}, {
name: '2007',
max: 500
}, {
name: '2011',
max: 250
}]
},
series: [{
name: '走读 vs 住校',
type: 'radar',
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: 'rgba(0,0,0,0.1)',
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1
}
},
data: [{
value: [40, 70, 72, 71, 75, 74, 91, 85, 83, 86, 81, 75, 84],
name: '住校',
}, {
value: [35, 80, 60, 85, 70, 70, 60, 80, 80, 86, 71, 60, 70],
name: '走读',
}]
}],
color: [
new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#4c66ff'
}, {
offset: 1,
color: '#5485e2'
}], false),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#3ec2ff'
}, {
offset: 1,
color: '#4172ff'
}], false)
],
};
//专业人数分析
var option6 = {
"color": ["#8d7fec", "#6851f1", "#248ff7", "#2eddcd", "#8bd46e", "#fccb05", "#f7734e"],
grid: {
left: 50,
right: '3%',
bottom: 100,
},
"xAxis": [{
// "name": "时段",
"type": "category",
"axisTick": {
"alignWithLabel": true
},
axisLine: { //坐标轴轴线相关设置
lineStyle: {
color: '#0a3256',
opacity: 0.2
}
},
axisLabel: { //坐标轴刻度标签的相关设置。
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
margin: 15,
rotate: 45,
textStyle: {
color: '#aaa',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
data: ['电子商务', '航空服务', '护理', '会计', '酒店大专', '旅游服务与管理', '美发与形象设计', '数字影像技术', '学前(3+4)', '学前教育（五年制）', '学前教育（教育方向）', '学前教育(大专3+2)', '学前教育（保育方向）', '珠宝玉石加工与营销']
}],
yAxis: [{
type: 'value',
min: 0,
// max: 140,
splitNumber: 7,
splitLine: {
show: true,
lineStyle: {
color: '#0a3256'
}
},
axisLine: {
show: false,
},
axisLabel: {
margin: 20,
textStyle: {
color: '#d1e6eb',
},
},
axisTick: {
show: false,
},
}],
"series": [{
"data": [0, 105, 123, 145, 106, 115, 102, 135, 117, 125, 116, 96, 96, 96],
"stack": "one",
"type": "bar",
barWidth: 24,
label: {
normal: {
show: true
},
}
}, {
"data": [0, 115, 107, 105, 156, 115, 122, 125, 117, 145, 126, 96, 96, 96],
"stack": "one",
"type": "bar",
label: {
normal: {
show: true
},
}
}, {
"data": [0, 145, 120, 105, 106, 105, 102, 125, 107, 105, 106, 96, 96, 96],
"stack": "one",
"type": "bar",
label: {
normal: {
show: true
},
}
}, {
"data": [0, 123, 105, 107, 105, 126, 145, 162, 165, 127, 105, 126, 96, 96],
"stack": "one",
"type": "bar",
label: {
normal: {
show: true
},
}
}, {
"data": [0, 142, 120, 50, 20, 50, 70, 50, 60, 50, 96, 96],
"stack": "one",
"type": "bar",
label: {
normal: {
show: true
},
}
}, {
"data": [45, 155, 162, 164, 57, 60, 50, 60, 45, 37, 45, 96],
"stack": "one",
"type": "bar",
label: {
normal: {
show: true
},
}
}, {
"data": [20, 114, 112, 139, 47, 55, 47, 46, 45, 96, 96, 96],
"stack": "one",
"type": "bar",
label: {
normal: {
show: true
},
}
}]
}
var colorList = ['#74FFFB', '#FFA881', '#469AF0', '#8D82F3', '#83A6FE', '#1EBABC', '#82E3A2', '#F5BE5C']
var colorList2 = ['#73fbf7', '#0090ba', '#0084e9', '#0841bc', '#5e62ff', '#a48bff', '#5ebbef']
//班级人数分析
var option7 = {
// backgroundColor:"#090e36",
title: {
text: '',
subtext: '',
left: 'center',
textStyle: {
color: '#fff',
fontSize: 18
}
},
grid: {
top: '20%',
left: '1%',
right: '1%',
bottom: '20%',
containLabel: true,
},
legend: {
show: true,
top: '54%',
left: '0',
textStyle: {
color: '#fff'
}
},
graphic: { // 图形中间文字
type: 'text',
left: 'center',
top: '40%',
style: {
text: '总计\n1942\n人',
textAlign: 'center',
fill: '#FFE033',
fontSize: 16
}
},
series: [{
name: '三级指标',
type: 'pie',
center: ['50%', '44%'],
radius: ['48%', '74%'],
color: colorList,
itemStyle: {
normal: {
// 设置扇形的阴影
shadowBlur: 10,
shadowColor: '#666'
}
},
labelLine: {
normal: {
lineStyle: {
color: "rgba(255, 255, 255, 0.3)"
},
length: 10,
length2: 15
}
},
label: {
normal: {
position: 'outer',
textStyle: {
color: "rgba(255, 255, 255)"
}
}
},
data: [{
value: 1,
name: ' 电子商务',
}, {
value: 1,
name: '航空服务',
}, {
value: 5,
name: '护理',
}, {
value: 1,
name: '会计',
}, {
value: 5,
name: '珠宝玉石加工与营销',
}, {
value: 1,
name: '酒店大专',
}, {
value: 5,
name: '旅游服务与管理',
}, {
value: 1,
name: '美发与形象设计',
}, {
value: 5,
name: '数字影像技术',
}, {
value: 3,
name: '学前（3+4）',
}]
}, {
name: '二级指标',
type: 'pie',
radius: ['24%', '50%'],
center: ['50%', '44%'],
color: colorList2,
label: {
normal: {
position: 'inner'
}
},
itemStyle: {
normal: {
// 设置扇形的阴影
shadowBlur: 10,
shadowColor: '#666'
}
},
data: [{
value: 1,
name: ' 学前教育（保育方向）',
}, {
value: 2,
name: '学前教育（五年制）',
}, {
value: 2,
name: '学前教育（大专3+2）',
}, {
value: 5,
name: '学前教育（教育方向）',
}]
},
]
}
myxslb.setOption(option1);
mytu3.setOption(option3);
mytu4.setOption(option4);
mytu6.setOption(option6);
mytu7.setOption(option7);
</script>
</html>
举报
请认真填写举报原因，尽可能描述详细。
请选择举报类型
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化