Springboot+echarts實(shí)現(xiàn)可視化

現(xiàn)在在做畢設(shè)，做一個(gè)電商平臺(tái)日志分析系統(tǒng)，需要結(jié)合可視化，達(dá)到一個(gè)直觀的效果

成都創(chuàng)新互聯(lián)是專業(yè)的衡南網(wǎng)站建設(shè)公司，衡南接單;提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行衡南網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

1.搭建springboot項(xiàng)目，maven搭建，這是項(xiàng)目整體架構(gòu)

2.后臺(tái)代碼：

@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 >
 <head>
 <meta charset="utf-8">
 </head>
 <body >

 <script type="text/javascript" src="echarts.min.js"></script>

 <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
 <div id="mainChart" ></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.總結(jié)：

代碼沒什么技術(shù)含量，都能寫出來，但是過程中出現(xiàn)的錯(cuò)誤不是每個(gè)人都有

1.后臺(tái) controller層使用的注解 restcontroller 返回json格式的數(shù)據(jù)

2.mybatis自動(dòng)生成文件的xml出錯(cuò)，為解決，

3.前臺(tái)使用echarts的時(shí)候，將echarts部分放進(jìn)ajax的success函數(shù)中，

4.還有css和js代碼的位置問題，加載先后順序

5.端口問題

6.使用本地tomcat部署springboot項(xiàng)目

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁名稱：Springboot+echarts實(shí)現(xiàn)可視化
標(biāo)題鏈接：http://muchs.cn/article38/gceosp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、、企業(yè)網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容