簡單一個案例
JSP:
引入相應的js即可
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ECharts</title>
<script
src="${pageContext.request.contextPath }/static/echarts/echarts.js"></script>
<script
src="${pageContext.request.contextPath }/static/jquery/jquery-2.1.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="main1" style="width: 600px; height: 400px; float: left;"></div>
</br>
<div id="main" style="width: 600px; height: 400px; float: right;"></div>
</body>
<script type="text/javascript">
var data;
$(document).ready(function() {
$.get('${pageContext.request.contextPath}/car/getJson?token=Ivj6eZRx40=MTx2ZvnG8nA=2B8sIw7S',function(cache){
data=cache;
/**整個的data數據類型結構json
{
"data": [
{
"name": "多媒體",
"value": 465
},
{
"name": "實驗室",
"value": 162
},
{
"name": "教學",
"value": 29
},
{
"name": "綜合",
"value": 413
},
{
"name": "軟件",
"value": 167
},
{
"name": "頂層設計",
"value": 67
}
],
"type": [
"多媒體",
"實驗室",
"教學",
"綜合",
"軟件",
"頂層設計"
]
}
*/
getCharts();
});
});
function getCharts(){
// 基於準備好的dom，初始化echarts實例
var myCharts =echarts.init(document.getElementById('main1'));
myCharts.setOption({
title : {
text: '南丁格爾玫瑰圖',
subtext: '純屬虛構',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x : 'center',
y : 'bottom',
data:data.type
/*
data.type: Array[6]
0: "多媒體"
1: "實驗室"
2: "教學"
3: "綜合"
4: "軟件"
5: "頂層設計"
*/
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'半徑模式',
type:'pie',
radius : [20, 110],
center : ['25%', 200],
roseType : 'radius',
width: '40%', // for funnel
max: 40, // for funnel
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true
},
labelLine : {
show : true
}
}
},
data:data.data
/*
data.data: Array[6]
0: Object
name: "多媒體"
value: 465
1: Object
name: "實驗室"
value: 162
2: Object
name: "教學"
value: 29
3: Object
name: "綜合"
value: 413
4: Object
name: "軟件"
value: 167
5: Object
name: "頂層設計"
value: 67
*/
},
{
name:'面積模式',
type:'pie',
radius : [30, 110],
center : ['75%', 200],
roseType : 'area',
x: '50%', // for funnel
max: 40, // for funnel
sort : 'ascending', // for funnel
data:data.data
}
]
});
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
// 指定圖表的配置項和數據
// 填入數據
myChart.hideLoading();
myChart.setOption({
title : {
text : '項目類型統計圖',
subtext :'2015年1月12日 16:00',
x : 'center'
},
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b} : {c} ({d}%)"
},
legend : {
orient : 'vertical',
left : 'left',
data :data.type
},
series : [ {
type : 'pie',
radius : '55%',
center : [ '50%', '60%' ],
data : data.data,
itemStyle : {
emphasis : {
shadowBlur : 10,
shadowOffsetX : 0,
shadowColor : 'rgba(0, 0, 0, 0.5)'
}
}
} ]
});
}
</script>
</html>java:採用的是jfinal框架 只要能返回json就行 用response也行
public void getJson() {
//查詢條件集合
List<Project> find = Project.dao.find("SELECT Count(1) as 'value', t.name from pro_project p,pro_type t where p.TYPE_ID=t.id GROUP BY t.name");
//拼裝json
Map<Object, Object>map =new HashMap<Object, Object>();
List<Object> nameList = new ArrayList<Object>();
List<Object> dataList = new ArrayList<Object>();
for (Project p : find) {
JSONEntity entity =new JSONEntity((String)p._getAttrValues()[0],(Long) p._getAttrValues()[1] );
dataList.add(p._getAttrValues()[0]);
nameList.add(entity);
}
map.put("type", dataList);
map.put("data", nameList);
System.out.println(JSONObject.toJSONString(map));
//返回客戶端json
renderJson(JSONObject.toJSONString(map));//返回的數據爲
{"data":[{"name":"多媒體","value":465},{"name":"實驗室","value":162},{"name":"教學","value":29},{"name":"綜合","value":413},{"name":"軟件","value":167},{"name":"頂層設計","value":67}],"type":["多媒體","實驗室","教學","綜合","軟件","頂層設計"]}注意啊data.type的值一定和data.data的長度一樣
看圖
