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

最新推荐文章于 2022-11-27 12:00:09 发布
最新推荐文章于 2022-11-27 12:00:09 发布
阅读量4.9k 收藏 30
点赞数 7
分类专栏： SSM框架 文章标签： Echarts与SSM框架的简单整合与运用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huzecom/article/details/100133185
版权

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

0）整个框架的结构图
在这里插入图片描述

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

 <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.9.8</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.8</version>
        </dependency>

2)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）运行效果图
在这里插入图片描述
最后有不懂可以私信我，大家相互学习

SSM+Echarts+数据库的源码

（0）先上图看效果

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
(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>
    <!-- 引入 echarts.js -->
    <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>
	 
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <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）如有还不懂的小伙伴，评论区见！
adobehu
关注
  • 7
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
专栏目录
ssm和echarts技术整合 Spring+SpringMVC+MyBatis整合
09-06
先对Spring+SpringMVC+MyBatis进行了整合，然后在jsp页面中加入了echarts技术。 maven项目，内有sql 可以运行，比较简单，如果不对轻喷！
SSM框架+echarts实现可视化
qq_43700270的博客
03-29 3203
SSM框架+echarts实现可视化一、前言1.编写前台页面html2.编写dao,service层代码3.编写controller层代码 一、前言 纯属个人笔记，仅供参考！！！！ ssm框架的搭建在这里就不详细搭建了，百度上有很多，这个功能在SSM框架搭建好的前提下操作。 因为本人记性不太好的原因，把自己写出来的东西做个整理和记录方便下次忘记的时候可以看看，有写的不好，或需要优化的欢迎指导，谢谢...
SSM+echart实现销售视图
pengxiang1998的博客
06-30 747
在开发SSM网上书城的过程中，博主想让该项目的订单查看页面更加直观，因此便想到了使用视图进行显示，博主使用了一个前端插件echart,我们要做的就是将查询的结果放入相应接口中，效果图如下： 博主设计了四个视图，用到了折线图，柱状图，饼状图三种视图类型，下面便以饼状图为例给大家介绍下具体实现 首先我们找到echart对饼状图的介绍以及实现代码 demo解析 <div id="main" style="width: 500px; height: 360px;"></div>//盛放视
SSM集成Echarts的简单使用
热门推荐
浅汐
05-31 2万+
首先搭建好SSM环境 此处不是重点，如果不会请自行百度查阅资料。 domain层 public class User { private int id; private String name; private int age; private int id; private String name; private int age; #省略gette...
jsp+Echarts实现图表可视化，连接数据库，从数据库拿数据
aaaaaaddddsssss的博客
06-06 7892
实现可视化的图表，jsp+mysql+eclipse，从数据库拿数据改变表格的数据算是echarts的初始入门案例的升级版。 想了解Echarts的各位大大-----》传送门 添加链接描述 效果图： 从Echarts中获得可视化图表，关于如何获得可视化图表，请详见 https://blog.csdn.net/aaaaaaddddsssss/article/details/106585094添加链接描述 通过jsp获得动态的数据，从mysql数据库中取数据 首先打开eclispe 创建一个Dynamic
SSM之echarts视频
05-02
【技术架构】 把手教你整合优雅SSM4框架： 当我们看大部分教学课堂中把SSH作为核心教学内容。但实际互联网企业应用中，SpringMVC可以完全替代Struts系列，注解方式，通过restful风格，再配上企业实战架构SpringMVC4 ， Spring 4， MyBatis3，JQuery，JQueryUI，Echarts3，Bootstrap3，Ajax堪称完美。
关于SSM与echart结合的问题总结
qq_20952287的博客
12-11 1026
这是我用ssm框架和echart图实现的效果：     以下是我遇到的问题和解决办法 1.映射文件的配置（XXMapper.xml）： 2.css，js的问题：   3.css，js地址的配置 4.ajax的同步异步问题 5.springMvc控制层的相关配置和访问页面的控制 6.存储echart图数据的数据结构： 7....
Springboot+ECharts图表显示数据库信息
wilson_m的博客
12-14 2万+
一 功能介绍        1 信息检索        用户在前台页面中输入信息，后台获取用户输入的信息进行数据库信息的检索和查询。        2 信息查询        前台通过获取用户查询到的数据以ECharts中的柱状图的形式将数据进行更加直观的显示。 二 数据库查询        1 以#传参
ssm版的统计图Echart和easyexcel
qq_55648724的博客
11-27 813
工具的使用
SSM框架使用Echarts动态数据可视化
12-18
这是使用SSM框架+Echarts实现的mysql动态数据可视化，绘制了柱形图、饼图等，包括sql文件在内，下载导入eclipse、IDEA等直接运行即可。 博客同步讲解代码：https://blog.csdn.net/ITBigGod/article/details/81041788
SSM 整合 Layui Echarts图表
06-26
案例采用前后端分离架构 后端使用经典的 SSM 框架 前端使用 Layui + Echars图表
初学者ssm框架整合echarts
09-30
使用ssm基于jsp页面整合了echarts，适合初学者学习。。
JavaEcharts:使用了SSM框架和echarts来实现制图
04-14
最近公司需求要我实现制图的要求，如图所示 问了度娘，发现了度娘自己家的echarts好像好评不断，然后找了一下基本Java的demo能跑起来的基本没有，要么太复杂了！所以我写下了这篇文章，这是最详细的了，感觉没有之一！ 开始本教程: 我们就实现一个小功能吧，查询学生的成绩并且制成图（饼状图和柱形图）。 1.创建表（newstudentinfo） CREATE TABLE `newstudentinfo` ( `id` int(11) NOT NULL COMMENT '学号', `name` varchar(20) DEFAULT NULL COMMENT '姓名', `score` decimal(4,2) DEFAULT NULL COMMENT '分数', `subject` int(11) DEFAULT NULL COMMENT '科目编号', `teache
积分管理系统java源码-SSM:整合ssm框架
06-06
前端主要使用vue.js、Bootstrap、echarts以及JQuery， * 后端基于SpringMVC、Spring、MyBatis、shiro进行开发，使用Maven构建；idea插件：lombok、 （如果采用vue.js则采用前后端分离，目前系统作为后端系统，前端...
ssm框架旅游管理系统导入可用带sql
05-29
我们这个项目有两大系统,四大接口,八大模块组成，根据登录的用户不同展示不同的功能菜单,它又是一个涉及到前台用户页面和后台系统的整合项目，整个项目中用到的框架有：后台是ssm框架，前台主要是用easyUI，ajax，...
java程序读取excel表格并存入mysql数据库详细教程
huzecom的博客
08-31 1万+
0)poi简单介绍 Apache POI是Apache软件基金会的开放源码函式库，POI提供API给Java程序对Microsoft Office格式档案读和写的功能。 HSSF － 提供读写Microsoft Excel格式档案的功能。 XSSF － 提供读写Microsoft Excel OOXML格式档案的功能。 HWPF － 提供读写Microsoft Word格式档案的功能。 HSLF ...
ssm框架echarts的使用
最新发布
05-15
SSM框架是Spring、SpringMVC和Mybatis三者的结合，是目前Java开发中主流的开发框架，可以快速地进行Web应用的开发，并且具有便捷、高效、易用等优点。而Echarts是一种基于JavaScript的开源数据可视化实现框架，具有强大的数据处理和展示能力，可以极大地提高数据展现效率和可视化效果。下面介绍一下SSM框架和Echarts的使用。 在使用SSM框架时，可以在SpringMVC中创建Controller处理请求并进行数据处理，在Controller中可以通过调用MyBatis实现与数据库操作，同时将数据封装返回给前端页面。在前端页面中，可以引入Echarts的JavaScript包，通过创建图表实例、传入数据和配置等方法，快速地实现数据的可视化效果。例如，在一个项目中，可以获取后台MySQL数据库中的数据，利用Echarts进行数据可视化展示，例如展示各省份人口数量，经过数据整理后，可以展现为一个美观的地图，并且可以进行区域切换、数据排名等操作，实现了数据展示和操作的完美结合。 总之，SSM框架和Echarts的结合既方便又高效，可以快速实现Java Web应用中数据可视化的效果，有着极大的应用价值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值