springboot搭建Charts圖形
- 2019 年 12 月 10 日
- 筆記
前言
最近在做一個線上監控項目需要用圖形顯示，網上調用基本使用Charts顯示，從網上調研可以採用兩種方式展示數據，一種是通過後端把數據組合成JSON在傳到前端渲染，一種是在前端渲染，數據通過後端給，不同之處是數據組合方式不同，今天演示後端渲染，因為後端處理數據比較容易，前端處理數據比較麻煩，所以採用後端處理。
效果
引入關鍵pom.xml
<!-- 引入 echarts.jar 源碼位置： https://gitee.com/free/ECharts.git --> <dependency> <groupId>com.github.abel533</groupId> <artifactId>ECharts</artifactId> <version>3.0.0.6</version> </dependency> <!--GsonOption必須--> <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> <version>2.6.2</version> <scope>compile</scope> <optional>true</optional> </dependency>
後端Controller層
@GetMapping("/getkey") public String getKeyInfo(Model model) { model.addAttribute("datanums", umpKeyInfoService.optionData()); return "keyinfo"; }
介面層
/** * 直接獲取數據 * @return str */ String optionData();
業務實現層
@Override public String optionData() { EnhancedOption option = new EnhancedOption(); option.tooltip().trigger(Trigger.axis); option.legend("郵件營銷", "聯盟廣告", "直接訪問", "搜索引擎"); option.toolbox().show(true); option.calculable(true); option.xAxis(new CategoryAxis().boundaryGap(false).data("周一", "周二", "周三", "周四", "周五", "周六", "周日")); option.yAxis(new ValueAxis()); option.series(new Line().smooth(true).name("郵件營銷").stack("總量").symbol(Symbol.none).data(120, 132, 301, 134, new LineData(90, Symbol.droplet, 5), 230, 210)); LineData lineData = new LineData(201, Symbol.star, 15); lineData.itemStyle().normal().label().show(true).textStyle().fontSize(20).fontFamily("微軟雅黑").fontWeight("bold"); option.series(new Line().smooth(true).name("聯盟廣告").stack("總量").symbol("image://http://echarts.baidu.com/doc/asset/ico/favicon.png").symbolSize(8).data(120, 82, lineData, new LineData(134, Symbol.none), 190, new LineData(230, Symbol.emptypin, 8), 110)); //把數據轉成string return option.toString(); }
前端頁面
引入資源
<script src="js/echarts.min.js" th:src="@{/js/echarts.min.js}"></script>
<div class="col-md-6 col-sm-6 col-xs-12"> <div class="x_panel"> <div class="x_title"> <h2>學習 <small>調用次數</small></h2> <ul class="nav navbar-right panel_toolbox"> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> </li> <div id="keyTimeTwo" style="width: 600px;height:400px;"></div> <li><a class="close-link"><i class="fa fa-close"></i></a> </li> </ul> <div class="clearfix"></div> </div> <div class="x_content"> <canvas id="canvasDoughnut"></canvas> </div> </div> </div> //獲取Controller層數據並且表標籤為隱藏 <input type="hidden" th:value="${datanums}" id="numsvv"/> <script type="text/javascript"> var datachart=$("#numsvv").val(); //通過id定位把圖渲染到頁面 var twoTimeChart = echarts.init(document.getElementById('keyTimeTwo')); //注意這邊必須這樣寫，否在不會顯示數據 optiondata = JSON.parse(datachart); //載入數據 twoTimeChart.setOption(optiondata); </script>
總結
以上是小小的演示，其實影像樣式很多，大家可以到pom文件中的源碼地方，慢慢挑選自己喜歡的，如果沒有資料估計需要很長時間才能做出來。謝謝大家，願大家少走彎路。
