一篇读懂springboot用echarts实现实时柱状图和饼状图查询
生活随笔
收集整理的這篇文章主要介紹了
一篇读懂springboot用echarts实现实时柱状图和饼状图查询
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.業務說明
將數據庫中的數據分別以柱狀圖和餅狀圖呈現出來
gitee項目路徑：https://gitee.com/ziac/ls.git
2.1 柱狀圖需要引入的js
建議去echarts官網直接用方法三定制下載(本人也是如此)
地址：https://echarts.apache.org/zh/builder.html
默認，代碼壓縮可以不選
2.2 柱狀圖具體實現
我是先在首頁上暴露一個跳轉的按鈕
<input type="button" value="實時柱狀圖" onclick="location.href='/doColumnar'">然后用springmvc進行頁面跳轉以Ajax方式訪問
/*跳轉到柱狀圖前端頁面*/@RequestMapping("/doColumnar")public String doColumnar() {return "merch-columnar";}merch-columnar.html頁面
<body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));// 顯示標題，圖例和空的坐標軸myChart.setOption({title: {text: '商品庫存實時柱狀圖查詢'},tooltip: {},legend: {data: ['庫存']},xAxis: {data: []},yAxis: {},series: [{name: '庫存',type: 'bar',data: []}]});// 一、將data2.json中data的name轉化成數組(將名稱提取出來并放到一個新數組里)function convertMonthToArray(resule) {let data = resule.data;let arr = [];for (let i = 0; i < data.length; i++) {// 1、獲取data中的name屬性console.log(data[i].name);// 2、將name屬性放到一個新的數組里//debugger;arr.push(data[i].name);}console.log(arr);// 3、返回arr數組return arr;}//二、將data2.json中庫存量裝換成數組function convertIntervalDaysToArray(resule) {let data = resule.data;let arr = [];for (let i = 0; i < data.length; i++) {arr.push(data[i].stock);}return arr;}// 三、異步請求數據myChart.showLoading();$.get('http://localhost:8080/merch/findAll').done(function (resule) {myChart.hideLoading();// 獲的X，函數方法要傳參，不然無意義var xAxisMonth = convertMonthToArray(resule);// 獲的Yvar yAxisIntervalDays = convertIntervalDaysToArray(resule);myChart.setOption({xAxis: {// 根據data2.json獲取需要的值data: xAxisMonth},yAxis: {},series: [{name: '庫存',type: 'bar',// 根據data2.json獲取需要的值data: yAxisIntervalDays}]});})</script> </body> /*后臺查詢所有商品，前臺展現json(+柱狀圖)*/@RequestMapping("merch/findAll")@ResponseBodypublic JsonResult findAll(){return new JsonResult().success(merchService.findMerchs());}這里的JsonResult是個自己寫的工具類API(注解方式還要導入lombok依賴)
@Data @Accessors(chain = true) @NoArgsConstructor @AllArgsConstructor public class JsonResult implements Serializable {private Integer status; //200表示成功，201表示失敗private String msg; //服務器返回的提示信息private Object data; //服務器返回的數據//定義JsonResult封裝對象public static JsonResult fail(){return new JsonResult(201,"服務器執行失敗",null);}public static JsonResult success(Object data){return new JsonResult(200,"服務器執行成功",data);}public static JsonResult success(String msg, Object data){return new JsonResult(200,msg,data);} }service層和dao層數據庫都是很簡單的語句，會返回一個List<pojo對象>，如果還有點模糊的話可以往上翻翻我的gitee網站
2.3 圖片展示
有點小bug，我前端數組里明明有全部的name屬性，結果沒全部展現，不過鼠標飄過它會顯示，希望能有大神指點
3.1 餅狀圖需要引入的js
其實大致思路同上，我就直接上代碼了
<script src="/jquery.min.js"></script><script src="/echarts.js"></script><script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>3.2 餅狀圖具體實現
<input type="button" value="實時餅狀圖" onclick="location.href='/doPieChart'"> /*跳轉到餅狀圖頁面*/@RequestMapping("/doPieChart")public String doPieChart() {return "merch-pieChart";} <body style="height: 100%; margin: 0"><div id="container" style="height: 100%"></div><script type="text/javascript">var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};var option;option = {title: {text: '商品庫存實時餅狀圖查詢',subtext: '純屬虛構(才怪)',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left',},series: [{name: '訪問來源',type: 'pie',radius: '50%',data: [],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// 使用剛指定的配置項和數據顯示圖表if (option && typeof option === 'object') {myChart.setOption(option);}$(function () {var servicedata = [];$.ajax({url: "/merch/findAll2",type: "post",dataType: "json",success: function (data) {if (data) {var obj = eval(data);for (var i = 0; i < obj.length; i++) {var sum = new Object();sum.name = data[i].name;sum.value = data[i].stock;servicedata[i] = sum;}}myChart.setOption({series: [{//根據名字對應到相應的系列name: '訪問來源',data: servicedata}]})}})})</script> </body> /*后臺查詢所有商品,前臺展現json(+餅狀圖)*/@RequestMapping(value = "merch/findAll2",produces = "application/json;charset=utf-8", method = RequestMethod.POST)@ResponseBodypublic List<Merch> findAll2(){List<Merch> merchs = merchService.findMerchs();return merchs;}3.3 圖片展示
OK，至此一個簡單的柱狀圖和餅狀圖就完成了，如果對你有幫助最好一件三連哈!
總結
以上是生活随笔為你收集整理的一篇读懂springboot用echarts实现实时柱状图和饼状图查询的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于URL重写
- 下一篇： 2022中国新时代100大建筑公布，重庆