Springboot+echarts实现可视化

Z时代
2024-01-10
分类：综合

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

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>