基于JSP、Servlet的ECharts入门案例

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

由于项目需要,对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

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页