开发者学堂课程【大数据分析之企业级网站流量运营分析系统开发实战（第五阶段）：网站流最日志分析--数据可视化--动态加载数据--数据格式排序问题剖析】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/697/detail/12258
网站流最日志分析--数据可视化--动态加载数据--数据格式排序问题剖析
如何动态的去从数据库加载数据返回到前端，让这些图形表格能够有数据展示？
以这个图形为例，这个叫做最近七天日平均 PV 量，通过这个 title 可以知道最近七天的平均量大概会是一个柱状图或是一个直线图。 X轴表示的是每一天，Y轴表示的是每一天对应的批量形成一个高低起伏的状况。
问题在于现在这个图形是 loading 的状态，因为没有数据。那么该怎么去突破它呢？
这时不妨按一下浏览器的开发模式，之后再去重新加载这个页面，可以发现当中现在有三个请求包处于 404 单薄平面，PV 量，而这这三个请求正好对应页面上三个没有数据的图形，这些图形背后的知识点大同小异，都是一样的逻辑。
下面重点看一个，比如最近七天的访问量。可以发现在这个加载页面的时候它会发起一个请求，这个请求背后包含的就是向后台去查询数据，返回到前端。接下来就带着这个请求来到页面上，打开开发工具。
现在的首页叫做 index jsp 。在当中可以去查找一下或者是搜索一下，这当中写了很多的代码，有些是页面样式之类。
找到最近七天平均 pv 量：
会是一个什么样的图形？整个可视化开发当中，最大的工作量就是前后端数据的一个问题，下面来画图看一下：
mychart
.setoption({
title :{
text :'"最近7天日平均PV量
subtext:'动态数据'
}，
tooltip:{}, legend :{
data :['日平均Pv量']}，
xAxis :{
data : []}，
yAxis :{}， series :[ {
name :'日平均PV量'， type :'bar', data :[]
});} ]
//loading 动画
myChart.showLoading();//异步加载数据
回到代码动态距离可以发现 title 就是最近七天日平均 pv。下面的 X 轴和 Y 轴现在数据都是空的，而且是一个数组，意味着当前没有数据，它显示 showloading，表示没有数据。什么时候才会把 showloading 的数据屏蔽掉呢?
这个请求就是在页面上刚才发现的请求,叫做 avgpvnum, 意味着这个请求就是向后端动态的加载数据的。当这个请求成功之后把数据做一个回调填充，可以发现 X 轴往里面填，往 y 里面填，也就是说这个异步请求的方法，保证了从后台拿到数据填充到里面的 X 轴和 Y 轴上，然后把 loading 这个动画隐藏掉就可以搞定。
接下来来剖析一下数据格式问题。在前端 XY 轴，它需要的是两个数组，那前端数据需要什么格式比较好？
下面简单画个图：
这时候后端数据是什么样子呢？这里就涉及到开发的第一个问题。
1. 在规划中重点考虑前后端数据格式问题，那么前端 echarts 往往
需要的都是 js 格式的数据。
后端查询返回的数据格式是多条数据历史的集合。
当然也有其他的数据。前端是 js 格式的数据，后端是去从数据库做一个查询，当前只有一天的数据,那么下面就来模拟一下。打开参考资料。
在这里有一个叫做 sql 的文件夹，里面就是刚才三个表对应的数据，执行这三个数据。
接下来初始化数据库，打开代码来确认我们所创建的数据库的配置叫什么。
打开 property，配置文件叫做 sqoopdb，因此直接来创建这个数据库。
需要这个 sql 做执行，这里以一个表为例，其他大家可以来灵活的自己来练习。
选择这个数据库叫 sql 文件，点击开始，执行。
执行之后，点刷新，可以发现当前就多了一个表，这个表当中记录的就是模拟的数据，叫做每天的平均pv量：
来到画板剖析一下，后端的数据格式长的是这个样子。通过查询第七天返回应该是什么格式，可以看到现子操作 mysql 数据库，甚至会创建一个嘉宾跟这个数据库表保持一致，是不是那么一个对象当中有 ID 属性，日期属性和 avg 属性，然后每一条每个对象表示一条记录，记录查询返回的是一个集合里面封装的对象。
所以后端如果不出意外返回的是历史的集合，里面放的是一个对象，
那么这时必须要做前后端数据格式的转换，是前端迎合后端还是后端迎合前端？
前端使用的是 js，按照它的规范不管怎么查必须要把数据转成 js 扔到前台就可以。所以说这里涉及到前后端数据格式转换问题。
通常是画在后端的时候把数据转成阶层返回到前端，把这个集合做一个便利，把每个月的日期拿出来做一个日期数组，把 Pvg 拿出来做一个 PV 数，然后把它传递到前台就可以了，这也是我们在实际开发中遇到的最大的问题。
也可以往大了说，整个 echarts 数据可视化报表当中大量的工作量就在这个数据格式转换的问题。因为后端查询出来数据，可能是一个表，可能是多个表，可能是不同的数据，但是数据不管长什么样一定要去迎合前端的数据格式，这是第一个要考虑的叫做数据格式问题。
2. 数据排序问题
保证查询返回前端数据是有序的 往往跟时间的顺序相关
第二个问题,刚才画图的时候，看 201812012020304，如果这里面数据是一号、四号、三号、二号、九号、七号，如果是乱序,这时候在柱状图上，或者折线图展示的就不是有规律的波澜。
本来是逐渐递增的，又变成逐渐递减的甚至变成乱七八糟的，因此这里出现一个问题叫做数据排序，这个问题非常重要，尤其涉及到折线柱状，最近几天这种日期的基本上是按照时间的一个过程。
以上就是我们从理论上来推导进行前后端数据格式进行动态加载之后需要考虑的问题，一个是数据格式问题，一个是数据排序的问题。
