话不多说,直接上干货!!!!
一,首先在数据库创建表:如下
二,搭建后端代码,通过localhost的方式,从数据库获取到这些数据.
2.1项目结构,见下图:
创建启动类,Controller,Service,ServiceImpl,mapper,poji以及xml和yml,,,,,下面将详细将具体里面都写什么代码,可以实现什么效果.
2.2 Controller(启动类省略,感觉这个没必要展示吧…)
@Controller
@CrossOrigin
public class PieController {
@Autowired
PieServiceImpl pieService;
/**
* 获取(左下饼图)质量管理的数据，对应pie表*/
@GetMapping("y")
@ResponseBody
public List<Pie> Addie(){
return pieService.Addie();
}
}2.3 Service以及ServiceImpl
2.3.1 Service (注意是接口)
public interface PieService {
List<Pie> Addie();
}2.3.2 ServiceImpl (Service的实现类)
@Service
public class PieServiceImpl implements PieService {
@Autowired
PieMapper pieMapper;
@Override
public List<Pie> Addie(){
return pieMapper.Addie();
}
}2.4 mapper (注意是接口)
@Mapper
public interface PieMapper {
List<Pie> Addie();
}2.5 pojo
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Pie {
private String aname;//车间名
private int anumber;//左下饼图
}2.6 xml文件(名字随意,自己能知道就好,但最好还是做到”见明知意”)
这里我主要写的是查询数据库的语句…..
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.xue.mapper.PieMapper">
<select id="Addie" resultType="com.xue.pojo.Pie">
select aname,anumber from pie;
</select>
</mapper>2.7 yml文件(注意文件所在的位置,层级关系)
这里写的是自己的端口号(自己定,随意),以及链接数据库的方式,还有很明显的mybatis-plush配置
注意!!!!1.连接数据库时的名称正确!!!(我这里是echarts)
2.数据库的账户及密码!!!
server:
port: 8090
servlet:
context-path: /
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
#如果和数据库处于同一台Linux系统 则127可以连接
url: jdbc:mysql://127.0.0.1:3306/echarts?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
#如果位于不同的服务器IP直连
#url: jdbc:mysql://192.168.126.129:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
username: root
password: root
#mybatis-plush配置
mybatis-plus:
type-aliases-package: com.xue.pojo
mapper-locations: classpath:/mapper/*.xml
configuration:
map-underscore-to-camel-case: true
logging:
level:
com.jt.mapper: debug如果按部就班的写到这一步,那就证明你的后端搭建成功,离页面实现更近了一大步!!!!!! 继续干!!!
2.8(也是验证后端是否搭建成功的一步,通过localhost的方式检查是否能在页面上获取到数据)
如果出先如图的数据,说明你的后台搭建成功!!至此后端的活就干完啦!!!是不是觉得很简单呀
三,编写前端(运用ajax的方式)
创建一个html文件进行代码的编写
3.1首先导入echarts.js文件
文件导入在<head>里, (这个js可以自己在官方下载,我的是和同事直接考过来的)
<script src="./echarts.min.js"></script>导入js之后,主要的流程就是写一个ajax,根据url的地址从后端获取到数据,在进行遍历及赋值。
话不多说,直接上代码!!!!
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="./echarts.min.js"></script>
<script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="main" style="width: 1150px;height:400px; padding-top: 65px"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
window.onload = function pie() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
//声明一个对象
var list = [];
var nus = [];
$.ajax({
async: true,//异步请求
data: {},
//请求方式get
type: "GET",
//请求地址
url: "http://localhost:8090/y",
//数据，json字符串
dataType: "json",
//请求成功
success: function (result) {
console.log(result);
//进行数据的遍历
$.each(result, function (index, item) {
//添加数据到对象
//物品名
list.push(item.aname);
//物品名和数量
nus.push({
name: item.aname,
value: item.anumber
});
});
console.log(list);
console.log(nus);
myChart.hideLoading();//隐藏加载动画
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
position: function(p) {
//其中p为当前鼠标的位置
return [p[0] + 10, p[1] - 10];
}
},
legend: {
itemWidth: 10,
itemHeight: 10,
orient: 'vertical',
left: 'left',
data: nus.aname,
textStyle: {
color: "#000",
fontSize: "12"
}
},
series: [
{
name: "工单执行数量",
type: "pie",
center: ["50%", "42%"],
data: nus
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
};
</script>
</body>
</html>最终实现饼图,如图
