SSM与Echart整合

该用户很懒ha

于 2021-03-25 18:59:13 发布

阅读量690

点赞数 2

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_43541919/article/details/115215567

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

好了，话不多说，先放结果图（界面用的是bootstrap进行布局的）

步骤如下：

1 首先创建数据库，在mysql数据库中创建表结构，并插入数据

2 创建pojo类，也就是实体类对象echart.java

public class echart {
	 @SuppressWarnings("unused")
	private Integer goodsId;
	private String  goodsName;
    private int goodsTotal;
    //getter and setter method
｝

3 创建dao层,最好和mapper.xml放在一个目录下

import java.util.List;
import java.util.Map;

public interface echartmapper {

    public List<Map<String, Object>> queryForList();

}

4 创建mapper映射

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 
<mapper namespace="com.system.mapper.echartmapper">
 
    <select id="queryForList" resultType="map">
        select goodsName, goodsTotal from t_goods
    </select>
 
</mapper>

5 创建Controller

import java.util.List;
import java.util.Map;
import javax.validation.ValidationProviderResolver;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.system.service.IndexService;
@Controller
@Scope("prototype")
@RequestMapping("/admin")
public class echartController {
	@Autowired
    private IndexService  IndexService;
//    @RequestMapping("/queryForList")
//    public ModelAndView toIndex(ModelAndView mav) {
//    	 List<Map<String, Object>> dataMap=IndexService.queryForList();
//    	 System.out.println(dataMap.size());  
//    	 
//    	 System.out.println(dataMap.get(3));
//    	 //把数据定向到end.jsp页面
//    	 mav.addObject("datamap",dataMap);
//    	 mav.setViewName("/admin/end");
//         return mav;
	
 
    @RequestMapping("/echart")//需要运行的路径
    public ModelAndView toIndex() {
        ModelAndView mav = new ModelAndView("/admin/echart");//跳转的页面
        return mav;
    }
 
    @RequestMapping("/queryForList")
    public @ResponseBody List<Map<String, Object>> queryForList() {
        return  IndexService.queryForList();
    }

}

6 创建service

import java.util.List;
import java.util.Map;

public interface IndexService {
    public List<Map<String, Object>> queryForList();

}

7 创建serviceimpl

package com.system.service.impl;

import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.system.mapper.echartmapper;
import com.system.service.IndexService;
@Service
public class IndexServiceImpl implements IndexService {
	 @Autowired
	    private  echartmapper echartmapper;
	 
	    public List<Map<String, Object>> queryForList() {
	        return echartmapper.queryForList();
	    }
}

注意，一定要加@service，否则会报错

Error creating bean with name 'echartController': Unsatisfied dependency expressed through field 'IndexService'; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type 'com.system.service.IndexService' available: expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: {@org.springframework.beans.factory.annotation.Autowired(required=true)}

8 创建前端页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>柱状图</title>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css">
    
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
<style>
.contain{
width:100%;
height:auto;
background-color:#383C48;
padding-bottom:30px;
}
</style>
</head>
<body>
    <jsp:include page="top.jsp"></jsp:include>
	<div class="container contain" id="content">
		<div class="row">
			<jsp:include page="menu.jsp"></jsp:include>
			<div class="col-md-10">
				<div class="panel panel-default">
					<div class="panel-heading">
						<div class="row">
							<h1 class="col-md-5">可视化管理</h1>
						</div>
					</div>
							<!-- 柱状图容器 -->
					<div class="panel-body" style="height:400px">
					  <div id="main" style="width: 500px; height: 300px;float:right; border: 5px solid green;background-color:#fff"></div>
		            </div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
        $(function() {
            // 初始化
            //var myChart = echarts.init(document.getElementById('main'));
var myChart = echarts.init($('#main')[0]); // 注意：这里init方法的参数的javascript对象，使用jQuery获取标签时，要将jQuery对象转成JavaScript对象；
 
            // 配置图标参数
            var options = {
                title: {
                    text: '书本销售',
                    show: true, // 是否显示标题
                    subtext: '测试数据',
                    textStyle: {
                        fontSize: 18 // 标题文字大小
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['销量']
                },
                // X轴
                xAxis: {
                    data: [] // 异步请求时,这里要置空
                },
                // Y轴
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar', // 设置图表类型为柱状图
                    data: [] // 设置纵坐标的刻度(异步请求时,这里要置空)
                }]
            };
            // 给图标设置配置的参数
            myChart.setOption(options);
            myChart.showLoading(); // 显示加载动画
// 异步请求加载数据
            $.ajax({
                url: '${pageContext.request.contextPath}/admin/queryForList',
                type: 'post',
                dataType: 'json',
                success: function(data) {
                    var names = [];
                    var nums = [];
                    $.each(data, function(index, obj) {
                        names.push(obj.goodsName);
                        nums.push(obj.goodsTotal);
                    })
 
                    myChart.hideLoading(); // 隐藏加载动画
                    myChart.setOption({
                        legend: {
                            data: ['销量']
                        },
                        xAxis: {
                            data: names
                        },
                        series: [{
                            name: '销量',
                            type: 'bar', // 设置图表类型为柱状图
                            data: nums // 设置纵坐标的刻度
                        }]
                    });
                }
            });
        });
    </script>
</html>

这里的menu.jsp和top.jsp大家不用了解，只需要把bootstrap面板这一块看看，参考链接：https://www.runoob.com/bootstrap/bootstrap-panels.html

9 菜单导航栏（menu.jsp的跳转页面）

<a href="<%=request.getContextPath()%>/admin/echart">可视化管理</a>当点击该链接，就会进入controller找到相关的跳转页面，然后在跳转页面（echart.jsp）执行相关的方法，层层调入就会拿到数据渲染到页面定义的变量中。

该用户很懒ha

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
SSM与Echart整合

好了，话不多说，先放结果图（界面用的是bootstrap进行布局的）步骤如下：1 首先创建数据库，在mysql数据库中创建表结构，并插入数据2 创建pojo类，也就是实体类对象echart.javapublic class echart { @SuppressWarnings("unused") private Integer goodsId; private String goodsName; private int goodsTotal; //gett
复制链接

扫一扫