控制类
@Resource
private RegionService regionService;
@GetMapping("/PieChart1")
public String pieChart(){
return "echarts/echarts1";
}
@GetMapping("/PieChart2")
public String pieChart2(){
return "echarts/echarts2";
}
@GetMapping("/PieChart3")
public String pieChart3(){
return "echarts/echarts3";
}
@RequestMapping("toPieChart")
@ResponseBody
public List<Region> toPieChart(Model model) {
List<Region> purcahseManagements = regionService.findAll();
//PurchasingManagement是我pojo中创建的实体
System.err.println(purcahseManagements.toString());
return purcahseManagements;
}
ECharts柱形图示例1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>柱形图表1</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 800px;height:450px;"></div>
<script type="text/javascript">
$(document).ready(function () {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//数据加载完之前先显示一段简单的loading动画
myChart.showLoading();
var names = []; //横坐标数组(实际用来盛放X轴坐标值)
var values = []; //纵坐标数组(实际用来盛放Y坐标值)
$.ajax({
type: "post",
async: true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url: "/Region/toPieChart", //请求发送到dataActiont处
data: {},
dataType: "json", //返回数据形式为json
success: function (result) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
if (result) {
for (var i = 0; i < result.length; i++) {
names.push(result[i].kind);
values.push(result[i].count);
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
title: {
text: '图书数据'
},
tooltip: {
trigger: 'item',
},
legend: {
data: ['数量']
},
xAxis: {
data: names
},
yAxis: {
type: 'value'
},
series: [{
// 根据名字对应到相应的系列
name: '数量',//薪资 series not exists. Legend data should be same with series name or data name.
type: 'bar',
data: values,
}]
});
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});//end ajax
});
</script>
</body>
</html>
运行结果
ECharts柱形图示例2
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>柱形图表2</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
var names = []; //横坐标数组(实际用来盛放X轴坐标值)
var values = []; //纵坐标数组(实际用来盛放Y坐标值)
//页面加载完毕时获取数据
$(function () {
$.ajax({
type: "post",
async: true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url: "/Region/toPieChart", //请求发送到dataActiont处
data: {},
dataType: "json", //返回数据形式为json
success: function (result) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
if (result) {
for (var i = 0; i < result.length; i++) {
names.push(result[i].kind);
values.push(result[i].count);
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({
title: {
text: '各类图书数量柱形图'
},
tooltip: {
trigger: 'item'
},
legend: {
data: '图书数量'
},
xAxis: {
data: names
},
yAxis: {},
series: [{
name: '图书数量',
type: 'bar',
data: values,
}]
//加载数据图表
});
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});//end ajax
})
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
运行结果
ECharts饼图示例
<!DOCTYPE html>
<html style="height: 100%">
<head>
<title>饼图</title>
<meta charset="utf-8">
<!-- 引入 jquery.js -->
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
var res = [];
option = {
title: {
text: '各类图书比例情况',
subtext: '饼图',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter:'{a} <br/>{b} : {c} ({d}%)' //添加比例
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '图书数量',
type: 'pie',
radius: '50%',
data: res
/* [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
]*/,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//页面加载完毕时获取数据
$(function () {
$.ajax({
url: "/Region/toPieChart",
dataType: "json",
type: "post",
success: function (data) {
debugger
//把后台返回的数据给数组赋值
$.each(data, function (key, v) {
res.push({
value: v.count,
name: v.kind
});
})
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
})
})
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
运行结果