您的位置：首页 > 编程语言 > Java开发

Springboot+echarts实现可视化

2020-03-11 17:51 591 查看

现在在做毕设，做一个电商平台日志分析系统，需要结合可视化，达到一个直观的效果

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项目

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Springboot echarts 可视化
相关文章推荐
新的分享
章节导航