您的位置：首页 > 其它

ECharts3.0 强大的统计图

2016-01-12 17:39 666 查看

简单一个案例

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的长度一样

看图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航