SSM框架整合Echarts框架的简单运用

今天药忘吃喽~ 2024-04-17 17:16 67阅读 0赞

最近收到很多小伙伴的私信想要SSM+Echarts+数据库的源码，下面的例子是固定的数据，所以我把本例子下面更新了SSM+Echarts+数据库的源码有需要的自取，还是有不懂的可以在评论区评论哈。

**0）整个框架的结构图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1emVjb20_size_16_color_FFFFFF_t_70]

**1）导入maven依赖 jackson-core jack-databind,作用是：java对象与json的相互转换**

<dependency>
                <groupId>com.fasterxml.jackson.core</groupId>
                <artifactId>jackson-core</artifactId>
                <version>2.9.8</version>
            </dependency>
    
            
            <dependency>
                <groupId>com.fasterxml.jackson.core</groupId>
                <artifactId>jackson-databind</artifactId>
                <version>2.9.8</version>
            </dependency>

2)**[js文件 可以直接从网上下载][js_]**  
3）jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8" %>
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript"
                src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript"
                src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
    
        <title>饼图例子</title>
    </head>
    <body>
    
    <div id="mainChart" style="width: 600px;height:400px;">
    
    </div>
    
    <script type="text/javascript">
        //使用ajax加载数据
        $.ajax({
            method: 'post',
            url: '${pageContext.request.contextPath}/pie',
            dataType: 'json',
            success: function (data) {//data格式:[{name:启用用户,value:60},{name:未启用用户,value:30}]
                initChat(data);
            }
        });
    
        function initChat(data) {
            var myChart = echarts.init(document.getElementById('mainChart'));
            option = {
                backgroundColor: '#cccccc',
                color: ["#D53A35", "#296294"],
                title: {
                    text: '用户启用状态分析',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: formatData(data).xAxData
                },
                series: [{
                    name: '用户比例',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    color: ['#ffff00', '#ff00ff'],
                    data: formatData(data).serData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            myChart.setOption(option, true);
        };
    
        function formatData(data) {
            var xAxData = [];//启用/未启用
            var serData = [];//数值
    
            for (var i = 0; i < data.length; i++) {
                xAxData.push(data[i].name || "");
                serData.push({
                    name: data[i].name,
                    value: data[i].value || 0
                });
            }
    
            return {
                xAxData: xAxData,
                serData: serData
            };
        };
    </script>
    </body>
    </html>

4）控制层 controller

package com.example.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    @Controller
    public class EchartsController {
    
        @RequestMapping("/pie")//默认请求方式为get
        public String pie1(){
            return "pie";
        }
        @RequestMapping(value = "/pie",method = RequestMethod.POST)//处理异步请求
        @ResponseBody
        public List<Map<String,Object>> pie2(){
            List<Map<String,Object>> ls= new ArrayList<>();
            //每一组数据---一个Map对象
    
            HashMap<String, Object> map1 = new HashMap<>();
            map1.put("name","启用用户");
            map1.put("value",80);
            ls.add(map1);
            HashMap<String, Object> map2 = new HashMap<>();
            map2.put("name","未启用用户");
            map2.put("value",20);
            ls.add(map2);
            return ls;
        }
    }

5）运行效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1emVjb20_size_16_color_FFFFFF_t_70 1]  
**最后有不懂可以私信我，大家相互学习**

**SSM+Echarts+数据库的源码**

**（0）先上图看效果**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1emVjb20_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1emVjb20_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1emVjb20_size_16_color_FFFFFF_t_70 4]  
**(1.)前端页面代码**

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <base href="${pageContext.request.contextPath}/"> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
        
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
         <script src="js/echarts.min.js"></script>
           
           <script src="lib/shbCus/esl.js"></script>
            <script src="lib/shbCus/echarts.js"></script>
            <script src="lib/shbCus/config.js"></script>     
            <script src="lib/shbCus/facePrint.js"></script>
            <script src="lib/shbCus/testHelper.js"></script>
            
            	
            <style>
            	#main , #main1,#main2{ 
            		width: 80%;
            		height: 100%;
            		text-align: center;
            		margin: 0 auto;
            	}
            	#mainBT,#mainBT1{  
            	text-align: center;
            		margin: 0 auto;
            	
            	}
            </style>
    </head>
    <body>
    <body>
    	 
        
        <div id="main" style="width: 600px;height:400px;"></div>
         <div id="mainBT">
         <h2>各个满意度的顾客数量</h2>
         </div>
         <div id="main1" style="width: 600px;height:400px;"></div>
         <div id="mainBT1">
         <h2>不同级别顾客的信誉度占比</h2>
         </div>
         <div id="main2" style="width: 600px;height:400px;">
         
         </div>
         
          
     <script>
     	  var chart = echarts.init(document.getElementById('main'));
     	  chart.setOption({ 
     		 aria: { 
                 show: true
             },
             title : { 
                 text: '各等级顾客所占比例',
                 subtext: '等级划分',
                 x:'center'
             },
             tooltip : { 
                 trigger: 'item',
                 formatter: "{a} <br/>{b} : {c} ({d}%)"
             },
             legend: { 
                 orient: 'vertical',
                 left: 'left',
                 data: ['潜在客户','重点开发客户','流失客户','战略合作伙伴']
             },
             series : [
                 { 
                     name: '客户级别',
                     type: 'pie',
                     radius : '55%',
                     center: ['50%', '60%'],
                     data:[
                         
                          
                     ],
                     itemStyle: { 
                         emphasis: { 
                             shadowBlur: 10,
                             shadowOffsetX: 0,
                             shadowColor: 'rgba(0, 0, 0, 0.5)'
                         }
                     }
                 }
             ]
         
     	  });
     
          // var names=[]; //类别数组（实际用来盛放X轴坐标值）
          var nums=[];    //销量数组（实际用来盛放Y坐标值）
    $.ajax({ 
    		  url:"cusForm/getcusLevel",
    		  cache: false, 
    	      data: "time="+new Date().getTime(),
    	      async: false, 
    	      dataType:"JSON",
    	      success:function(data){ 
    	    	  if(data){ 
    	    		 
    	    		  for(var i=0;i<data.length;i++){ 
    	                  nums.push(data[i]) ;  //挨个取出销量并填入销量数组
    	              } 
    	    		  chart.setOption({ 
    	    			  series : [
    	    		             { 
    	    		                 data:[
    	    		                     { value:nums[0], name:'战略合作伙伴'}, 
    	    		                     { value:nums[3], name:'流失客户'},
    	    		                     { value:nums[2], name:'潜在客户'},
    	    		                     
    	    		                     { value:nums[1], name:'重点开发客户'},
    	    		                      
    	    		                 ]
    	    		             }
    	    		         ]
    		          });
    	    	  }
    	    	   
    	    	 
    	      },
    	      error : function(errorMsg) { 
    	            //请求失败时执行该函数
    	            alert("图表请求数据失败!");
    	            myChart.hideLoading();
    	        }
    	      
    		})
     	   
     </script>
         
         
         
      <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var chart2 = echarts.init(document.getElementById('main1'));
            chart2.setOption({ 
            	 
                tooltip: { },
                legend: { 
                    data:['数量']
                },
                xAxis: { 
                    data: ['非常不满意','不满意','一般','满意','非常满意']
                },
                yAxis: { },
                series: [{ 
                    name: '数量',
                    type: 'bar',
                    data: []
                }]
            });
           // var names=[]; //类别数组（实际用来盛放X轴坐标值）
            var nums=[];    //销量数组（实际用来盛放Y坐标值）
      $.ajax({ 
    		url:"cusForm/getSatftion",
    		  cache: false, 
    	      data: "&time="+new Date().getTime(),
    	      async: false, 
    	      dataType:"JSON",
    	      success:function(data){ 
    	    	  if(data){ 
    	    		 
    	    		  for(var i=0;i<data.length;i++){ 
    	                  nums.push(data[i]) ;  //挨个取出销量并填入销量数组
    	              } 
    	    		  chart2.setOption({ 
    		              series: [{ 
    		                  name: '数量',
    		                  type: 'bar',
    		                  data: nums
    		              }]
    		          });
    	    	  }
    	    	   
    	    	 
    	      },
    	      error : function(errorMsg) { 
    	            //请求失败时执行该函数
    	            alert("图表请求数据失败!");
    	            myChart.hideLoading();
    	        }
    	      
      		})
     
       
        </script>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var chart3 = echarts.init(document.getElementById('main2'));
            chart3.setOption({ 
            	title: { 
                    text: '信誉度星级'
                },
            		    legend: { },
            		    tooltip: { },
            		    dataset: { 
            		      
            		        	  source: [
            		        		   
      	        		        ]
            		         
            		    },
            		    xAxis: { type: 'category'},
            		    yAxis: { },
            		    // Declare several bar series, each will be mapped
            		    // to a column of dataset.source by default.
            		    series: [
            		    	
            		        { type: 'bar'},
            		        { type: 'bar'},
            		        { type: 'bar'},
            		        { type: 'bar'},
            		        { type: 'bar'}
            		    ]
            		
            });
           // var names=[]; //类别数组（实际用来盛放X轴坐标值）
           var nums=[];    //销量数组（实际用来盛放Y坐标值）
         
      $.ajax({ 
    		url:"cusForm/getCLandCCT",
    		  cache: false, 
    	      data: "&time="+new Date().getTime(),
    	      async: false, 
    	      dataType:"JSON",
    	      success:function(data){ 
    	    	  if(data){ 
    	    		  
    	    		   
    	    		  
    	    		  chart3.setOption({ 
    	    			  dataset:{ 
    	    				  source: [
    	    					  ['product', '★', '★★', '★★★','★★★★','★★★★★'],
    	        		            ['战略合作伙伴', data[0][0],data[0][1],data[0][2],data[0][3],data[0][4]],
    	        		            ['重点开发客户', data[1][0],data[1][1],data[1][2],data[1][3],data[1][4]],
    	        		            ['潜在客户',    data[2][0],data[2][1],data[2][2],data[2][3],data[2][4]],
    	        		            ['流失客户',    data[3][0],data[3][1],data[3][2],data[3][3],data[3][4]]
    	        		        ]
    	    			  }
    		          });
    	    	  }
    	    	   
    	    	 // chart2.hideLoading();
    	    	 
    	      },
    	      error : function(errorMsg) { 
    	            //请求失败时执行该函数
    	            alert("图表请求数据失败!");
    	            myChart.hideLoading();
    	        }
    	      
      		}) 
     
       
        </script>
    
    
    
    </body>
    </body>
    </html>

**(2)Controller层代码**

```java
    package com.tjetc.controller;
    
    import java.io.IOException;
    import java.util.ArrayList;
    import java.util.List;
    
    import javax.servlet.http.HttpServletResponse;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import com.tjetc.service.cusFormService;
    
    @Controller
    @RequestMapping("/cusForm")
    public class cusForm { 
    	@Autowired
    	private cusFormService cusFormService;
    	@RequestMapping("/getSatftion")
    	public void getSatftion(HttpServletResponse response) throws IOException{ 
    		int num1=cusFormService.getSat(1);
    		int num2=cusFormService.getSat(2);
    		int num3=cusFormService.getSat(3);
    		int num4=cusFormService.getSat(4);
    		int num5=cusFormService.getSat(5);
    		List<Integer> list=new ArrayList<Integer>();
    		list.add(num1);
    		list.add(num2);
    		list.add(num3);
    		list.add(num4);
    		list.add(num5);
    		response.getWriter().print(list);
    	}
    	@RequestMapping("/getcusLevel")
    	public void getcusLevel(HttpServletResponse response) throws IOException{ 
    		//战略合作伙伴
    		int num1=cusFormService.getcusLevel("1");
    		//重点开发用户
    		int num2=cusFormService.getcusLevel("2");
    		//潜在用户
    		int num3=cusFormService.getcusLevel("3");
    		//流失用户
    		int num4=cusFormService.getcusLevel("4");
    		 
    		List<Integer> list=new ArrayList<Integer>();
    		list.add(num1);
    		list.add(num2);
    		list.add(num3);
    		list.add(num4);
    		 
    		response.getWriter().print(list);
    	}
    	@RequestMapping("/getCLandCCT")
    	public void getCLandCCT(HttpServletResponse response) throws IOException{ 
    		//总得list
    		List<List<Integer>> listALL=new ArrayList<List<Integer>>();
    		//级别是1的list
    		List<Integer> list1=new ArrayList<Integer>();
    		List<Integer> list2=new ArrayList<Integer>();
    		List<Integer> list3=new ArrayList<Integer>();
    		List<Integer> list4=new ArrayList<Integer>();
    		 for(int i=1;i<5;i++){ 
    			 for(int j=1;j<6;j++){ 
    				 	String s=i+"";
    				 	if(i==1){ 
    					list1.add(cusFormService.getCLandCCT(s,j));
    				 	}
    				 	else if (i==2) { 
    				 		list2.add(cusFormService.getCLandCCT(s,j));
    					}
    				 	else if (i==3) { 
    				 		list3.add(cusFormService.getCLandCCT(s,j));
    				 	}
    				 	else if (i==4) { 
    				 		list4.add(cusFormService.getCLandCCT(s,j));
    				 	}
    				} 
    		 }
    		 
    		  listALL.add(list1);
    		  listALL.add(list2);
    		  listALL.add(list3);
    		  listALL.add(list4);
    		
    		
    		
    		 
    		
    		response.getWriter().print(listALL);
    	}
    
    }

（3）如有还不懂的小伙伴，评论区见！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1emVjb20_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/391cacf5e79046e18cb93a7fa0879dc3.png
[js_]: https://echarts.baidu.com/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1emVjb20_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/0797e7ad588440ab863a9b7476ff70ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1emVjb20_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/94bc0034e2be42079908fe3b265fe330.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1emVjb20_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d25ff9603dac43e6a10fc3d65f4b4cbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1emVjb20_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/860c7fd4249e4486b2d88d7d91692f5b.png