数据可视化—ECharts图表的应用

Echarts整合spring boot进行开发

一、开始前的准备

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、最终效果图

数据可视化—ECharts图表的应用

posted on 2021-01-25 21:44 古德来客大龄阅读(153) 评论(0) 编辑收藏举报

刷新页面返回顶部

谷稻辣客

公告

View Post

数据可视化—ECharts图表的应用

数据可视化—ECharts图表的应用

Echarts整合spring boot进行开发