豆瓣TOP250数据处理

爬取数据处理

先序

之前将豆瓣Top250的数据用node爬了下来（传送门），这次想着用一下数据，可视化处理一下。
本来打算使用LayUI进行数据显示，顺便也可以为手头上即将开始的一个项目（用LayUI做个后台）练下手，
可是之前一直很喜欢的LayUI的图表，发现是扩展项里面的，需要各种授权，倒是不知道是否收费，但还是感觉很麻烦。
正在苦恼，发现图表这一部分LayUI是使用的Echarts插件，而这个插件是开源的，这样就很方便了。
这次算是1.0吧，只是顺便完成了下功能，试一试Echarts，页面也是随手写了下，并不美观，后面打算做的有点可视化的科技感
（虽然这么点数据并没有什么用……）
挂在GitHub上了，虽然现在很丑，不过会完善的>_<
GitHub传送门

原生Ajax获取数据

之前一直是用的各种插件，比如JQ下的ajax，Vue的resource或者axios等，轮子用的多了，也是要会原生啊。
（其实是因为懒得再引入什么插件了）
首先新建一个XMLHttpRequest对象，因为ajax都是基于它的：

var ajax=new XMLHttpRequest();
var url='http://127.0.0.1:8431';//申请得到爬取到的top250数据
建立连接，访问url:
ajax.open('get',url);
ajax.send();
等待状态改变并请求成功时，执行函数：
ajax.onreadystatechange=function(){
	if(ajax.readyState==4 && ajax.status==200){
		topData=JSON.parse(ajax.responseText);//获取到的数据存起来
		dataUse();//数据处理
	}
}

数据处理

这一部分便没有什么好说的了，只是根据想要展示的数据进行一下对原数据的处理就好。
因为我想要展示的是对于250个高分电影的时间分析，统计出12个月份中，月份之间高分电影出现的差别，所以就只需要考虑每个电影的播出月份以及评分就好。
每个电影的数据条大致是：
{
‘name’:’’,
’star’:’9.4’,
’time’:[‘1999’,’10’,’06’]
}
所以依次遍历所有数据，分别将12个月份里面播出电影的评分总和起来就可以了。

图表生成

这部分便是重点了，不得不说，Echarts插件实在是功能强大，柱状图、折线图、饼图、地图以及3D图等各种图形，还有各项动态效果以及渐变等样式，还是可以做得十分炫酷的
当然了，我只是展示一组数据而已，也就是稍微做了下。
script标签引入Echarts之后，在HTML中建立一个具备高宽的容器。
在JS中，使用echarts.init进行初始化实例，并对参数进行调配，最后通过.setOption()生成图表：

//图表配置参数
	var option={
		//图表标题
		title:{
			text:'高分月份'
		},
		//提示框
		tooltip:{},
		//图例（就是最上面一行里那个线条和线条名）
		legend:{
			data:['总评分']
		},
		//X轴
		xAxis:{
			data:['1','2','3','4','5','6','7','8','9','10','11','12']
		},
		//Y轴
		yAxis:{},
		//系列列表
		series:[{
			name:'总评分',
			//折线
			type:'line',
			//数据源
			data:star,
			//渐变色
			color:new echarts.graphic.LinearGradient(0,0,0,1,[{
				offset:0,
				color:'rgba(26,176,254,0.7)'
			},{
				offset:1,
				color:'rgba(26,176,254,0.1)'
			}])
		}]
	};
	//图表生成
myChart.setOption(option);

结果图