简介
Java maven项目,spring boot + mybatis + thymeleaf + Echarts。
实现目标
- 可以访问html。
- 数据可以带入html。
- 数据可以在Echarts中使用。
实现步骤
1.引入依赖
<properties>
<spring-boot-version>2.1.1.RELEASE</spring-boot-version>
<spring-framework>5.1.3.RELEASE</spring-framework>
</properties>
<dependencies>
<!--spring boot-->
<dependency>
<!-- Import dependency management from Spring Boot -->
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-dependencies</artifactId>
<version>${spring-boot-version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<version>${spring-boot-version}</version>
<exclusions>
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
</exclusion>
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-logging</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jetty</artifactId>
<version>${spring-boot-version}</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-autoconfigure</artifactId>
<version>${spring-boot-version}</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-log4j2</artifactId>
<version>${spring-boot-version}</version>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.2</version>
</dependency>
<!-- 格式化对象,方便输出日志 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.31</version>
</dependency>
<!-- 数据库连接池 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.0.15</version>
</dependency>
<!-- mysql 驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.30</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-aop</artifactId>
<version>${spring-boot-version}</version>
</dependency>
<!-- log4j -->
<!-- https://mvnrepository.com/artifact/log4j/log4j -->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.17</version>
</dependency>
<!--http start-->
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
<version>4.5.2</version>
</dependency>
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpmime</artifactId>
<version>4.5.2</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>${spring-boot-version}</version>
</dependency>
<!--测试依赖包-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<version>${spring-boot-version}</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<!-- 表示开发的时候引入,发布的时候不会加载此包 -->
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.skyscreamer</groupId>
<artifactId>jsonassert</artifactId>
<version>1.5.0</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>${spring-framework}</version>
<scope>test</scope>
</dependency>
</dependencies>
注意:打包时候需要把前端文件打包进去。如果产生无法打包问题,填入如下代码
<build>
<resources>
<resource>
<directory>src/main/resources/static</directory>
<targetPath>${project.build.directory}/classes/static</targetPath>
</resource>
<resource>
<directory>src/main/resources/templates</directory>
<targetPath>${project.build.directory}/classes/templates</targetPath>
</resource>
</resources>
</build>
2.编写后端接口
此处自由发挥即可,注意传给前端的参数。本例中传入的是list
@RequestMapping(value = "count",method = RequestMethod.GET)
public ModelAndView count(){
return new ModelAndView("interface/countNumber","interfaceList",operationLogService.getInterfaceCount());
}
3.前端接收参数
默认路径如下:
resource/static/css,resource/static/js,resource/templates/自定义(与代码中return对应,本例中interface)/html页面名称
页面代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>接口使用统计</title>
<link href="https://cdn.bootcss.com/bootswatch/3.3.7/darkly/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.1/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container ">
<span class="navbar-brand text-center text-success" href="#">接口数据查看</span>
</div>
</nav>
<div class="container">
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#list" data-toggle="tab">
列表
</a>
</li>
<li><a href="#charts" data-toggle="tab">柱状图</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active panel panel-success" id="list">
<table class="table table-bordered table-hover">
<thead>
<th>模块</th>
<th>接口描述</th>
<th>请求次数</th>
</thead>
<tr th:each="interface : ${interfaceList}">
<td th:text="${interface.module}"></td>
<td th:text="${interface.description}"></td>
<td th:text="${interface.accessCount}"></td>
</tr>
</table>
</div>
<div class="tab-pane fade container panel panel-success" id="charts" style="height: 500px;padding-top:20px;">
</div>
</div>
</div>
<script th:inline="javascript">
/*<![CDATA[*/
$(function () {
var interfaceList = /*[[${interfaceList}]]*/ null;
var description=[];
var num=[];
var i=0;
$.each(interfaceList, function(){
description[i]=this.description;
num[i]=this.accessCount;
i++;
});
console.log(description);
console.log(num);
// 基于准备好的dom,初始化echarts实例
var contentWidth =$("#myTabContent").width();
$("#myTabContent").css("min-width",contentWidth);
$("#charts").width(contentWidth-20);
var myChart = echarts.init(document.getElementById('charts'));
option = {
title: {
x: 'center',
text: '接口访问统计',
textStyle: {
color: '#ffffff'
}
},
tooltip: {
trigger: 'item'
},
toolbox: {
show: true,
feature: {
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
grid: {
borderWidth: 0,
y: 80,
y2: 60
},
xAxis: [
{
type: 'category',
show: false,
data: description
}
],
yAxis: [
{
type: 'value',
show: false
}
],
series: [
{
name: '接口访问统计',
type: 'bar',
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
var colorList = [
'#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
];
return colorList[params.dataIndex]
},
label: {
show: true,
position: 'top',
formatter: '{b}\n{c}'
}
}
},
data: num
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
})
/*]]>*/
</script>
</body>
</html>