溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹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; }}
@Servicepublic class VisualInterfaceImpl implements VisualInterface { @Autowired VisualMapper visualMapper; @Override public List<DayTotal> getAll() { List<DayTotal> totals = visualMapper.selectAllFromTable(); return totals; }}
@Mapperpublic 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> <p id="mainChart" ></p> <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>
關于Springboot中怎么利用echarts實現可視化就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
