基于JSP、Servlet的ECharts入门案例

本文介绍了一个基于JSP、Servlet和ECharts的简单数据可视化案例。首先介绍了如何导入所需的jar包和js文件,包括Echarts.common.min.js、fastjson-1.1.33.jar和jQuery。接着,讲述了在服务端(Servlet)如何动态读取数据库数据,利用fastjson转换为JSON字符串并发送给客户端。最后,在JSP页面中创建div展示图表,并根据ECharts的官方示例进行调整以呈现数据。
摘要由CSDN通过智能技术生成

由于项目需要,对ECharts简单了解了一下,对ECharts详细使用语法并不了解,此案例侧重JSP,Servlet,ECharts三者的连接,以及记录遇到的问题和解决方法。

 

1.导入jar包和js文件

echarts.common.min.js   http://echarts.baidu.com/download.html

fastjson-1.1.33.jar  http://www.java2s.com/Code/Jar/f/fastjson.htm

注意这里的Json包需要导入tomcat中,不然运行时会报错 Class Not Found

在Javaweb项目中,也就是要导入WEB-INF下的lib文件夹

jquery也需要导入,比较好找就不贴网址了,我使用的版本是jquery-3.3.1.min.js    

 

2.先说服务端 也就是servlet

 

画图首先需要有数据,此案例中的数据是从数据库中动态读取出来的,也就是说在jsp页面显示的表是动态表,

随着数据库中数据的变化而变化,数据读取到List中直接从servlet中获取,获取到数据以后需要对数据进行处理,

得到前端需要的数据形式JSON字符串,使用fastjson就可以方便的把后端的数据打包发给客户端

 


                
  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值