Springboot+echarts實現視覺化
阿新 • • 發佈:2020-01-07
現在在做畢設,做一個電商平臺日誌分析系統,需要結合視覺化,達到一個直觀的效果
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專案
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。