java的echarts完整

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) bon 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) bon 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) bon 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) bon 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) bon v.month = b.month group by v.month;</select>

dao

// 报表sql5public List<TestBaoBiao> getEcharts();// 报表sql4public List<TestBaoBiao> getEcharts4();// 报表sql3public List<TestBaoBiao> getEcharts3();// 报表sql2public List<TestBaoBiao> getEcharts2();// 报表sql1public 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;}@Overridepublic String toString() {return "TestBaoBiao [sj=" + sj + ", sl=" + sl + "]";}}

业务层

// 报表的echartspublic List<TestBaoBiao> getEcharts(){return TestZtbMainaDao.getEcharts();}// 报表的echarts4public List<TestBaoBiao> getEcharts4(){return TestZtbMainaDao.getEcharts4();}// 报表的echarts3public List<TestBaoBiao> getEcharts3(){return TestZtbMainaDao.getEcharts3();}// 报表的echarts2public List<TestBaoBiao> getEcharts2(){return TestZtbMainaDao.getEcharts2();}// 报表的echarts1public List<TestBaoBiao> getEcharts1(){return TestZtbMainaDao.getEcharts1();}

控制层

//报表的url@RequestMapping(value="Ecart")@ResponseBodypublic 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 callbackmyChart.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>

前台效果