Springboot+echarts实现可视化

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

1.搭建springboot项目，maven搭建，这是项目整体架构
Springboot+echarts实现可视化
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项目

Springboot+echarts实现可视化

相关推荐