项目总结（一）ECharts数据报表系统

ECharts数据报表系统
用到技术：jQuery,ECharts,jQuery-ui的日期选择器插件

Echarts,一个javaScript的可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），提供直观，交互丰富，可高度个性化定制的数据可视化图表。

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。主要用到日期选择器插件

缺点：
1.项目使用的是基于JSP的ECharts，前后耦合，可维护性低
2.项目前期数据直接是由后台开发人员通过jsp页面的数据渲染标签（eg：<c:forEach></c:forEach>等)传至页面，同时渲染多个图表会使页面出现卡顿

改进：
1.把数据由JSP页面标签渲染数据改成ajax请求接口获取数据.
2.通过下拉加载图表的方式，判断滑动滚动条的位置再请求数据接口，把数据分块后加载，加载多少渲染多少，优化了页面加载速度

所用到的几个公用方法：

 //检验日期格式是否正确 yyyy-mm-dd, 1995-01-10

function DateCheck(Time) {
    var a = /^(\d{4})-(\d{2})-(\d{2})$/
    if(a.test($(Time).val())) {
        return true
    } else {
        alert("日期格式不正确!")
        return false
    }
}

//获得当前页面url某个参数
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if(r != null) return decodeURI(r[2]);
    return null;
}
var url = 'https://www.jianshu.com/p/45c1a842a949?name=xhd'
console.log(getQueryString('name'))  // xhd

// 减少console.log()的代码，在写代码调试的过程我们经常会用到，如何简化输出的代码呢
var log = console.log.bind(console);
log('输出代码')  // 输出代码