这个是在控制层上面进行的代码
/**
* Copyright © 2012-2016 <a href="https://github.com/thinkgem/jeesite">JeeSite</a> All rights reserved.
*/
package com.thinkgem.jeesite.modules.jx.web;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import com.thinkgem.jeesite.common.web.BaseController;
import com.thinkgem.jeesite.modules.jx.entity.PersonnelManagement;
/**
* 统计信息Controller
* @author
* @version 2021-04-15
*/
@Controller
@RequestMapping(value = "${adminPath}/jx/driverlnformationStatistics")
public class DriverInformationStatisticsController extends BaseController {
/*@Autowired
private DriverInformationStatisticsService driverlnformationStatisticsService;
private DriverInformationStatistics driverlnformationStatistics;*/
@RequestMapping(value = {"list", ""})
public String list(PersonnelManagement personnelManagement, HttpServletRequest request, HttpServletResponse response, Model model) {
/*Page<DriverlnformationStatistics> page = driverlnformationStatisticsService.findPage(new Page<PersonnelManagement>(request, response),personnelManagement);
model.addAttribute("page", page);*/
return "modules/jx/driverlnformationStatisticsList";
}
}
吧控制层代码整理好之后直接建立一个jsp页面进行页面上的图表代码设计即可生效。
```java
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta charset="utf-8">
<script src="${ctxStatic}/map/echarts.common.min.js" type="text/javascript"></script>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>统计图表</title>
<link rel="stylesheet" href="${ctxStatic}/layui-v2.5.6/layui/css/layui.css">
<script type="text/javascript" src="${ctxStatic}/layui-v2.5.6/layui/layui.js"></script>
<!-- 引入 -->
<script src="_PUBLIC_/layui/layui.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
</head>
<body>
<!-- 柱状图 折线图 饼状图 -->
<div class="layui-card">
<div class="layui-card-header">图表统计</div>
<div class="layui-card-body">
<div id="EchartZhu" style="width: 500px;height: 500px;"></div>
</div>
</div>
<script type="text/javascript">
layui.use(['jquery', 'form', 'layer', 'laydate', 'table','layedit','upload', 'element', 'carousel'],function(){
var $ = layui.jquery;
var element = layui.element;
carousel = layui.carousel;
// echarts = layui.echarts;
var form = layui.form;
var layer = layui.layer;
var laydate = layui.laydate;
var table = layui.table;
var layedit = layui.layedit;
var upload = layui.upload;
// var dtree = layui.dtree;
var chartZhu = echarts.init(document.getElementById('EchartZhu'));
//指定图表配置项和数据
var optionchart = {
title: {
text: '数据统计分析'
},
tooltip: {},
legend: {
data: ['数据量统计']
},
xAxis: {
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
},
yAxis: {
type: 'value'
},
series: [{
name: '销量统计',
type: 'bar', //柱状
data: [100,200,300,400,500,600,700],
itemStyle: {
normal: { //柱子颜色
color: 'purple'
}
},
},{
name:'产量统计',
type:'bar',
data:[120,210,340,430,550,680,720],
itemStyle:{
normal:{
color:'blue'
}
}
}]
};
var optionchartZhe = {
title: {
text: '数据统计分析'
},
tooltip: {},
legend: { //顶部显示 与series中的数据类型的name一致
data: ['销量', '产量', '营业额', '单价']
},
xAxis: {
// type: 'category',
// boundaryGap: false, //从起点开始
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'line', //线性
data: [145, 230, 701, 734, 1090, 1130, 1120],
}, {
name: '产量',
type: 'line', //线性
data: [720, 832, 801, 834, 1190, 1230, 1220],
}, {
smooth: true, //曲线 默认折线
name: '营业额',
type: 'line', //线性
data: [820, 932, 901, 934, 1290, 1330, 1320],
}, {
smooth: true, //曲线
name: '单价',
type: 'line', //线性
data: [220, 332, 401, 534, 690, 730, 820],
}]
};
var optionchartBing = {
title: {
text: '数据统计分析',
subtext: '测试数据', //副标题
x: 'center' //标题居中
},
tooltip: {
// trigger: 'item' //悬浮显示对比
},
legend: {
orient: 'vertical', //类型垂直,默认水平
left: 'left', //类型区分在左 默认居中
data: ['单价', '总价', '销量', '产量']
},
series: [{
type: 'pie', //饼状
radius: '60%', //圆的大小
center: ['50%', '50%'], //居中
data: [{
value: 335,
name: '单价'
},
{
value: 310,
name: '总价'
},
{
value: 234,
name: '销量'
},
{
value: 135,
name: '产量'
}
]
}]
};
chartZhu.setOption(optionchart, true); // 柱状图
// chartZhu.setOption(optionchartZhe, true); // 折线图
//chartZhu.setOption(optionchartBing, true); // 饼状图
});
</script>