java实现可视化报表_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 getDateTotal(){

List all = visualInterface.getAll();

return all;

}

}

@Service

public class VisualInterfaceImpl implements VisualInterface {

@Autowired

VisualMapper visualMapper;

@Override

public List getAll() {

List totals = visualMapper.selectAllFromTable();

return totals;

}

}

@Mapper

public interface VisualMapper {

List selectAllFromTable();

}

date,total

select

from keyword

3.前端代码：

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);

}

});

4.总结：

代码没什么技术含量，都能写出来，但是过程中出现的错误不是每个人都有

1.后台 controller层使用的注解 restcontroller 返回json格式的数据

2.mybatis自动生成文件的xml出错，为解决，

3.前台使用echarts的时候，将echarts部分放进ajax的success函数中，

4.还有css和js代码的位置问题，加载先后顺序

5.端口问题

6.使用本地tomcat部署springboot项目

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。