项目总结(一)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('输出代码')  // 输出代码
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • javascript功能插件大集合,写前端的亲们记得收藏 包管理器管理着 javascript 库,并提供读取和打...
    狗狗嗖阅读 4,231评论 0 1
  • 我做了一个梦,梦里见到了一个有主见有想法的自己!醒来回想着那个自信能够独挡一面的梦中人,甚是感慨!觉得是见到了本来...
    白走一招阅读 2,790评论 0 0
  • 2017 年3月18日(今晚),许嵩上海演唱会——《摄影艺术》。从《玫瑰花的葬礼》《清明雨上》《断桥残雪》,到如今...
    何道元阅读 3,012评论 0 0
  • 圣诞节第四节课,上午的最后一节课,英语老师破天荒地给我们放了一节课的视频,是关于圣诞节的。 其中一个视频是在 Yo...
    百炼钢与绕指柔阅读 3,775评论 1 0
  • 在白天对什么都不动感情是极为容易的,但在夜晚就是另外一回事了。——《太阳照常升起》海明威 总是有那么些晚上,不怎么...
    晗颖Jane阅读 1,706评论 2 3

友情链接更多精彩内容