微前端架构如何改变企业的开发模式与效率提升
387
2023-07-05
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
List
return all;
}
}
@Service
public class VisualInterfaceImpl implements VisualInterface {
@Autowired
VisualMapper visualMapper;
@Override
public List
List
return totals;
}
}
@Mapper
public interface VisualMapper {
List
}
date,total
select
from keyword
3.前端代码:
<!Dhttp://OCTYPE html>
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项目
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~