好了,话不多说,先放结果图(界面用的是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)执行相关的方法,层层调入就会拿到数据渲染到页面定义的变量中。