主要技术: Springboot + SpringDataJpa
数据库:mysql
首先需要去Echarts 官方 找到需要的素材模板
并制作并生成一个 echarts.min.js 文件
创建Spring boot项目和一张简单的表
接下来后台调用查询方法就不写了 调个Controller吧
@Controller
public class EchartController {
@Autowired
EchartsService echartsService;
@GetMapping ("/")
public String index1() {
return "index1";
}
@GetMapping ("/index2")
public String index2() {
return "index2";
}
@GetMapping ("/getCate")
@ResponseBody
public List<Echarts> getCate() {
return echartsService.getCate();
}
}
在html中需引入三个文件
<script src="echarts.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
html部分:
柱形图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>柱形图</title>
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px;"></div>
</body>
<script>
$(function () {
$.ajax({
url: "/getCate",
dataType: "json",
success: function (data) {
var cate = [];
var da = [];
for (var i = 0; i < data.length; i++) {
cate.push(data[i].categories)
da.push(data[i].data)
}
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container', //指定dom元素的id
type: 'column' //指定类型--->柱形图
},
title: { //设置顶部标题
text: '柱形图'
},
xAxis: { //x轴的内容
categories: cate
},
yAxis: { //y'轴的内容
title: { //y轴标题
text: '人口(百万)'
},
},
plotOptions: { //设置柱状内容
column: {
dataLabels: {
border: 1,
align: 'left',
enabled: true,
rotation: 270,
x: 2, //设置字体角度旋转
y: -10,
inside: true, //设置是否将数值存在柱状条里面
style: { //设置字体
fontWeight: 'bold',
fontSize: '14px',
color: 'black'
}
}
}
},
series: [{ //柱状条的数值
// data: data
data: da
}]
});
}
})
});
</script>
</html>
饼状图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>饼状图</title>
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px;"></div>
</body>
<script>
$(function () {
$.ajax({
url: "/getCate",
dataType: "json",
success: function (data) {
var cate = [];
var da = [];
for (var i = 0; i < data.length; i++) {
cate.push(data[i].categories)
da.push(data[i].data)
}
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: '柱形图'
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
// softConnector: true // by default
enabled: true,
softConnector: false,
formatter: function () {
//this 为当前的点(扇区)对象,可以通过 console.log(this) 来查看详细信息
return '<span style="color: ' + this.point.color + '"> ' + this.point.name + '值:' + this.y + ',占比' + this.percentage + '%</span>';
}
}
},
showInLegend: true // 显示在图例中
},
series: [{
type: 'pie',
name: '全球人口排行',
data: da,
}]
});
}
})
});
</script>
</html>
效果展示: