脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → Springboot echarts可视化

Springboot+echarts实现可视化

 更新时间：2019年12月19日 10:19:22   作者：wlk_328909605  
这篇文章主要为大家详细介绍了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<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项目

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

您可能感兴趣的文章:

相关文章

  • java开发中使用IDEA活动模板快速增加注释的方法

    java开发中使用IDEA活动模板快速增加注释的方法

    这篇文章主要介绍了java开发中使用IDEA活动模板快速增加注释,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-12-12
  • JavaScript实现贪吃蛇游戏

    JavaScript实现贪吃蛇游戏

    这篇文章主要为大家详细介绍了JavaScript实现贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • mybatis中的count()按条件查询方式

    mybatis中的count()按条件查询方式

    这篇文章主要介绍了mybatis中的count()按条件查询方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-01-01
  • SpringBoot文件分片上传的示例代码

    SpringBoot文件分片上传的示例代码

    分片上传在很多地方都可以使用的到，本文主要介绍了SpringBoot文件分片上传的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-12-12
  • Spring中事件发布机制及流程详解

    Spring中事件发布机制及流程详解

    这篇文章主要介绍了Spring中事件发布机制及流程详解,在分析源码的过程中,也是大量使用了事件机制,在我分析的这篇博客中,有不少地方都运用了事件发布机制,所以本文的目的是从SpringBoot中学习到事件的发布流程,需要的朋友可以参考下
    2023-11-11
  • springboot后端存储富文本内容的思路与步骤(含图片内容)

    springboot后端存储富文本内容的思路与步骤(含图片内容)

    在所有的编辑器中,大概最受欢迎的就是富文本编辑器和MarkDown编辑器了,下面这篇文章主要给大家介绍了关于springboot后端存储富文本内容的思路与步骤的相关资料,需要的朋友可以参考下
    2023-04-04
  • Java GUI编程实现在线聊天室

    Java GUI编程实现在线聊天室

    这篇文章主要为大家详细介绍了Java GUI编程实现在线聊天室，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • java中RabbitMQ高级应用

    java中RabbitMQ高级应用

    本文主要介绍了java中RabbitMQ高级应用，中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • 浅谈Spring Boot中如何干掉if else的方法

    浅谈Spring Boot中如何干掉if else的方法

    这篇文章主要介绍了Spring Boot中如何干掉if else的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • Java异常处理学习心得

    Java异常处理学习心得

    本篇文章给大家详细讲述了学习Java异常处理学习的心得以及原理介绍，对此有兴趣的朋友参考下吧。
    2018-01-01

最新评论