折线、条形、饼型图的统计图的展现

这个是在控制层上面进行的代码

/*** Copyright &copy; 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 {/*@Autowiredprivate 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>

折线、条形、饼型图的统计图的展现相关推荐

如何用php饼型图,php绘制饼状图的代码举例
//变量定义,画椭圆弧时的角度大小 define("ANGLELENGTH",3); /** * 绘制图片 * @param $title 3D图的标题 * @param $dat ...
matlab三维条形/饼型/离散杆/柱坐标图形绘制
本博文源于matlab基础,主要对三维图形的一些简单绘制. 三维条形图在matlab中采用bar2和bar3h来绘制条形图例子:使用bar3和bar3h绘制一个随机矩阵的横向与纵向三维条形图 &g ...
Plotly.js使用详细介绍（折线图、饼状图、点图、水平条形图、桑基图、树状图、等值线图）
目录 0 写在前面 1 HTML代码 2 折线图 2.1 基本折线图 2.2 复杂折线图 2.2.1 轨迹 2.2.2 布局 3 饼状图 3.1 基本饼状图 3.2 饼图子图 3.3 甜甜圈图 4 点 ...
python堆叠面积图_06. Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图...
1.基本图表绘制 plt.plot() 图表类别:线形图.柱状图.密度图,以横纵坐标两个维度为主同时可延展出多种其他图表样式 plt.plot(kind='line', ax=None, figsi ...
Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图
目录 Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图 1.基本图表绘制 plt.plot() ts.plot() 由Seri ...
php 生成饼状图，折线图，条形图通用类
生成饼状图,折线图,条形图通用的php类,这里使用的是百度 Echart. Echart 官方网站 http://echarts.baidu.com/ <?php class Echarts ...
如何用SpringBoot+Thymeleaf+Echart生成好看的柱状图，折线图，饼状图
一.前言上篇文章我们用POI技术读取Excel并生成了相应的图表.但是实际的效果比较一般,因为本身WPS生成图表就比较简单,如果用程序操作远比人工耗时费力,效果远不如一些付费模板.如下图所示: 然后 ...
python excel数据分析画直方图饼状图_Excel数据可视化应用（直方图、折线图、饼状图）...
直方图:对比关系直方图是一种统计报告图,是表示资料变化情况的主要工具.直方图由一系列高度不等的的纵向条纹或线段表示数据分布的情况.一般用横轴表示数据类型,纵轴表示分布情况. 例1: 1.右键单击图表 ...
echats实现进度条、饼状图、折线图、柱状图、柱状图和折线图的集合体
记录工作中用到的一些echats图标 1.进度条有两种方式: a.通过elemnt-ui组件el-progress组件实现上面的进度条光使用el-progress无法实现,el-progress不 ...

折线、条形、饼型图的统计图的展现

折线、条形、饼型图的统计图的展现相关推荐

最新文章

热门文章