第二个springboot项目
结合echarts，实现mysql中income表的数据的可视化。
本项目基于第一个springboot项目，在里面添加业务代码。
1：添加echarts库
方法1：把echarts.min.js和jquery.min.js放到static目录下 //我使用这个
方法2：可以通过添加依赖 //待测试
https://search.maven.org/artifact/org.webjars/echarts/4.8.0/jar
implementation 'org.webjars:echarts:4.8.0'
在页面初始化、调用
2：创建mysql表
income表（id，名称，数值）
create table income(
id int(11) primary key,
name varchar(50),
value int(11)
)
3：核心代码
domain层
income.java
package com.scitc.mytest.domain;
import java.io.Serializable;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
import javax.xml.bind.annotation.XmlRootElement;
@Entity
@XmlRootElement //MediaType 转为 XML
@Table
public class income implements Serializable {
private static final long serialVersionUID = 1L;
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
private Long id;//实体唯一的标识
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Column(nullable = false)
private String name;
@Column(nullable = false)
private int value;
public int getValue() {
return value;
}
public void setValue(int value) {
this.value = value;
}
public income() {
}
}
repository层
创建接口IncomeRepository.java:
package com.scitc.mytest.repository;
import org.springframework.data.repository.CrudRepository;
import com.scitc.mytest.domain.income;
public interface IncomeRepository extends CrudRepository<income,Long> {
}
controller层
testController.java
package com.scitc.mytest.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import com.scitc.mytest.domain.income;
import com.scitc.mytest.repository.IncomeRepository;
@RestController
public class testController {
@Autowired
private IncomeRepository incomeRepository;
/**
* 访问入口http://localhost:8080/testIncome
* @return
*/
@RequestMapping(value = {"/testIncome"})
public ModelAndView moneyPage(){
ModelAndView mv = new ModelAndView();
mv.setViewName("users/test");
return mv;
}
/**
* 自动在test.html里面通过ajax请求控制器，返回json数据
* @return
*/
@RequestMapping(value = {"test/testIncome"})
private List<income> getIncomelist(){
List<income> incomes = new ArrayList<>();
for(income income : incomeRepository.findAll()) {
incomes.add(income);
}
return incomes;
}
}
4：页面
test.html
说明：
1：thymleaf载页面取值没问题，但是多组值绑定到echarts中没有调通
2：本页面使用的ajax请求数据，轻松实现多组数据的拆分和绑定
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script th:src="@{/jquery.min.js}"></script>
<script th:src="@{/echarts.min.js}"></script>
</head>
<body>
hello
<div id="chart1" style="600px; height: 400px;"></div>
<!-- thyleaf与echarts绑定多个值--待研究 <table>
<tr th:each="user:${incomeModel.incomeList}">
<td th:text="${user.id}">id</td>
<td th:text="${user.name}">email</td>
<td th:text="${user.value}" id="values">he</td>
</tr></table>
<input type="hidden" th:value="${incomeModel.incomeList}" id="nums"/> -->
<script>
function initIncome(data) {
var xData = [],yData = [];
for (var i = 0; i < data.length; i++) {
var item = data[i];
xData.push(item.name);
yData.push(item.value);
}
var option = {
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'value'
},
series: [{
data: yData,
type: 'bar'
}]
};
return option;
}
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chart1'));
function loadIncome(){
console.log("33333333");
$.getJSON("/test/testIncome", function(data){
console.log("jieguo:"+data);
myChart.setOption(initIncome(data));
});
}
$(function(){
loadIncome();
});
</script>
</body>
</html>
5：运行项目
页面是网址访问：localhost:8080/testIncome
