微客导航 » 文章资讯 » Springboot+echarts实现可视化

Springboot+echarts实现可视化

2023-08-04 07:53:04 299

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

1.搭建springboot项目，maven搭建，这是项目整体架构

2.后台代码：

@RestController
@RequestMapping("/wanglk_bds")
publicclassVisualController{

@Autowired
privateVisualInterfacevisualInterface;

/**
*每一天的访问用户量
*@return
*/
@RequestMapping(value="/bar-simple",method=RequestMethod.GET,produces="application/json")
@ResponseBody
publicListgetDateTotal(){
Listall=visualInterface.getAll();

returnall;

}
}

@Service
publicclassVisualInterfaceImplimplementsVisualInterface{

@Autowired
VisualMappervisualMapper;

@Override
publicListgetAll(){
Listtotals=visualMapper.selectAllFromTable();

returntotals;
}
}

@Mapper
publicinterfaceVisualMapper{
ListselectAllFromTable();
}












date,total



select

fromkeyword

3.前端代码：

vardom=document.getElementById("mainChart"); varmyChart=echarts.init(dom); myChart.clear(); $.ajax({ method:'get', url:'http://localhost:8888/wanglk_bds/bar-simple', dataType:'json', success:function(data){ varoption={ 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项目

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Springboot+echarts实现可视化

热门推荐

随机推荐