饼图
package com.sxt.bus.controller;
@Controller
@RequestMapping("tjfx")
public class TjfxController {
@Autowired
private CustomerService customerService;
@Autowired
private RentService rentService;
/**
* 跳转到客户地区统计
*/
@RequestMapping("toCustomerAreaTj")
public String toCustomerAreaTj(){
return "tjfx/customerAreaTj";
}
/**
* 得到客户数据渲染饼图
*/
@RequestMapping("loadCustomerAreaJson")
@ResponseBody
public List<BaseBean> loadCustomerAreaJson(){
return this.customerService.queryCustomerArea();
}
}
CustomerService
List<BaseBean> queryCustomerArea();
CustomerServiceImpl
@Override
public List<BaseBean> queryCustomerArea(){
return this.custommer.queryCustomer();;
}
CustomerMapper
List<BaseBean> queryCustomerArea();
CustomerMapper.xml
<!-- 查询客户地区统计 -->
<select id="queryCustomerArea" resultType="com.sxt.bus.domain.BaseBean">
select count(1) as value,address as name from bus_customers GROUP BY address;
</select>
BaseBean
package com.sxt.bus.domain;
public class BaseBean {
private Double value;
private String name;
public Double getValue() {
return value;
}
public void setValue(Double value) {
this.value = value;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="${ctx }/resources/js/echarts.min.js"></script>
<script type="text/javascript" src="${ctx }/resources/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$.post("${ctx}/tjfx/loadCustomerAreaJson.action",function(data){
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title : {
text: '客户地区统计',
subtext: '汽车出租系统',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data:data
},
series : [
{
name: '客户数量',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//给图形设置参数
myChart.setOption(option, true);
});
</script>
</body>
</html>
柱子图
Controller
/**
* 跳转到五、 业务员年度销售额柱子图的页面
*
*/
@RequestMapping("toOpernameSalMoneyYearTj")
public String toOpernameSalMoneyYearTj(){
return "tjfx/opernameSalMoneyYearTj";
}
/**
* 得到业务员年度销售额数据渲染格柱图
*/
@RequestMapping("loadOpernameSalMoneyYearJson")
@ResponseBody
public ColumnBean loadOpernameSalMoneyYearJson(String year){
ColumnBean columnBean=new ColumnBean();
List<BaseBean> baseBeans=this.rentService.queryOpernameSalMoneyYear(year);
for (BaseBean b : baseBeans) {
columnBean.getNames().add(b.getName());
columnBean.getValues().add(b.getValue());
}
return columnBean;
}
RentService
List<BaseBean> queryOpernameSalMoneyYear(String year);
RestServiceImpl
@Override
public List<BaseBean> queryOpernameMoneyYear(String year){
return this.rentMapper.queryOpernameSalMoneyYear(year);
}
RentMapper
List<BaseBean> queryOpernameSqlMoneyYear(String year);
RentMapper.xml
<!-- 业务员年度销售额数据 -->
<select id="queryOpernameSalMoneyYear" resultType="com.sxt.bus.domain.BaseBean">
select
sum(price) as value,opername as name from bus_rents where
date_format(createtime,'%Y')=#{value} GROUP BY opername
</select>
ColumnBean
package com.sxt.bus.domain;
import java.util.ArrayList;
import java.util.List;
public class ColumnBean {
//名字
private List<String> names=new ArrayList<>();
//销售额
private List<Double> values=new ArrayList<>();
public List<String> getNames() {
return names;
}
public void setNames(List<String> names) {
this.names = names;
}
public List<Double> getValues() {
return values;
}
public void setValues(List<Double> values) {
this.values = values;
}
}
前端页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="${ctx }/resources/easyui/themes/metro/easyui.css" />
<link rel="stylesheet" type="text/css" href="${ctx }/resources/css/wu.css" />
<link rel="stylesheet" type="text/css" href="${ctx }/resources/css/icon.css" />
</head>
<body style="height: 100%; margin: 0">
<!-- 查询条件 -->
<div class="easyui-panel" data-options="title:'查询条件,iconCls:'icon-search'" style="text-align: center;">
<select class="easyui-combobox" id="year" name="year" label="请选择查询年份:" labelWidth="50%" labelPosition="left" style="width:50%;">
<c:forEach var="sn" begin="2000" end="2025">
<option value="${sn }">${sn }</option>
</c:forEach>
</select>
<a href="javascript:void(0)" iconCls="icon-search" class="easyui-linkbutton" onclick="doSearch()" style="width:80px">查询</a>
</div>
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="${ctx }/resources/js/echarts.min.js"></script>
<script type="text/javascript" src="${ctx }/resources/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="${ctx }/resources/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx }/resources/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
//默认选择当前年
var date=new Date();
var year=date.getFullYear();
$("#year").val(year);
initColumn(year);
function doSearch(){
var year=$("#year").val();
initColumn(year);
}
function initColumn(year){{}
$.post("${ctx}/tjfx/loadOpernameSalMoneyYearJson.action",{year:year},function(obj){
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '坐标轴刻度与标签对齐';
option = {
title : {
text: '业务员年度销售额柱子图',
subtext: '汽车出租系统',
x:'center'
},
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: "{a} <br/>{b} : {c} (￥)"
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : obj.names,
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'销售额',
type:'bar',
barWidth: '60%',
data:obj.values
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
});
}
</script>
</body>
</html>
曲线图
LineBean
package com.sxt.bus.domain;
public class LineBean {
private Double p1;
private Double p2;
private Double p3;
private Double p4;
private Double p5;
private Double p6;
private Double p7;
private Double p8;
private Double p9;
private Double p10;
private Double p11;
private Double p12;
public Double getP1() {
return p1;
}
public void setP1(Double p1) {
this.p1 = p1;
}
public Double getP2() {
return p2;
}
public void setP2(Double p2) {
this.p2 = p2;
}
public Double getP3() {
return p3;
}
public void setP3(Double p3) {
this.p3 = p3;
}
public Double getP4() {
return p4;
}
public void setP4(Double p4) {
this.p4 = p4;
}
public Double getP5() {
return p5;
}
public void setP5(Double p5) {
this.p5 = p5;
}
public Double getP6() {
return p6;
}
public void setP6(Double p6) {
this.p6 = p6;
}
public Double getP7() {
return p7;
}
public void setP7(Double p7) {
this.p7 = p7;
}
public Double getP8() {
return p8;
}
public void setP8(Double p8) {
this.p8 = p8;
}
public Double getP9() {
return p9;
}
public void setP9(Double p9) {
this.p9 = p9;
}
public Double getP10() {
return p10;
}
public void setP10(Double p10) {
this.p10 = p10;
}
public Double getP11() {
return p11;
}
public void setP11(Double p11) {
this.p11 = p11;
}
public Double getP12() {
return p12;
}
public void setP12(Double p12) {
this.p12 = p12;
}
}
Controller
/**
* 跳转到六、 公司年度月份销售额曲线图
*
*/
@RequestMapping("toYearSaleMoneyTj")
public String toYearSaleMoneyTj(){
return "tjfx/yearSaleMoneyTj";
}
/**
* 得到业务员年度销售额数据渲染格柱图
*/
@RequestMapping("loadYearSaleMoneyJson")
@ResponseBody
public Double[] loadYearSaleMoneyJson(String year){
// Double[] doubles=new Double[12];
Double[] dbs=this.rentService.queryYearSaleMoney01(year);
for (int i = 0; i < dbs.length; i++) {
if(null==dbs[i]){
dbs[i]=0.0;
}
}
LineBean lineBean=this.rentService.queryYearSaleMoney02(year);
return dbs;
}
/**
* 得到业务员年度销售额数据渲染格柱图
*/
@RequestMapping("loadYearSaleMoneyJson2")
@ResponseBody
public List<Double> loadYearSaleMoneyJson2(String year){
List<Double> doubles=new ArrayList<>();
LineBean lineBean=this.rentService.queryYearSaleMoney02(year);
if(null!=lineBean){
doubles.add(lineBean.getP1()==null?0.0:lineBean.getP1());
doubles.add(lineBean.getP2()==null?0.0:lineBean.getP2());
doubles.add(lineBean.getP3()==null?0.0:lineBean.getP3());
doubles.add(lineBean.getP4()==null?0.0:lineBean.getP4());
doubles.add(lineBean.getP5()==null?0.0:lineBean.getP5());
doubles.add(lineBean.getP6()==null?0.0:lineBean.getP6());
doubles.add(lineBean.getP7()==null?0.0:lineBean.getP7());
doubles.add(lineBean.getP8()==null?0.0:lineBean.getP8());
doubles.add(lineBean.getP9()==null?0.0:lineBean.getP9());
doubles.add(lineBean.getP10()==null?0.0:lineBean.getP10());
doubles.add(lineBean.getP11()==null?0.0:lineBean.getP11());
doubles.add(lineBean.getP12()==null?0.0:lineBean.getP12());
}
return doubles;
}
RentService
Double[] queryYearSaleMoney01(String year);
LineBean queryYearSaleMoney02(String year);
RentServiceImpl
@Override
public Double[] queryYearSalMoney01(String year){
return this.rentMapper.queryYearSale01(year);
}
@Override
public LineBean queryYearSalMoney01(String year){
return this.rentMapper.queryYearSale02(year);
}
RentMapper
Double[] queryYearSale01(String year);
LineBean queryYearSale02(String year);
RentMapper.xml
<!-- 公司年度销售额 -->
<select id="queryYearSale01" resultType="java.lang.Double">
select sum(price) as p1
from bus_rents where
DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'01') UNION all
select
sum(price) as p1 from bus_rents where
DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'02') UNION all
select
sum(price) as p1 from bus_rents where
DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'03') UNION all
select
sum(price) as p1 from bus_rents where
DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'04') UNION all
select
sum(price) as p1 from bus_rents where
DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'05') UNION all
select
sum(price) as p1 from bus_rents where
DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'06') UNION all
select
sum(price) as p1 from bus_rents where
DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'07') UNION all
select
sum(price) as p1 from bus_rents where
DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'08') UNION all
select
sum(price) as p1 from bus_rents where
DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'09') UNION all
select
sum(price) as p1 from bus_rents where
DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'10') UNION all
select
sum(price) as p1 from bus_rents where
DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'11') UNION all
select
sum(price) as p1 from bus_rents where
DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'12')
</select>
<!-- 公司年度销售额 -->
<select id="queryYearSale02" resultType="com.sxt.bus.domain.LineBean">
SELECT
(select sum(price) as p1 from bus_rents where DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'01') ) AS p1,
(select sum(price) as p1 from bus_rents where DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'02') ) AS p2,
(select sum(price) as p1 from bus_rents where DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'03') ) AS p3,
(select sum(price) as p1 from bus_rents where DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'04') ) AS p4,
(select sum(price) as p1 from bus_rents where DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'05') ) AS p5,
(select sum(price) as p1 from bus_rents where DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'06') ) AS p6,
(select sum(price) as p1 from bus_rents where DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'07') ) AS p7,
(select sum(price) as p1 from bus_rents where DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'08') ) AS p8,
(select sum(price) as p1 from bus_rents where DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'09') ) AS p9,
(select sum(price) as p1 from bus_rents where DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'10') ) AS p10,
(select sum(price) as p1 from bus_rents where DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'11') ) AS p11,
(select sum(price) as p1 from bus_rents where DATE_FORMAT(createtime,"%Y%m")=CONCAT(#{value},'12') ) AS p12
from DUAL
</select>
前端页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="${ctx }/resources/easyui/themes/metro/easyui.css" />
<link rel="stylesheet" type="text/css" href="${ctx }/resources/css/wu.css" />
<link rel="stylesheet" type="text/css" href="${ctx }/resources/css/icon.css" />
</head>
<body style="height: 100%; margin: 0">
<!-- 查询条件 -->
<div class="easyui-panel" data-options="title:'查询条件,iconCls:'icon-search'" style="text-align: center;">
请选择查询年份: <select class="easyui-combobox" id="year" name="year" style="width:50%;">
<c:forEach var="sn" begin="2015" end="2025">
<option value="${sn }">${sn }</option>
</c:forEach>
</select>
<a href="javascript:void(0)" iconCls="icon-search" class="easyui-linkbutton" onclick="doSearch()" style="width:80px">查询</a>
</div>
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="${ctx }/resources/js/echarts.min.js"></script>
<script type="text/javascript" src="${ctx }/resources/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="${ctx }/resources/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx }/resources/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
//默认选择当前年
var date=new Date();
var year=date.getFullYear();
$("#year").val(year);
initLine(year);
function doSearch(){
var year=$("#year").val();
initLine(year);
}
function initLine(year){{}
$.post("${ctx}/tjfx/loadYearSaleMoneyJson.action",{year:year},function(obj){
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title : {
text: '公司年度月份销售额曲线图',
subtext: '汽车出租系统',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{b} : {c} (RMB)"
},
xAxis: {
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
yAxis: {
type: 'value'
},
series: [{
data: obj,
type: 'line'
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
});
}
</script>
</body>
</html>
3061
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
