Springboot+echarts实现可视化
更新时间：2019年12月19日 10:19:22 作者：wlk_328909605
这篇文章主要为大家详细介绍了Springboot+echarts实现可视化，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
现在在做毕设，做一个电商平台日志分析系统，需要结合可视化，达到一个直观的效果
1.搭建springboot项目，maven搭建，这是项目整体架构
2.后台代码：
@RestController
@RequestMapping("/wanglk_bds")
public class VisualController {
@Autowired
private VisualInterface visualInterface;
/**
* 每一天的访问用户量
* @return
*/
@RequestMapping(value="/bar-simple",method=RequestMethod.GET,produces="application/json")
@ResponseBody
public List<DayTotal> getDateTotal(){
List<DayTotal> all = visualInterface.getAll();
return all;
}
}
@Service
public class VisualInterfaceImpl implements VisualInterface {
@Autowired
VisualMapper visualMapper;
@Override
public List<DayTotal> getAll() {
List<DayTotal> totals = visualMapper.selectAllFromTable();
return totals;
}
}
@Mapper
public interface VisualMapper {
List<DayTotal> selectAllFromTable();
}
<?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.wanglk_bds.visual.mapper.VisualMapper"> <resultMap id="BaseResultMap" type="com.wanglk_bds.visual.bean.DayTotal"> <result column="date" jdbcType="VARCHAR" property="date" /> <result column="total" jdbcType="VARCHAR" property="total" /> </resultMap> <sql id="Base_Column_List"> date,total </sql> <select id="selectAllFromTable" resultMap="BaseResultMap"> select <include refid="Base_Column_List" /> from keyword </select> </mapper>
3.前端代码：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<div id="mainChart" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<script type="text/javascript">
var dom = document.getElementById("mainChart");
var myChart = echarts.init(dom);
myChart.clear();
$.ajax({
method:'get',
url:'http://localhost:8888/wanglk_bds/bar-simple',
dataType:'json',
success:function(data){
var option = {
xAxis: {
name: '日期',
type: 'category',
data: [data[0].date,
data[1].date,
data[2].date,
data[3].date,
data[4].date,
data[5].date,
data[6].date,
data[7].date,
data[8].date,
data[9].date,
data[10].date,
data[11].date]
},
yAxis: {
name:'访问量'
},
series: [{
data: [data[0].total,
data[1].total,
data[2].total,
data[3].total,
data[4].total,
data[5].total,
data[6].total,
data[7].total,
data[8].total,
data[9].total,
data[10].total,
data[11].total],
type: 'bar'
}]
};
myChart.setOption(option, true);
}
});
</script>
</body>
</html>
4.总结：
代码没什么技术含量，都能写出来，但是过程中出现的错误不是每个人都有
1.后台 controller层使用的注解 restcontroller 返回json格式的数据
2.mybatis自动生成文件的xml出错，为解决，
3.前台使用echarts的时候，将echarts部分放进ajax的success函数中，
4.还有css和js代码的位置问题，加载先后顺序
5.端口问题
6.使用本地tomcat部署springboot项目
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了java判断一个文件是否为二进制文件的方法,涉及java针对文件的读取及编码判断技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了java中注解的实现原理详解,注解也叫元数据,例如我们常见的@Override和@Deprecated,注解是JDK1.5版本开始引入的一个特性,用于对代码进行说明,可以对包、类、接口、字段、方法参数、局部变量等进行注解,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了Java实现图片验证码具体代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了Java int与integer的对比区别的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了Spring Cloud-Ribbon的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友一起看看吧2021-03-03
SpringBoot不读取bootstrap.yml/properties文件问题
这篇文章主要介绍了SpringBoot不读取bootstrap.yml/properties文件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-12-12
这篇文章主要介绍了教你怎么实现java语言的在线编译,文中有非常详细的代码示例,对正在学习java的小伙伴们有非常好的帮助,需要的朋友可以参考下2021-04-04
因为最近学习时正好碰到这两个方法，就查阅相关资料，并通过程序实现，进行区别总结一下，所以下面这篇文章主要给大家总结介绍了关于Java中sleep()与wait()区别的相关资料，需要的朋友可以参考，下面来一起看看吧。2017-05-05
这篇文章主要介绍了SpringBoot关闭druid的页面和添加密码验证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
SpringBoot2.1.x,创建自己的spring-boot-starter自动配置模块操作
这篇文章主要介绍了SpringBoot2.1.x,创建自己的spring-boot-starter自动配置模块操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论