一、開始前的准備
Echarts官網下載：
https://echarts.baidu.com/download.html
二、開發流程
1、准備js文件
2、將js放到static資源文件夾下
3、前端頁面模板，后端Controller模板、實體模板
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>分析圖表</title> 6 <link rel="shortcut icon" th:href="@{/images/favicon.ico}" type="image/x-icon" /> 7 <script th:src="@{/js/jquery.js}"></script> 8 <script th:src="@{/js/echarts.js}"></script> 9 </head> 10 <body> 11 <!-- 為ECharts准備一個具備大小（寬高）的Dom --> 12 <div id="main" style="width: 800px;height:400px;"></div> 13 <script type="text/javascript"> 14 $(document).ready(function(){ 15 // 基於准備好的dom，初始化echarts實例 16 var myChart = echarts.init(document.getElementById('main')); 17 //數據加載完之前先顯示一段簡單的loading動畫 18 myChart.showLoading(); 19 var names=[]; //橫坐標數組（實際用來盛放X軸坐標值） 20 var values=[]; //縱坐標數組（實際用來盛放Y坐標值） 21 var year = [[${year}]]; 22 $.ajax({ 23 type : "post", 24 async : true, //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行） 25 url : "/es", //請求發送到dataActiont處 26 data : {"year":year}, 27 dataType : "json", //返回數據形式為json 28 success : function(result) { 29 //請求成功時執行該函數內容，result即為服務器返回的json對象 30 if (result.code == 1) { 31 myChart.hideLoading(); //隱藏加載動畫 32 for(var i=0;i<result.data.length;i++){ 33 names.push(result.data[i].name); 34 values.push(result.data[i].num); 35 } 36 myChart.setOption({ //加載數據圖表 37 title: { 38 text: year+'年度就業競爭力指數圖' 39 }, 40 dataset: { 41 source: { 42 'product': names, 43 'amount': values, 44 'score': values 45 } 46 }, 47 grid: {}, 48 xAxis: {name: '分數'}, 49 yAxis: {type: 'category', 50 name: '學院', 51 data: names}, 52 series: [ 53 { 54 name: '分數', 55 type: 'bar', 56 encode: { 57 // Map the "amount" column to X axis. 58 x: 'amount', 59 // Map the "product" column to Y axis 60 y: 'product' 61 }, 62 label: { 63 normal: { 64 show: true, 65 position: 'right', 66 textStyle: { 67 color: 'red' 68 } 69 } 70 }, 71 data:values 72 } 73 ] 74 }); 75 }else { 76 alert(result.msg); 77 window.close(); 78 } 79 }, 80 error : function(errorMsg) { 81 //請求失敗時執行該函數 82 alert("圖表請求數據失敗!"); 83 myChart.hideLoading(); 84 } 85 });//end ajax 86 }); 87 </script> 88 </body> 89 </html>
1 @PostMapping(value = "/es") 2 public Result allEchars(Integer year){ 3 List<Last> lastList = finalData(year); 4 List<Echars> all = new ArrayList<>(); 5 for (int i = 0; i < lastList.size(); i++) { 6 Echars e = new Echars(); 7 e.setName(lastList.get(i).getCollege()); 8 try { 9 e.setNum(Double.parseDouble(lastList.get(i).getLastEmployment())); 10 }catch (NullPointerException e1){ 11 return new Result(0,"該年度數據不全，無法進行分析"); 12 } 13 all.add(e); 14 } 15 return new Result(1,"圖表加載成功",all); 16 } 17 18 19 @GetMapping(value = "/e") 20 public ModelAndView echarts4(Integer year){ 21 ModelAndView modelAndView = new ModelAndView(); 22 modelAndView.setViewName("Echars"); 23 modelAndView.addObject("year",year); 24 return modelAndView; 25 }
1 package org.wlgzs.index_evaluation.pojo; 2 3 4 import lombok.Data; 5 6 7 /** 8 * @author zsh 9 * @company wlgzs 10 * @create 2019-04-01 9:06 11 * @Describe 圖表測試類 12 */ 13 @Data 14 public class Echars { 15 private String name; 16 private double num; 17 }
4、最終效果圖
