echarts从数据库动态获取数据实现饼图和柱状图（Springboot）
echarts从数据库动态获取数据实现饼图和柱状图
·
创建数据库,自己随便插入一些数据。
CREATE TABLE `sign` (
`id` int NOT NULL AUTO_INCREMENT,
`name` varchar(20) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
`num` varchar(20) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb3 COLLATE=utf8_unicode_ci;
1.主控制器，用于访问view.html
package com.zq.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class MainController {
@RequestMapping("/view")
public String myView(){
return "view.html";
}
}
2.控制器用于访问SignService层的getSign方法
package com.zq.controller;
import com.zq.pojo.Sign;
import com.zq.service.SignService;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;
@RestController
public class SignController {
@Resource
SignService signService;
@RequestMapping("/s")
public List<Sign> getSign(){
return signService.getSign();
}
}
3.接口定义getSign方法
package com.zq.service;
import com.zq.pojo.Sign;
import java.util.List;
public interface SignService {
List<Sign> getSign();
}
4.接口的实现，调用dao层的mapper
package com.zq.service;
import com.zq.dao.SignMapper;
import com.zq.pojo.Sign;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;
/**
* @author qimeng
*/
@Service
public class SignServiceImpl implements SignService{
/**
* @author qimeng
*/
@Resource
SignMapper signMapper;
@Override
public List<Sign> getSign() {
return signMapper.getSign();
}
}
5.mapper查询数据库内容
package com.zq.dao;
import com.zq.pojo.Sign;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
/**
* @author qimeng
*/
@Mapper
public interface SignMapper {
@Select("select * from sign")
List<Sign> getSign();
}
6.index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>打卡人数可视化</title>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
</body>
<script type="text/javascript">
//初始化echarts
function init(myChart){
let option = {
title:{
text:'ECharts 数据统计'
},
series:[{
name:'访问量',
type:'pie',
radius:'50%',
data:[
{value:0,name:'无'},
]
}]
};
myChart.setOption(option);
}
//从数据库读取数据赋值给echarts
function show(myChart){
$.ajax({
contentType : "application/json",
type : "GET",
url : "s",
dataType : "json",
success : function(data) {
//创建一个数组，
let Chart=[];
for(let i=0;i<data.length;i++){
let obj={};
obj.name=data[i].name;
obj.value=data[i].num;
Chart[i]=obj;
}
myChart.setOption({
title:{
text:'打卡人数数据统计'
},
tooltip:{},
series:[{
name:'访问量',
type:'pie',
// radius:'10%',
data:Chart,
}]
});
}
});
}
//初始化echarts实例
let myChart = echarts.init(document.getElementById("main"));
init(myChart);
show(myChart);
</script>
</html>
7.view.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>打卡人数可视化</title>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
</body>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
contentType: "application/json",
type: "GET",
url: "s",
dataType: "json",
success: function (data) {
let x = [];
let y = [];
for (let i = 0; i < data.length; i++) {
//x[i]获取json的姓名，y[i]获取json的值
x[i] = data[i].name;
y[i] = data[i].num;
}
myChart.setOption({
tooltip: {},
label: {
show: true,
position:'top',
},
legend: {},
xAxis: {
data: x
},
yAxis: {},
series: [
{
colorBy:'data',
name: '打卡次数',
type: 'bar',
data: y
}
]
});
},
error: function () {
}
})
</script>
</html>
8.运行结果（index.html）
9.view.html
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
15
0- 0
已为社区贡献1条内容
所有评论(0)