基于JSP、Servlet的ECharts入门案例

最新推荐文章于 2024-05-04 11:42:57 发布
最新推荐文章于 2024-05-04 11:42:57 发布
阅读量2.5k 收藏 11
点赞数 1
分类专栏： J2EE 文章标签： jsp servlet Echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bazingaea/article/details/79975651
版权
本文介绍了一个基于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就可以方便的把后端的数据打包发给客户端

 


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Bazingaea
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
jsp+Echarts实现图表可视化，连接数据库，从数据库拿数据

				
			

			

				

					aaaaaaddddsssss的博客
				

				

					06-06
					
					8100
					
				

			

		

		

			
				
实现可视化的图表，jsp+mysql+eclipse，从数据库拿数据改变表格的数据算是echarts的初始入门案例的升级版。
想了解Echarts的各位大大-----》传送门
添加链接描述
效果图：



从Echarts中获得可视化图表，关于如何获得可视化图表，请详见
https://blog.csdn.net/aaaaaaddddsssss/article/details/106585094添加链接描述
通过jsp获得动态的数据，从mysql数据库中取数据
首先打开eclispe
创建一个Dynamic

			
		

	



                

            
              



	

		

			

				
					
【Echarts教科书】Echarts数据统计图表教学（详细）

				
			

			

				

					奈何的人生
				

				

					05-27
					
					5560
					
				

			

		

		

			
				
强大的数据统计图表非Echarts莫属，如果你还不会使用，我来教你！

			
		

	



              


  
              

                


	

		

			

				
					
Jsp+Servlet+Echarts实现动态数据可视化

				
			

			

				

					02-13
				

			

		

		

			
				
Jsp+Servlet+Echarts实现动态数据可视化，对应讲解博文：https://blog.csdn.net/ITBigGod/article/details/81023802

			
		

	





	

		

			

				
					
一个基于JSP、Servlet的Echarts3入门小例子(Eclipse JEE工程)

				
			

			

				

					05-09
				

			

		

		

			
				
一个基于JSP、Servlet的Echarts3入门小例子(Eclipse JEE工程)
1. json处理使用的FastJson工具
2. 主要是基于Servlet
3. 基于jQuery

			
		

	



		

			
		



	

		

			

				
					
echarts通过使用jsp和serlvet访问数据库中的信息并进行绘图

				
			

			

				

					weixin_67485772的博客
				

				

					06-03
					
					999
					
				

			

		

		

			
				
echarts通过使用jsp和serlvet访问数据库中的信息并进行绘图

			
		

	





	

		

			

				
					
jsp中使用echarts示例

				
			

			

				

					02-20
				

			

		

		

			
				
jsp中使用echarts包括echarts的饼图，柱状图，折线图等等

			
		

	





	

		

			

				
					
echarts在jsp中使用配置手册

				
			

			

				

					05-07
				

			

		

		

			
				
项目用到echars开发报表，经过两天的苦战，终于搞出来实例，jsp页面集成echarts，用到的echarts版本为echarts-1.4.1希望能够给你带来帮助。

			
		

	





	

		

			

				
					
Java学习路线图分享（含项目+面试提升）最全整理

				
			

			

				

					Ahahaha___的博客
				

				

					06-23
					
					3197
					
				

			

		

		

			
				
为大家整理了2022最新的Java学习路线图，从学前准备、学习路线、项目实战、面试提升等四个方面给大家分享一些经验，希望可以给学习Java的小伙伴们一些帮助。个人学习经验：我本人是计算机科班出身，现在工作三年之后也仍然没有放弃学习，经常在B站上看一些学习教程来温故知新，看的比较多的就是黑马程序员的课程了，下面整理的也有一些是黑马的课程，大家也可以根据自己的学习整理一些常用的资源库来学习进阶呀。下面进入正题：目录一、学习Java之前你要准备这些二、Java从入门到进阶学习路线1、基础知识2、Spring相关知

			
		

	





	

		

			

				
					
大数据最新邵奈一的技术博客导航(1)

					
最新发布

				
			

			

				

					2401_84186109的博客
				

				

					05-04
					
					1015
					
				

			

		

		

			
				
1、Flume、Kafka、Storm实时流综合案例实战Flume+Kafka+Storm实战：一、Kakfa与Storm整合Flume+Kafka+Storm实战：二、Flume与Kafka整合。

			
		

	





	

		

			

				
					
JSP使用最简单的echarts图入门

				
			

			

				

					夏呆毛的博客
				

				

					09-30
					
					4782
					
				

			

		

		

			
				
jsp使用最简单的echarts图表

jsp项目中应用最简单的一个折线图、柱状图等。

一、echarts官网使用
首先打开echarts的api官方文档。
官网：https://echarts.apache.org/examples/zh/index.html
从官网中可以选择一个自己需要的图表，然后直接点击图表的名称，就可以进去看到代码对应的实例；

比如我点击的是第二个：

然后可以直接导入js包，照猫画虎即可。js包一般这种简单的echarts只需要导入下面这个即可：

下面是我的项目中的实例：


			
		

	





	

		

			

				
					
echarts+Servlet+mysql从数据库获取数据实现简单图表展示

				
			

			

				

					03-17
				

			

		

		

			
				
用Servlet实现的echarts展示两种不同形式图表的小demo，使用的开发工具是eclipse，数据库是mysql。文件中包含项目源码，对应的数据库，以及项目运行后实现的图表截图（含url）。项目本人亲测，可完美展示图表，若有疑问，可Email我，Email：bpcforevery@gmail.com 。（ps:本人在另一个上传的文件中实现了用SSM框架实现的echarts展示图表的小demo，使用的数据库也是mysql，感兴趣的可以去看看）。

			
		

	





	

		

			

				
					
servlet创建增删该查和servlet实现echarts多条折线图

				
			

			

				

					08-10
				

			

		

		

			
				
servlet创建增删该查和servlet实现echarts多条折线图

			
		

	





	

		

			

				
					
Servlet---ECharts

				
			

			

				

					poppy_poppy的博客
				

				

					08-31
					
					333
					
				

			

		

		

			
				
ECharts用ECharts在页面中插入图表
用ECharts在页面中插入图表
网站网址

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
</hea

			
		

	





	

		

			

				
					
jsp页面整合ECharts绘制图表(以折线图为例)

				
			

			

				

					ClearZero的博客
				

				

					03-09
					
					2238
					
				

			

		

		

			
				
文章目录jsp页面整合ECharts绘制折线图先看效果图前端代码后端测试代码
jsp页面整合ECharts绘制折线图
官网:  https://echarts.apache.org/zh/index.html
官网上有demo可以直接调试样式。
话不多说, 直接上代码, 因为好久没写过jsp页面, 语法、用法啥的可能都比较糙, 主要参考整合ECharts的js代码部分, 我是为了方便调试, js直接放在了jsp页面中。
先看效果图
这个是下面 interval: 1 时的显示样式, x轴数据太多的话可以跳几

			
		

	





	

		

			

				
					
可能是最简单的jsp+servlet实现ECharts案例（给初学者提供思路）

				
			

			

				

					sinat_26494147的博客
				

				

					12-20
					
					1082
					
				

			

		

		

			
				
一个柱状图，一个折线图。不多说直接上代码。一个是jsp的，一个是对应的servlet的。


<%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<scr...

			
		

	





	

		

			

				
					
Javaweb：jsp利用ECharts代码导出数据库数据，使其以柱状图表形式可视化（IDEA+Tomcat9.0.4+Mysql数据库）

				
			

			

				

					weixin_43275631的博客
				

				

					01-07
					
					3974
					
				

			

		

		

			
				
数据可视化，ECharts提供了很好的资源，ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
ECharts 遵循 Apache-2.0 开源协议，免费商用。
ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。
本文所用到的echarts代码地址：https://echarts.apache.org/examples/zh/editor.html?c=bar-b

			
		

	





	

		

			

				
					
用echarts结合jsp,servlet生成统计图表

				
			

			

				

					御前两把刀的专栏
				

				

					07-19
					
					4919
					
				

			

		

		

			
				
一  简介

        ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二 案例

   这里我们以图书信息表为例,数据库用mysql5....

			
		

	





	

		

			

				
					
ECharts + servlet+jsp图形

				
			

			

				

					weixin_44540416的博客
				

				

					06-05
					
					430
					
				

			

		

		

			
				
servlet
public void getColumnChart(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/json");
		response.setCharacterE...

			
		

	





	

		

			

				
					
JavaServlet入门教程：Servlet技术与JSP基础

				
			

			

				

					
				

			

		

		

			
				
Servlet和JSP共同构成了Java Web开发的核心，Servlet主要负责处理逻辑，JSP则专注于视图呈现。对于初学者来说，了解和掌握Servlet的基本概念、工作原理、生命周期以及API的使用是进入Web开发领域的关键步骤。通过...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值