java的echarts完整

最新推荐文章于 2024-08-09 08:35:15 发布

牧佑

最新推荐文章于 2024-08-09 08:35:15 发布

阅读量705

点赞数 1

文章标签：总结

本文链接：https://blog.csdn.net/qq_34301871/article/details/64904903

版权

xml 有待优化

	<!-- 报表sql语句 状态是5开始。 -->	
	<select id="getEcharts" resultType="com.thinkgem.jeesite.modules.ztbdb.entity.cszzb.TestBaoBiao">
		select v.month sj,ifnull(b.status,0) sl from  past_month_view v left join (select DATE_FORMAT(t.update_date,'%Y-%m')month,
		count(t.status) status from test_ztb_main t where DATE_FORMAT(t.update_date,'%Y-%m') > DATE_FORMAT(date_sub(curdate(),interval 12 month),'%Y-%m') and t.status = 5 group by t.status,month) b
		on v.month = b.month group by v.month;
	
	</select>
	<!-- 报表sql语句结束。 -->
		<!-- 报表sql语句 状态是4开始。 -->	
	<select id="getEcharts4" resultType="com.thinkgem.jeesite.modules.ztbdb.entity.cszzb.TestBaoBiao">
		select v.month sj,ifnull(b.status,0) sl from  past_month_view v left join (select DATE_FORMAT(t.update_date,'%Y-%m')month,
		count(t.status) status from test_ztb_main t where DATE_FORMAT(t.update_date,'%Y-%m') > DATE_FORMAT(date_sub(curdate(),interval 12 month),'%Y-%m') and t.status = 4 group by t.status,month) b
		on v.month = b.month group by v.month;
	
	</select>
	<!-- 报表sql语句结束。 -->
	<!-- 报表sql语句 状态是3开始。 -->	
	<select id="getEcharts3" resultType="com.thinkgem.jeesite.modules.ztbdb.entity.cszzb.TestBaoBiao">
		select v.month sj,ifnull(b.status,0) sl from  past_month_view v left join (select DATE_FORMAT(t.update_date,'%Y-%m')month,
		count(t.status) status from test_ztb_main t where DATE_FORMAT(t.update_date,'%Y-%m') > DATE_FORMAT(date_sub(curdate(),interval 12 month),'%Y-%m') and t.status = 3 group by t.status,month) b
		on v.month = b.month group by v.month;
	
	</select>
	<!-- 报表sql语句结束。 -->
	<!-- 报表sql语句 状态是2开始。 -->	
	<select id="getEcharts2" resultType="com.thinkgem.jeesite.modules.ztbdb.entity.cszzb.TestBaoBiao">
		select v.month sj,ifnull(b.status,0) sl from  past_month_view v left join (select DATE_FORMAT(t.update_date,'%Y-%m')month,
		count(t.status) status from test_ztb_main t where DATE_FORMAT(t.update_date,'%Y-%m') > DATE_FORMAT(date_sub(curdate(),interval 12 month),'%Y-%m') and t.status = 2 group by t.status,month) b
		on v.month = b.month group by v.month;
	
	</select>
	<!-- 报表sql语句结束。 -->
	<!-- 报表sql语句 状态是1开始。 -->	
	<select id="getEcharts1" resultType="com.thinkgem.jeesite.modules.ztbdb.entity.cszzb.TestBaoBiao">
		select v.month sj,ifnull(b.status,0) sl from  past_month_view v left join (select DATE_FORMAT(t.update_date,'%Y-%m')month,
		count(t.status) status from test_ztb_main t where DATE_FORMAT(t.update_date,'%Y-%m') > DATE_FORMAT(date_sub(curdate(),interval 12 month),'%Y-%m') and t.status = 1 group by t.status,month) b
		on v.month = b.month group by v.month;
	</select>

dao

	// 报表sql5
	public List<TestBaoBiao> getEcharts();
	// 报表sql4
	public List<TestBaoBiao> getEcharts4();
	// 报表sql3
	public List<TestBaoBiao> getEcharts3();
	// 报表sql2
	public List<TestBaoBiao> getEcharts2();
	// 报表sql1
	public List<TestBaoBiao> getEcharts1();

实体类

public class TestBaoBiao {

	private String sj;
	private String sl;
	public String getSj() {
		return sj;
	}
	public void setSj(String sj) {
		this.sj = sj;
	}
	public String getSl() {
		return sl;
	}
	public void setSl(String sl) {
		this.sl = sl;
	}
	public TestBaoBiao() {
		super();
	}
	public TestBaoBiao(String sj, String sl) {
		super();
		this.sj = sj;
		this.sl = sl;
	}
	@Override
	public String toString() {
		return "TestBaoBiao [sj=" + sj + ", sl=" + sl + "]";
	}
	
}

业务层

// 报表的echarts
	public List<TestBaoBiao> getEcharts(){
		return TestZtbMainaDao.getEcharts();	
	}
	// 报表的echarts4
	public List<TestBaoBiao> getEcharts4(){
			return TestZtbMainaDao.getEcharts4();	
		}
	// 报表的echarts3
	public List<TestBaoBiao> getEcharts3(){
		return TestZtbMainaDao.getEcharts3();	
		}
	// 报表的echarts2
	public List<TestBaoBiao> getEcharts2(){
		return TestZtbMainaDao.getEcharts2();	
		}	
	// 报表的echarts1
	public List<TestBaoBiao> getEcharts1(){
		return TestZtbMainaDao.getEcharts1();		
		}

控制层

//报表的url
	@RequestMapping(value="Ecart")
	@ResponseBody
	public Map getEcart(Model model){
		List<TestBaoBiao> list5  = testZtbMainaService.getEcharts();
		List<TestBaoBiao> list4  = testZtbMainaService.getEcharts4();
		List<TestBaoBiao> list3  = testZtbMainaService.getEcharts3();
		List<TestBaoBiao> list2  = testZtbMainaService.getEcharts2();
		List<TestBaoBiao> list1  = testZtbMainaService.getEcharts1();
		Map map = new HashMap<Object,String>();
		/*JsonConfig jsonConfig = new JsonConfig();
		jsonConfig.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT);
		JSONObject json =JSONObject.fromObject(map, jsonConfig);
		String result =json.toString();*/
		JSONArray json = JSONArray.fromObject(list5);
		/*String ecarts = json.toString();*/
		map.put("row", list5);
		map.put("row4", list4);
		map.put("row3", list3);
		map.put("row2", list2);
		map.put("row1", list1);
		return map;
	}

前台代码

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="decorator" content="default" />
<title></title>
<style type="text/css">
#main {
  	float:left;
	width: 60%;
	height: 400px;
	
}
#main1{
	float:right;
	width: 40%;
	height: 400px;
}
</style>
</head>
<body style="width:100%;height:100%">
<script src="${ctxStatic}/common/echarts/echarts-all.js"></script>
<script src="${ctxStatic}/common/jquery.min.js"></script>
	<div id="main"></div>
	<div id="main1"></div>
	<script type="text/javascript">
	var names = []; //类别数组（实际用来盛放X轴坐标值）
	var nums = 	[]; //销量数组（实际用来盛放Y坐标值）
	var nums4 = []; //销量数组（实际用来盛放Y坐标值）
	var nums3 = []; //销量数组（实际用来盛放Y坐标值）
	var nums2 = []; //销量数组（实际用来盛放Y坐标值）
	var nums1 = []; //销量数组（实际用来盛放Y坐标值）
	var sum1=0;
	var sum2=0;
	var sum3=0;
	var sum4=0;
	var sum5=0;
	$.ajax({
		type:"GET",
		url:'${ctx}/ztbdb/cszzb/testZtbMaina/Ecart',
		contentType:'application/x-www-form-urlencoded;charset=UTF-8',
		dataType:"json",
		success:function(data){
			/* JSON.parseObject(jsonString, Object.class);  */
			 	/*  var json =jQuery.parseJSON(data.row);  */
					var json = data.row;
					var json4 = data.row4;
					var json3 = data.row3;
					var json2 = data.row2;
					var json1 = data.row1;
				/* var str= JSON.parse(data[0].row); */
				 for(var i=0;i<json.length;i++){
					   
					 names.push(json[i].sj);
				   }
				 for(var i=0;i<json.length;i++){
					   
					   nums.push(parseInt(json[i].sl));
					   sum5 =sum5+parseInt(json[i].sl);
					   console.log(sum5);
				   }
				 for(var i=0;i<json4.length;i++){
					   
					   nums4.push(parseInt(json4[i].sl));
					   sum4 = sum4+parseInt(json4[i].sl);
				   }
				 for(var i=0;i<json3.length;i++){
					   
					   nums3.push(parseInt(json3[i].sl));
					   sum3 = sum3+parseInt(json3[i].sl);
				   }
				 for(var i=0;i<json2.length;i++){
					   
					   nums2.push(parseInt(json2[i].sl));
					   sum2 =sum2+parseInt(json2[i].sl);
				   }
				 for(var i=0;i<json1.length;i++){
					   
					   nums1.push(parseInt(json1[i].sl));
					   sum1= sum1+parseInt(json1[i].sl);
				   }
				 var myChart = echarts.init(document.getElementById('main'));
				 var myChart1 = echarts.init(document.getElementById('main1'));
					// 过渡---------------------
					myChart.showLoading({
					    text: '正在努力的读取数据中...',    //loading话术
					});

					// ajax getting data...............

					// ajax callback
					myChart.hideLoading();
					
					// 图表使用-------------------
					var option = {
						    title : {

						    },
						    tooltip : {
						        trigger: 'axis'
						    },
						    legend: {
						        data:['','','','',']
						    },
						    calculable : true,
						    xAxis : [
						        {
						            type : 'category',
						            data : names
						        }
						    ],
						    yAxis : [
						        {
						            type : 'value'
						        }
						    ],
						    series : [
						        {
						            name:'',
						            type:'bar',
						            data:nums1,
						        },
						        {
						            name:'',
						            type:'bar',
						            data:nums2,
						        }, {
						            name:'',
						            type:'bar',
						            data:nums3,
						        }, {
						            name:'',
						            type:'bar',
						            data:nums4,
						        }, {
						            name:'',
						            type:'bar',
						            data:nums,
						        },
						    ]
						};
					var option1 = {
						    title : {
						        text: '',
						        subtext: '',
						        x:'center'
						    },
						    tooltip : {
						        trigger: 'item',
						        formatter: "{a} <br/>{b} : {c} ({d}%)"
						    },
						    legend: {
						        orient : 'vertical',
						        x : 'left',
						        data:['','','','','']
						    },
						    calculable : true,
						    series : [
						        {
						            name:'',
						            type:'pie',
						            radius : '55%',
						            center: ['50%', '60%'],
						            data:[
						                {value:sum1, name:'：'+sum1+'件'},
						                {value:sum2, name:'：'+sum2+'件'},
						                {value:sum3, name:'：'+sum3+'件'},
						                {value:sum4, name:'：'+sum4+'件'},
						                {value:sum5, name:'：'+sum5+'件'}
						            ]
						        }
						    ]
						};
						                    
					
				 myChart.setOption(option);
				 myChart1.setOption(option1);
		},error:function(){
			
		}
		});
	

	</script>
	
</body>
</html>

前台效果