這次使用echarts製作一個統計圖
首先去下載文件吧 開發版的JS 扔到項目裏就好了。
第一次用該怎麼玩呢，正確姿勢當然先看看源碼了，官網裏有各種圖表的demo。 看看什麼樣的數據 是用ajax獲取就好了。
自己做了一個簡單的效果。
不廢話直接上代碼吧 首先就是UserDao方法
//統計男女用戶人數
@Select("select case when sex='1' then '女' when sex='0' then '男' end as SEX,count(sex) as SEXCOUNT from t_user group by sex")
List<Map<String,Object>> count();這個查詢語句搞的也挺焦灼，裏邊AS後邊不要用雙引號 因爲外邊有雙引號，單引號也不要用 語句錯誤的，沒脾氣了 直接不用了 以至於後邊集合取值爲null，這裏提醒一下AS後邊的別名 在存入集合的時候全部大寫，不論你的語句寫的大小寫都要大寫。
然後就UserService了
public List < Map < String ,Object>> pieData(){
List < Map < String ,Object>> data = new ArrayList<> ();
List < Map < String , Object>> listdata= userdao. count();
if (listdata. size()> 0 ){
for(int i= 0 ;i< listdata. size();i++ ){
Map < String ,Object> map = new HashMap<> ();
map . put("name" , listdata. get(i). get("SEX" ));
map . put("value" , listdata. get(i). get("SEXCOUNT" ));
data . add(map );
}
}
return data ;
}注意每個圖表的數據，有的是list有的是map。
UserConreoller
/**
* 獲取餅狀圖數據
* @return
*/
@RequestMapping (value="echartsData" ,method=RequestMethod.POST)
@ResponseBody
public List<Map<String, Object>> initChart (){
return userservice.pieData();
}到這裏後臺數據就完成了，寫後臺的時候遇到一個問題 也不明白是爲什麼 錯誤信息如下：
就是找不到你綁定的dao方法，運行到service層就崩掉了，SQL都不執行還怎麼玩。
莫名的問題，不可能是配置問題，別的方法都可以。
最後的解決方法是把方法名字改了改 ，不知道爲什麼就好了 可能是我的dao、service、controller方法名一樣吧，改了名字 項目就起來了。
最後是頁面： userSexEcharts.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
String path=request .getContextPath();
String basePath=request .getScheme()+"//" +request .getServerName()+":" +request .getServerPort()+path+"/" ;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head >
<meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
<title > Insert title here</title >
<script type ="text/javascript" src ="../echartsjs/echarts.min.js" > </script >
<script type ="text/javascript" src ="../jquery/jquery-2.1.1.min.js" > </script >
</head >
<body >
<div id ="dy" style ="height: 600px;width: 1100px;margin-top: 50px;margin-left:20px;" >
<div id ="mainChart" style ="border: 1px solid #438FB9; width:100%; height:45%;" > </div >
</div >
</body >
<script type ="text/javascript" >
$.ajax({
method:'post' ,
url:'${pageContext.request.contextPath}/echartsData' ,
dataType:'json' ,
success:function (data) {function initChat (data) {var myChart = echarts.init(document.getElementById('mainChart' ));
option = {
title : {
text: '員工男女比例統計' ,
subtext: '內部數據' ,
x:'center'
},
tooltip : {
trigger: 'item' ,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical' ,
left: 'left' ,
data: data
},
series : [
{
name: '男女數量' ,
type: 'pie' ,
radius : '55%' ,
center: ['50%' , '60%' ],
data:data,
itemStyle: {
emphasis: {
shadowBlur: 10 ,
shadowOffsetX: 0 ,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
},
myChart.setOption(option);
};
</script >
</html > 這就好了，可以換換數據，這兩條數據就比較尷尬，也可以玩玩複雜點的圖表。
