Java中的典型图表

前几天写了图表，没有写之前感觉很难，写了之后理清逻辑觉得图表挺有意思的，所以记录一下，以便于在后面用到：

使用图表首先得借鉴Echarts官网中的示例，以及数据返回的格式

1.饼状图

jsp页面：在js文件中写入以下代码，主页面调用

 function 方法名(){
   	$.ajax({
   		type : "POST",
   		url : "请求路径",
   		success : function(jsondata) {
   			if(jsondata==null){
   				alert("获取数据失败");
   				return;
   			}
   			var seriesData = [{"name":"名称1","value" : jsondata["后台接收到的数据1(two)"]}, {"name":"名称2","value" : jsondata["后台接收到的数据2(four)"]}];
   			var nameDate = ["名称1","名称2"];
                        //right：页面显示div的id
   			var pieChart = echarts.init(document.getElementById("right"));
   			var pieoption = {
  					title : {
  				        text: '图表标题',
  				        x:'left'
  				    },
  				    tooltip : {
  				        trigger: 'item',
  				        formatter: "{b} : {c} ({d}%)"
  				    },
  				 	color:['#FBDA55','#348DDF'],//指定颜色
  				    legend: {   //各种占比的显示（位置、图标、名称）
  				    	orient: 'vertical',
  				        x: '78%',
  				        y: '78%',
  				        icon:'circle',
  				    	data: nameDate,
  				    },
  				 	calculable : true,
  				    series : [
  				        {
  				            name: '标题名称',
  				            type: 'pie',
  				            radius : '55%', //图表大小
  				            center: ['50%', '50%'],//图表位置
	   				        label: {
	   			                normal: {
	   			                    show: true,// true数据显示
	   			                   textStyle : {
	                                    fontSize : 15    //文字的字体大小
	                                },
	   			                    formatter: '{b}: {c}({d}%)'
	   			                }
	   			            },
  				            data: seriesData,
  				            itemStyle: {
  				                emphasis: {
  				                    shadowBlur: 10,
  				                    shadowOffsetX: 0,
  				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
  				                }
  				            }
  				        }
  				    ]
   			};
   			pieChart.setOption(pieoption);
   			$(window).resize(pieChart.resize);
   		}
   	});
    }

 Java代码实现如下：

    @RequestMapping("请求地址名")
	@ResponseBody
	public Object 方法名() {
		Map<String,Object> returnMap=new HashMap<String, Object>();
		StringBuffer sbType = new StringBuffer();
		sbType.append("完整sql语句");
                  //获取值
		List<Map<String, Object>> countList = vi.listBySql(sbType.toString(), null);
		for (Map<String, Object> map : countList) {
			if("0".equals(map.get("type"))){
                                // map.get("num")中的num为sql语句的别名
				returnMap.put("two", map.get("num"));
			}else if("1".equals(map.get("type"))){
				returnMap.put("four", map.get("num"));
			}
			
		}
		return returnMap;
	}

2、柱状图

柱状图上面注意横纵坐标的数据以及返回来的数据格式

jsp页面显示的代码：

function 函数方法名(){
   	  $.ajax({
   		type : "POST",
   		url : "请求路径",
   		success : function(jsondata) {
   			if(jsondata==null){
   				alert("获取数据失败");
   				return;
   			}
                         //从后台获取的数据
   			bidName = jsondata.bidName;
   			numData = jsondata.num;
   			numData1 = jsondata.num1;
                        //left为div的id 
   			var barChart = echarts.init(document.getElementById("left"));
   			var baroption = {
   				title:{//设置位置
   					text: '标题',
   					x: 'left',
   					align: 'right'
   				},
   				tooltip: {
   					trigger: 'axis',
   					axisPointer : {            // 坐标轴指示器，坐标轴触发有效
   			            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
   			        }
   				},
   				xAxis:{  //横坐标
   					data:bidName,
   					name: '横坐标名称',
   					axisLabel: {        
                        show: true,
                        textStyle: {
                            fontSize:'13'
                        }
                    },
   				},
   				yAxis:{  //纵坐标
   					type:'value',
   					name:'纵坐标名称'
   				},
   				series: [//现实的数据在柱状图上依次显示
						{   
						    name: '数据1的名称',
						    type: 'bar',
						    stack: '总量',
						    label: {
						        normal: {
						            show: false,
						            position: 'insideRight'
						        }
						    },
						    itemStyle:{//改变柱状的颜色
		   						normal: {
			    						color:'#FBDA55'
		   						}
		   					},
						    data: numData1
						},
						{
						    name: '数据2的名称',
						    type: 'bar',
						    stack: '总量',//显示在同一个柱状条图上
						    label: {
						        normal: {
						            show: false,
						            position: 'insideRight'
						        }
						    },
						    itemStyle:{//改变柱状的颜色
		   						normal: {
			    						color:'#348DDF'
		   						}
		   					},
						    data:numData
						}],
   				label: { //在柱子上显示数值
   					normal:{
   						show:true,
   						position:'top',
   						textStyle:{
   							color: 'black'
   						}
   					}
   				}
   			};
   			barChart.setOption(baroption);
   			$(window).resize(barChart.resize);
   			}
   		});
    }

Java代码如下：

    @RequestMapping("请求地址名")
	@ResponseBody
	public Object 方法名() {
		Map<String,Object> returnMap=new HashMap<String, Object>();
		StringBuffer sbType1 = new StringBuffer();
		StringBuffer sbType2 = new StringBuffer();
		sbType1.append("完整sql语句1");
		sbType2.append("完整sql语句2");
                // 获取值1
		List<Map<String, Object>> countList1 = vi.listBySql(sbType1.toString(), null);
		   // 获取值2
		List<Map<String, Object>> countList2 = vi.listBySql(sbType2.toString(), null);
		   //初始化横轴数据
		Object bidName[] = new Object[countList1.size()];//横轴
               //初始化横轴数据
		Object num[] = new Object[countList1.size()];//纵轴
		for(int i = 0; i < countList1.size(); i++) {
			bidName[i] = countList1.get(i).get("names");
			num[i] = countList1.get(i).get("num");
		}
		Object num1[] = new Object[countList2.size()];//纵轴
		for(int i = 0; i < countList2.size(); i++) {
			bidName[i] = countList2.get(i).get("names");
			num1[i] = countList2.get(i).get("num1");
		}	
                //bidName、num、num1都是sql语句的别名
		returnMap.put("bidName", bidName);
		returnMap.put("num", num);
		returnMap.put("num1", num1);
		return returnMap;
	}