基于JSP、Servlet的ECharts入门案例

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