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" "
<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:'
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项目
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持无名。
同类资源
- WinMTR汉化版,可视化路由跟踪工具
WinMTR汉化版,可视化路由跟踪工具绿色版,经过反复测试,发现汉化并没有问题,而是IP.exe这个文件版本问题,重新下...
- wb16chinese可视化网页制作工具
wb16chinese可视化网页制作工具本文件感兴趣的可以参考一下,可视化网页制作工具WYSIWYGWebBuilder16.x中文...
- Winform可视化编辑打印模板,指定模板选择打印机打印
Winform可视化编辑打印模板,指定模板选择打印机打印,json格式自定义模板本文件感兴趣的可以参考一下,自定义...
- Java基于springboot教务管理系统
Java基于springboot教务管理系统本文件感兴趣的可以参考一下,帮助学校管理教务系统,用一个帐号解决学校教务...
- 爬虫数据清洗、导出文件,做数据可视化不错
易语言爬虫数据清洗、导出文件,做数据可视化不错例子源代码,很多同学想了解一下某个行业的薪资情况,刚好这学...
- 爬虫、服务器echarts数据可视化
爬虫、服务器echarts数据可视化例子源代码,近期完善整理了一下,全部开源出来。...
- springBootNoMaven实现定时任务功能
springBootNoMaven本文件感兴趣的可以参考一下,不使用maven环境,创建springboot项目,实现了定时任务功能简单...
- 神经网络AI智能CC可视化框架可训练识别验证码
易语言深度学习,神经网络AI智能CC可视化框架可训练识别验证码例子源代码,出现了一个CC的深度学习的框架那时...
- IDE组件设计,界面设计,可视化设计
易语言IDE组件设计,界面设计,可视化设计例子源代码,在窗口上画出各种组件,支持8方向任意调整尺寸、位置。...
- webrobot手机端UI可视化设计器开源,纯html可用于auto e4a等
webrobot手机端UI可视化设计器纯html可用于autoe4a等例子源代码,写UI一直是很多人的烦恼,为了解决这个烦恼...
- 黑月可视化设计生成界面代码模块
易语言黑月可视化设计生成界面代码模块例子,添加模块应用后直接可以查看具体的使用方法了,已经完全开源,修改...
- Echarts模块v1.5更新支持多线程,封装大量方法
易语言Echarts模块v1.5更新支持多线程,封装大量方法例子源代码,本模块封装企业级开源图表库Echarts.js。...