Echarts集成springboot+mybatis（二）
Echarts集成springboot+mybatis（二）
本篇文章主要用于记录自己新学的东西，为什么用springboot+mybatis呢，最近用的比较多，而且也很方便，搭建也很快，springboot也是目前比较火的框架，而本篇展示只是把数据从数据库获取返回给echarts展示的demo，并没有过多业务
话不多说，开始：一个启动类，mysql包，mybatis包什么的maven弄一下，直接上代码，很简单的
model
sorceResult
//存储饼状图属性到result返回给前端ajax接收
public class sorceResult {
public int Ksid;
public sorceResult(int ksid, int stuid, String kname, int value, String name) {
Ksid = ksid;
Stuid = stuid;
Kname = kname;
this.value = value;
this.name = name;
}
public int getKsid() {
return Ksid;
}
public void setKsid(int ksid) {
Ksid = ksid;
}
public int Stuid;
public String Kname;
public sorceResult(String kname) {
Kname = kname;
}
@Override
public int hashCode() {
return super.hashCode();
}
@Override
public boolean equals(Object obj) {
return super.equals(obj);
}
@Override
protected Object clone() throws CloneNotSupportedException {
return super.clone();
}
@Override
protected void finalize() throws Throwable {
super.finalize();
}
public int getStuid() {
return Stuid;
}
public void setStuid(int stuid) {
Stuid = stuid;
}
public String getKname() {
return Kname;
}
public void setKname(String kname) {
Kname = kname;
}
public int value;
public String name;
public int getValue() {
return value;
}
public void setValue(int value) {
this.value = value;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public sorceResult(int value, String name) {
this.value = value;
this.name = name;
}
@Override
public String toString() {
return "sorceResult{" +
"value=" + value +
", name='" + name + '\'' +
'}';
}
}
TotalAchie
public class TotalAchie {
private Integer Ksid;
private Integer Stuid;
private Integer xztfenshu;
private Integer zhgfenshu;
private Integer zongfenshu;
private String Kname;
private Integer xztbiaozhun;
private Integer zhgbiaozhun;
private Integer zongbiaozhun;
@Override
public String toString() {
return "zongcj{" +
"Ksid=" + Ksid +
", Stuid=" + Stuid +
", xztfenshu=" + xztfenshu +
", zhgfenshu=" + zhgfenshu +
", zongfenshu=" + zongfenshu +
", Kname='" + Kname + '\'' +
", xztbiaozhun=" + xztbiaozhun +
", zhgbiaozhun=" + zhgbiaozhun +
", zongbiaozhun=" + zongbiaozhun +
'}';
}
public Integer getZhgfenshu() {
return zhgfenshu;
}
public void setZhgfenshu(Integer zhgfenshu) {
this.zhgfenshu = zhgfenshu;
}
public String getKname() {
return Kname;
}
public void setKname(String kname) {
Kname = kname;
}
public Integer getXztbiaozhun() {
return xztbiaozhun;
}
public void setXztbiaozhun(Integer xztbiaozhun) {
this.xztbiaozhun = xztbiaozhun;
}
public Integer getZhgbiaozhun() {
return zhgbiaozhun;
}
public void setZhgbiaozhun(Integer zhgbiaozhun) {
this.zhgbiaozhun = zhgbiaozhun;
}
public Integer getZongbiaozhun() {
return zongbiaozhun;
}
public void setZongbiaozhun(Integer zongbiaozhun) {
this.zongbiaozhun = zongbiaozhun;
}
public Integer getKsid() {
return Ksid;
}
public void setKsid(Integer ksid) {
Ksid = ksid;
}
public Integer getStuid() {
return Stuid;
}
public void setStuid(Integer stuid) {
Stuid = stuid;
}
public Integer getXztfenshu() {
return xztfenshu;
}
public void setXztfenshu(Integer xztfenshu) {
this.xztfenshu = xztfenshu;
}
public Integer getZhegfenshu() {
return zhgfenshu;
}
public void setZhegfenshu(Integer zhegfenshu) {
this.zhgfenshu = zhegfenshu;
}
public Integer getZongfenshu() {
return zongfenshu;
}
public void setZongfenshu(Integer zongfenshu) {
this.zongfenshu = zongfenshu;
}
}
dao
@Mapper
public interface TotalAchieDao {
List<TotalAchie> selectfenshu(int Stuid);
}
mapper
<select id="selectfenshu" resultType="com.demo.model.TotalAchie">
SELECT * FROM zongcj WHERE Stuid = #{Stuid};
</select>
server
public interface TotalAchieService {
List<TotalAchie> selectfenshu(int Stuid);
}
serverimpl
@Service
public class TotalAchieServiceImpl implements TotalAchieService {
@Autowired
private TotalAchieDao totalAchieDao;
@Override
public List<TotalAchie> selectfenshu(int Stuid) {
return totalAchieDao.selectfenshu(Stuid);
}
}
controller
@Controller
public class TotalAchieEchartsController {
@Autowired
private TotalAchieService totalAchieService;
/**
* 柱形图
* @return
*/
@PostMapping("/histogram")
@ResponseBody
public List<sorceResult> getScore(Integer Stuid) {
List<TotalAchie> zs= totalAchieService.selectfenshu(Stuid);
List<sorceResult> results = new ArrayList<sorceResult>();
System.out.println(zs);
for (TotalAchie zong : zs) {
//封装到一个result
sorceResult result = new sorceResult(zong.getZongfenshu(),zong.getKname());
results.add(result);
}
return results;
}
}
后台就是获取个数据t，一个查询调出放进results，前端用ajax从url指定获取results集合
Histogram.js
(function (window) {
////////////////////////////柱状图
var init = function (Stuid) {
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data: ['成绩']
},
xAxis: {
data: [],
axisLabel: {
interval:0,
// rotate:45, //代表逆时针旋转45度
}
},
yAxis: {},
series: [{
name: '成绩',
type: 'bar',
data: []
}]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names = []; //类别数组（实际用来盛放X轴坐标值）
var nums = []; //销量数组（实际用来盛放Y坐标值）
$.ajax({
type: "post",
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url: "/histogram", //请求发送到TestServlet处
data: {
Stuid:Stuid
},
dataType: "json", //返回数据形式为json
success: function (results) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (results!=null) {
for (var i = 0; i < results.length; i++) {
names.push(results[i].name); //挨个取出类别并填入类别数组
}
for (var i = 0; i < results.length; i++) {
nums.push(results[i].value); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '成绩',
data: nums
}]
});
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
};
window.init = init;
}(window));
说白了就是从后台获取，通过ajax传出，把值放到echarts的data里面。
一个Echarts+springboot+mybatis的demo就完成啦
