使用Echarts+springBoot连接数据库实现树状图和饼状图
自闭少年怪咖
帮助3人
一、效果展示
1.树状图
2.饼状图
二、数据库
三、pom.xml文件
-
<dependencies>
-
<dependency>
-
<groupId>org.projectlombok</groupId>
-
<artifactId>lombok</artifactId>
-
<optional>true</optional>
-
</dependency>
-
<dependency>
-
<groupId>org.springframework.boot</groupId>
-
<artifactId>spring-boot-starter-data-jpa</artifactId>
-
</dependency>
-
<dependency>
-
<groupId>mysql</groupId>
-
<artifactId>mysql-connector-java</artifactId>
-
</dependency>
-
<dependency>
-
<groupId>org.springframework.boot</groupId>
-
<artifactId>spring-boot-starter-web</artifactId>
-
</dependency>
-
-
<dependency>
-
<groupId>org.springframework.boot</groupId>
-
<artifactId>spring-boot-starter-test</artifactId>
-
<scope>test</scope>
-
<exclusions>
-
<exclusion>
-
<groupId>org.junit.vintage</groupId>
-
<artifactId>junit-vintage-engine</artifactId>
-
</exclusion>
-
</exclusions>
-
</dependency>
-
<dependency>
-
<groupId>org.springframework.boot</groupId>
-
<artifactId>spring-boot-starter-thymeleaf</artifactId>
-
</dependency>
-
<dependency>
-
<groupId>org.projectlombok</groupId>
-
<artifactId>lombok</artifactId>
-
<version>1.18.24</version>
-
</dependency>
-
</dependencies>
四、后端代码
1.项目结构
2.实体类
table1:
-
-
@Data
-
@Entity
-
@Table(name = "table1")
-
public class Table1 implements Serializable {
-
-
@Id
-
@GeneratedValue(strategy= GenerationType.IDENTITY)
-
@Column(name = "id")
-
private Integer id;
-
-
@Column(name = "name")
-
private String name;
-
-
@Column(name = "num")
-
private Integer num;
-
-
}
table2类似上面一样的
3.controller层
table1Controller
-
@RestController
-
public class Table1Controller {
-
@Autowired
-
Table1Service table1Service;
-
@RequestMapping("/firstApi")
-
public List<Table1> findAll(){
-
return table1Service.findAll();
-
}
-
}
table2Controller
-
@RestController
-
public class Table2Controller {
-
@Autowired
-
Table2Service table2Service;
-
@RequestMapping("/lastApi")
-
public List<Table2> findAll(){
-
return table2Service.findAll();
-
}
-
}
-
-
-
public class HelloSpringBoot {
-
-
(value="/hello",method = RequestMethod.GET)
-
public String sayHello(){
-
-
return "Hello Spring Boot!";
-
-
}
-
-
(value="/first",method = RequestMethod.GET)
-
public ModelAndView firstDemo(){
-
return new ModelAndView("test");
-
}
-
-
(value="/courseClickCount",method = RequestMethod.GET)
-
public ModelAndView courseClickCountStat(){
-
return new ModelAndView("demo");
-
}
-
}
4.service层
-
@Service
-
@Transactional
-
public class Table1Service {
-
@Autowired
-
Table1Dao table1Dao;
-
public List<Table1> findAll(){
-
return table1Dao.findAll();
-
}
-
}
-
@Service
-
@Transactional
-
public class Table2Service {
-
@Autowired
-
Table2Dao table2Dao;
-
public List<Table2> findAll(){
-
return table2Dao.findAll();
-
}
-
}
-
5.dao层
都实现了jpa接口,第一个属性是实体类,第二个传入的是数据库主键的类型
五、后端代码实现
树状图页面
-
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Demo</title>
-
<!-- 引入jquery-->
-
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
-
<!-- 引入 echarts.js -->
-
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
-
</head>
-
<body>
-
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
-
<div id="main" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>
-
-
<script type="text/javascript">
-
var option;
-
var arr1=[]
-
var arr2=[]
-
// 基于准备好的dom，初始化echarts实例
-
var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id
-
-
// 指定图表的配置项和数据
-
$.get("lastApi",function(result){
-
arr1=result;
-
$.each(result,function (index,item) {
-
arr2.push(item.name);
-
})
-
option={
-
title : {
-
text: '网络游戏热度统计',
-
subtext: '游戏获得的票数',
-
x:'center'
-
},
-
tooltip : {
-
trigger: 'item',
-
formatter: "{a} <br/>{b} : {c} ({d}%)"
-
},
-
legend: {
-
orient: 'vertical',
-
left: 'left',
-
data: arr2
-
},
-
series : [
-
{
-
name: '票数数',
-
type: 'pie',
-
radius : '55%',
-
center: ['50%', '60%'],
-
data:arr1,
-
itemStyle: {
-
emphasis: {
-
shadowBlur: 10,
-
shadowOffsetX: 0,
-
shadowColor: 'rgba(0, 0, 0, 0.5)'
-
}
-
}
-
}
-
]
-
};
-
myChart.setOption(option);
-
})
-
// 使用刚指定的配置项和数据显示图表。
-
-
</script>
-
</body>
-
</html>
饼状图页面
-
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title</title>
-
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
-
<!-- 引入 echarts.js -->
-
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
-
</head>
-
<body>
-
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
-
<div id="main" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>
-
-
<script type="text/javascript">
-
var option;
-
var arr1=[]
-
var arr2=[]
-
// 基于准备好的dom，初始化echarts实例
-
var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id
-
// 指定图表的配置项和数据
-
$.get("firstApi",function (result) {
-
$.each(result,function (index,item) {
-
arr1.push(item.name);
-
arr2.push(item.num);
-
})
-
option = {
-
title: {
-
text: '长沙市市长竞选榜'
-
},
-
tooltip: {},
-
legend: {
-
data:['票数']
-
},
-
xAxis: {
-
data: arr1
-
},
-
yAxis: {},
-
series: [{
-
name: '票数',
-
type: 'bar',
-
data: arr2
-
}]
-
};
-
// 使用刚指定的配置项和数据显示图表。
-
myChart.setOption(option);
-
})
-
</script>
-
</body>
-
</html>
到此springboot整合echarts完成！
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhfhkgbg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24
