SSM框架下的圖表設計
阿新 • • 發佈:2018-11-14
1. 由於在自動生成的Mapper.xml檔案裡使用自定義結果集(即統計函式只取了其中的幾個欄位,但是其他的欄位在轉為json資料後還是會有欄位,只是值為null,但對資料的選取造成難度。)效果不理想。
所以自己定義一個Mapper.xml檔案和Mapper.java檔案,如下:
GenMapper.xml:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="dz.mapper.GenMapper"> <select id="select" resultType="map" parameterType="java.lang.String"> ${_parameter} </select> </mapper>
GenMapper.java:
import java.util.List; import java.util.Map; import org.springframework.stereotype.Component; @Component public interface GenMapper { List<Map<String,Object>> select(String sql); }
2. 然後呢,設計Dao介面和Dao的實現類,在Daoimp中寫sql語句,當然還可以封裝sql語句。
DaoI.java:
public interface AdminuserDao { //餅圖查詢 List<Map<String,Object>> select(); }
在實現類中,還需要自動裝配GenMapper -- DaoImp.java:
package dz.dao; import java.util.HashMap; import java.util.List; import java.util.Map; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Repository; import dz.daoI.AdminuserDao; import dz.entity.Adminuser; import dz.entity.User; import dz.mapper.AdminuserMapper; import dz.mapper.GenMapper; @Repository("adminuserDao") public class AdminuserDaoImp implements AdminuserDao{ @Autowired private AdminuserMapper adminuserMapper; @Autowired private GenMapper genMapper; public GenMapper getGenMapper() { return genMapper; } public void setGenMapper(GenMapper genMapper) { this.genMapper = genMapper; } public AdminuserMapper getAdminuserMapper() { return adminuserMapper; } public void setAdminuserMapper(AdminuserMapper adminuserMapper) { this.adminuserMapper = adminuserMapper; } //餅圖查詢 @Override public List<Map<String, Object>> select() { // TODO Auto-generated method stub String sql = "SELECT COUNT(asex) AS value,asex as name FROM adminuser GROUP BY asex"; return genMapper.select(sql); } }
3. 接著就是serviceI和serviceImp層(很簡單的一層):
ServiceI.java:
public interface AdminuserService { //餅圖查詢 List<Map<String, Object>> select(); }
ServiceImp.java:
@Service("adminuserService") public class AdminuserServiceImp implements AdminuserService{ @Autowired private AdminuserDaoImp adminuserDao; public AdminuserDaoImp getAdminuserDao() { return adminuserDao; } public void setAdminuserDao(AdminuserDaoImp adminuserDao) { this.adminuserDao = adminuserDao; } //餅圖查詢 @Override public List<Map<String, Object>> select() { // TODO Auto-generated method stub return adminuserDao.select(); } }
4.最後是Controller層,將資料以json格式傳給jsp頁面:
@RestController @RequestMapping(value="/adminuser") public class AdminuserController extends BaseController{ @Autowired private AdminuserService adminuserService; public AdminuserService getAdminuserService() { return adminuserService; } public void setAdminuserService(AdminuserService adminuserService) { this.adminuserService = adminuserService; } //餅圖查詢男女人數 @RequestMapping(value="/pie") @ResponseBody public List<Map<String, Object>> select(){ return adminuserService.select(); } }
5. 最後jsp頁面用ajax得到資料就可以製作圖表了:
<div id="container" style="height: 500%"></div> <script type="text/javascript"> $(function(){ $.ajax({ url:"adminuser/pie", type:"post", data:{}, dataType:"json", success:function(datas){ //var value = new Array(); //var name = new Array(); //$(objs).each(function(i,obj){ // name.push(obj[0]); // value.push(obj[1]); //}); console.log(datas); var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; option = { backgroundColor: '#fff', title: { text: '管理員男女比例餅圖', left: 'center', top: 20, textStyle: { color: 'green' } }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, visualMap: { show: false, min: 80, max: 600, inRange: { colorLightness: [0, 1] } }, series : [ { name:'管理員', type:'pie', radius : '55%', center: ['50%', '50%'], data://[ //{value:335, name:'直接訪問'}, //{value:310, name:'郵件營銷'}, //{value:274, name:'聯盟廣告'}, //{value:235, name:'視訊廣告'}, //{value:400, name:'搜尋引擎'} //] datas.sort(function (a, b) { return a.value - b.value; }), roseType: 'radius', label: { normal: { textStyle: { color: 'red' } } }, labelLine: { normal: { lineStyle: { color: 'blue' }, smooth: 0.2, length: 10, length2: 20 } }, itemStyle: { normal: { color: '#c23531', shadowBlur: 200, shadowColor: 'rgba(65, 142, 172, 0.5)' } }, animationType: 'scale', animationEasing: 'elasticOut', animationDelay: function (idx) { return Math.random() * 200; } } ] };; if (option && typeof option === "object") { myChart.setOption(option, true); } } }); }); </script>
PS:當然,肯定要引用js,我用的是:http://echarts.baidu.com/裡面下載的echarts.js。
放張效果圖(比較簡陋,複雜的肯定需要複雜的sql,哈哈):