一、柱图显示:
HTM页面:
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 800px; margin: 0">
<button id="refresh">刷新</button>
<div id="container" style="height: 500px"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var names = []; //文章类别数组(实际用来盛放X轴坐标值)
var nums = []; //文章个数数组(实际用来盛放Y坐标值)
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
app.title = '坐标轴刻度与标签对齐';
$.ajax({
type: 'get',
url: Aexit.ctxPath +"/Statistics/articles",//请求数据的地址
dataType: "json", //返回数据形式为json
success: function (data) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
$.each($.parseJSON(data), function (index, item) {
names.push(item.typename); //挨个取出类别并填入数组
nums.push(item.num); //挨个取出个数并填入数组
});
var option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : names,
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:nums
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
$(document).ready(function(){
$("#refresh").click(function () {
window.location.href=Aexit.ctxPath +"/Statistics/article";
})
})
</script>
</body>
</html>
Controller:
@RequestMapping("/articles")
@ResponseBody
public String article() {
List<Article> list = bizService.selecttypename();
String data = JSON.toJSONString(list);
return data;
}
Sql语句:
<select id="selecttypename" resultType="net.aexit.inner.aexithome.common.model.Article">
SELECT
ar.`typename` typename,
t1.num num
FROM
(SELECT
a.`articletype` AS did,
COUNT(*) AS num
FROM
article a
GROUP BY a.`articletype`
HAVING COUNT(*) >= 1) t1,
ar_type ar
WHERE t1.did = ar.`id`
</select>
二、折线图显示:
HTML页面:
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 800px; margin: 0">
<button id="refresh">刷新</button>
<div id="container" style="height: 500px"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var nums = [];
var title = [];
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
$.ajax({
type: 'get',
url: Aexit.ctxPath + "/Statistics/dafen",//请求数据的地址
dataType: "json",
success: function (data) {
$.each($.parseJSON(data), function (index, item) {
title.push(item.title); //挨个取出类别并填入数组
nums.push(item.num); //挨个取出个数并填入数组
});
var option = {
xAxis: {
type: 'category',
data: title
},
yAxis: {
type: 'value',
scale: true,
precision: 2,
splitNumber: 9,
boundaryGap: [0.01, 0.01],
splitArea: { show: true }
},
series: [{
data: nums,
type: 'line'
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
$(document).ready(function(){
$("#refresh").click(function () {
window.location.href=Aexit.ctxPath + "/Statistics/dafens";
})
})
</script>
</body>
</html>
Controller:
@RequestMapping("/dafen")
@ResponseBody
public String dafen(){
List<Article> list = bizService.selectdafen();
String data = JSON.toJSONString(list);
return data;
}
Sql语句:
<select id="selectdafen" resultType="返回Model">
SELECT
a.`title`,
ar.`grade` num
FROM
ar_grade ar
INNER JOIN article a
ON a.`id` = ar.`arid`
</select>
三、饼图显示
HTML页面:
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 500px; margin: 0">
<div id="container" style="height: 300px"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var res = [];
$.ajax({
url: Aexit.ctxPath + "/Statistics/xianshi",
dataType: "json",
success: function (data) {
$.each($.parseJSON(data), function (index, item) {
var obj = new Object();
obj.value = item.num,obj.name = item.tt;
res.push(obj);
});
var option = {
title: {
text: '用户文章是否可见',
subtext: '真实可靠',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data:res.name
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: res,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</body>
</html>
Contrioller:
@RequestMapping("/xianshi")
@ResponseBody
public String xianshi(){
List<Article> list = bizService.selectxianshi();
String data = JSON.toJSONString(list);
return data;
}
SQL:
<select id="selectxianshi" resultType="net.aexit.inner.aexithome.common.model.Article">
SELECT
CASE
WHEN a.flag = 0 THEN '可见'
WHEN a.flag = 1 THEN '不可见'
END AS tt,
COUNT(a.flag) AS num
FROM article a
GROUP BY a.flag;
</select>