基于JSP、Servlet的ECharts入门案例

原创 2018年04月17日 16:12:46

由于项目需要,对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就可以方便的把后端的数据打包发给客户端


public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		//获取数据 ServiceForWeb中封装了和数据库交互的内容
		List<ShowWorkData> list=ServiceForWeb.getShowWorkData();
		
		//获取数据大小
		int size=0;
		for(int i=0;i<list.size();i++){
			if(list.get(i).getMachine_name().equals(name)){
				size++;
			}
		}
		//数据
		Integer[] Ua=new Integer[size];
		Integer[] Ub=new Integer[size];
		Integer[] Uc=new Integer[size];
		
		//横坐标
		Integer[] number=new Integer[size];
		
		//将需要的数据保存下来
		for(int i=0,j=0;i<list.size();i++){
			if(!list.get(i).getMachine_name().equals(name)){
				continue;
			}
			Ua[j]=list.get(i).getUa();
			Ub[j]=list.get(i).getUb();
			Uc[j]=list.get(i).getUc();
			number[j]=j+1;
			j++;
		}
		
		//将所有要传的数据放在map中
		Map<String, Object> map = new HashMap<String,Object>(); 
		map.put("Ua", Ua);
		map.put("Ub", Ub);
		map.put("Uc", Uc);
		map.put("number", number);
		map.put("machine_name", name);

		//传给前端
		response.getWriter().println(JSON.toJSONString(map));
	}



上面代码中的name是声明的静态变量,name的值在post中获取,这点其实已经有些偏离主题了,但避免回看理解不了,还是说明一下。在浏览器访问页面是,需要先输入一个name值,来和数据库绑定,得到name值下的所以数据,servlet在post方法中获取name,然后页面跳转到要显示图表的jsp页面,再更加GET获取图表数据

如果把页面跳转直接放在get方法中是不可行的



3.页面端  也就是jsp页面

在body中创建一个div用来放表格 大小根据数据多少觉得,表格大小在这里就固定了,大小是必须设置的


<div id="chart" style="width: 900px; height: 400px;margin-top:50px;"></div>  


<!-- 引入JS文件  -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/echarts.common.min.js"></script>

  

    <script type="text/javascript">  
        // 基于准备好的dom,初始化echarts实例  
        var myChart = echarts.init(document.getElementById('chart')); 
        var url = '${pageContext.request.contextPath}/WorkDataChartSer';  
        $.getJSON(url).done(function(json) {  
        
        // 获取数据  
        testua = json.Ua;
        testub = json.Ub;
        testuc = json.Uc;
  		number=json.number;
        name=json.machine_name;    
        
        //更新图表myChart的数据  
        option = {
    		title : {
        	text: '电压图',
        	subtext: name
    	},
    	tooltip : {
        	trigger: 'axis'
    	},
    	legend: {
        	data:['Ua','Ub','Uc']
    	},
    	toolbox: {
        	show : true,
        	feature : {
            	mark : {show: true},
            	dataView : {show: true, readOnly: false},
            	magicType : {show: true, type: ['line', 'bar']},
            	restore : {show: true},
            	saveAsImage : {show: true}
        	}
    	},
    	calculable : true,
    	xAxis : [
        	{
            	type : 'category',
            	boundaryGap : false,
            	data : number
        	}
    	],
    	yAxis : [
        	{
            	type : 'value',
            	min : 185
        	}
    	],
    	series : [
        	{
            	name:'Ua',
            	type:'line',
            	data:testua,
            	markPoint : {
                	data : [
                    	{type : 'max', name: '最大值'},
                    	{type : 'min', name: '最小值'}
                	]
            	},
            	markLine : {
                	data : [
                    	{type : 'average', name: '平均值'}
                	]
            	}
        	},
        	
        	{
            	name:'Ub',
            	type:'line',
            	data:testub,
            	markPoint : {
                	data : [
                    	{type : 'max', name: '最大值'},
                    	{type : 'min', name: '最小值'}
                	]
            	},
            	markLine : {
                	data : [
                    	{type : 'average', name: '平均值'}
                	]
            	}
        	},
        
        	{
            	name:'Uc',
            	type:'line',
            	data:testuc,
            	markPoint : {
                	data : [
                    	{type : 'max', name: '最大值'},
                    	{type : 'min', name: '最小值'}
                	]
            	},
           	 	markLine : {
                	data : [
                    	{type : 'average', name: '平均值'}
                	]
            	}
        	}
    	]
	};
            
        myChart.setOption(option);  
    })  
    </script>  


导入的js文件必须放在前面,Echarts中的option是控制图表的核心代码,官方也提供了很多参考样式,

如果不是深入学习ECharts我认为没必要纠结它的具体语法,直接根据官方给出的案例做有必要的修改,

就能得到想要的图表,这里贴个网址,有很多样式http://echarts.baidu.com/echarts2/doc/example.html

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Bazingaea/article/details/79975651

fusioncharts使用之jsp

初次接触fusionchats图表插件
  • u011397857
  • u011397857
  • 2014-07-28 16:04:02
  • 1393

ECharts使用心得

ECharts使用心得 前言 上周项目组要临时给客户做一个演示的原型,首页设计的是一个中国地图,本来打算用谷歌的地图,但是,做出来之后,整体的效果看起来太差了,最后就在网上搜相关的地图呈现的控件,...
  • xuemoyao
  • xuemoyao
  • 2013-11-16 17:03:26
  • 310789

Echarts图表与数据库数据结合

可能有跟我一样刚接触图表的同学,那我就先从宇宙大爆炸开始吧1.从官网下载js    http://echarts.baidu.com/download.html2.导入到你的项目中  &amp;lt;...
  • LXBDBK
  • LXBDBK
  • 2018-03-01 14:05:42
  • 370

echarts 结合ajax完成上下级关系图的绘制

这10天一直在做一个关于企业关系图的模块,一开始的时候用公司的框架,但是做出来的效果很low,当然因为一开始的时候只是想着在做的过程中学习公司的框架。后来主管推荐我用echarts来做,于是经过这1个...
  • qq_27971625
  • qq_27971625
  • 2017-07-26 15:23:59
  • 446

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

  • 2017年05月09日 15:48
  • 648KB
  • 下载

Easyui,Echart,Jsp+Servlet开发简单完整实例

做BI实施必须要掌握一定的开发技能,以处理整合报表系统;SDK开发;简单的报表开发这些需求。在我参加的一个项目中需要制作一些简单的列表,图表。由于要求不能用报表工具,所以就只有用代码开发。太久没做开发...
  • BI_Worker
  • BI_Worker
  • 2016-07-29 13:45:22
  • 2188

ECharts SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中

ECharts显示SSH框架从数据库调出的数据 通过JQueryAjax请求Action返回JSON对象 并将JSON对象填充到ECharts图表中...
  • ArcticFoxHan
  • ArcticFoxHan
  • 2014-07-23 22:29:04
  • 4075

<em>ECharts</em>3 配置项手册part3

根据百度<em>ECharts</em>3官方文档整理而成,便于离线使用和查阅,由于上传大小的限制,该手册被分成了5部分。综合评分:4 收藏(1)评论(1)举报 ...
  • 2018年04月18日 00:00

EchartsTest --- Echarts 的 servlet 实现 动态获取数据 练习

/** servlet的内容 */ import java.io.IOException; import java.util.ArrayList; import java.util....
  • zhaixiangxiang
  • zhaixiangxiang
  • 2016-10-16 18:17:01
  • 930

对110W知乎用户信息进行分析,使用echarts+servlet+jsp可视化展示

上一篇介绍了使用scrapy框架爬取知乎信息,爬取了知乎112W用户的信息,接下来是对这些信息进行分析处理和前端可视化。 使用的工具 Java web servlet + jsp mysql数据库 e...
  • chj_orange
  • chj_orange
  • 2017-05-19 12:09:04
  • 603
收藏助手
不良信息举报
您举报文章:基于JSP、Servlet的ECharts入门案例
举报原因:
原因补充:

(最多只允许输入30个字)