html上加jsp统计_物流项目之统计分析

最新推荐文章于 2022-10-04 10:34:03 发布

weixin_39963523

最新推荐文章于 2022-10-04 10:34:03 发布

阅读量161

点赞数

文章标签： html上加jsp统计

本文链接：https://blog.csdn.net/weixin_39963523/article/details/112091438

版权

本文介绍了统计分析在企业决策中的价值，展示了如何通过图形统计报表和ECharts 3.1实现数据可视化，包括柱状图、饼图等，并结合实例演示了如何通过ECharts展示厂家销售情况、产品排行和系统访问压力，助力数据驱动决策。

摘要由CSDN通过智能技术生成

1. 统计分析的好处？

如何让数据说话？

　　如何挖掘基础数据的价值？

2. 图形统计报表

图形统计报表用来将企业中现有的数据进行有效的整合，快速准确的提供报表并提出决策依据，帮助企业做出明智的业务经营决策。

　　下面的统计报表就是我们充分挖掘企业的基础信息，从中分析出更有价值的信息，为企业业务经营决策提供直观的数据支持。例如通过分析我们能知道我们的重点客户，能知道我们最受欢迎的产品是哪些，从而在这些方面投入更多的资金和人力，收益也将更大。

3. echarts

3.1 什么是echars？

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

3.2 echars的可视化图表

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

3.3 echars下载

echar官网：

https://echarts.baidu.com

3.4 引入 echarts

ECharts 3 开始引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <!-- 引入 ECharts 文件 -->
  <script src="echarts.min.js"></script>
 </head>
 </html>

3.5 绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

 <body>
 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
 <div id="main" style="width: 600px;height:400px;"></div>
 </body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>ECharts</title>
 <!-- 引入 echarts.js -->
 <script src="echarts.min.js"></script>
 </head>
 <body>
 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 <div id="main" style="width: 600px;height:400px;"></div>
 <script type="text/javascript">
 // 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.getElementById('main'));
 
 // 指定图表的配置项和数据
 var option = {
            title: {
                text: 'ECharts 入门示例'
 },
            tooltip: {},
            legend: {
                data:['销量']
 },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
 },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
 }]
 };
 
 // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
 </script>
 </body>
 </html>

这样你的第一个图表就诞生了！

4. 厂家销售情况统计

4.1 pojo


public class ECharsData {
 private Integer value;
 private String name;

 public Integer getValue() {
 return value;
    }

 public void setValue(Integer value) {
 this.value = value;
    }

 public String getName() {
 return name;
    }

 public void setName(String name) {
 this.name = name;
    }
}

4.2 mapper

修改ContractProductCMapper.xml

<!--厂家的销售情况-->
<select id="listFactorySaleData" resultType="com.sxt.pojo.ECharsData">
  select count(1) value,FACTORY_NAME name from contract_product_c GROUP BY FACTORY_NAME
</select>

修改ContractProductCMapper

List<ECharsData> listFactorySaleData();

4.3 service


@Service("statChartServiceImpl")
public class StatChartServiceImpl implements StatChartService{

 @Autowired
 private ContractProductCMapper contractProductCMapper;

 @Override
 public List<ECharsData> listFactorySaleData() throws Exception {
 return contractProductCMapper.listFactorySaleData();
    }
}

4.4 controller


@Controller
@RequestMapping("/statChart")
public class StatChartController {
 @Autowired
 private StatChartService statChartService;

 @RequestMapping("/factorySale")
 public String toFactorySale(){
 return "stat/chart/SaleView";
    }

 @RequestMapping("/listFactorySaleData")
 @ResponseBody
 public List<ECharsData> listFactorySaleData()throws Exception{
 return statChartService.listFactorySaleData();
    }
}

4.5 jsp

修改SaleView.jsp

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
 $(function(){
 $.ajax({
 url:"${ctx}/statChart/getfactorySaleData",
 type:"post",
 success:showEChar
 });
    });
 function showEChar(data) {
 // 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.getElementById('main'));

 // 指定图表的配置项和数据
 var option = {
 //标题组件
 title : {
 //主标题
 text: '生成厂家销售情况',
 //水平居中
 x:'center'
 },
 //提示框
 tooltip : {
 //每块饼都触发
 trigger: 'item',
 //a:系列名称 b:数据项名称  c:数值  d:百分比
 formatter: "{a} <br/>{b} : {c} ({d}%)"
 },
 //图例组件
 legend: {
 //竖排
 orient: 'vertical',
 //居左
 left: 'left'
 },
 series : [
                {
 //系列名称
 name: '访问来源',
 type: 'pie',
 //饼图的半径
 radius : '55%',
 //饼图的中心（圆心）坐标
 center: ['80%', '60%'],
 //数据
 data:data
                }
            ]
        };

 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);
    }
</script>
</body>
</html>

5. 产品销售排行

5.1 pojo


public class ECharsDataVo{

 private List<Integer> yData=new ArrayList<Integer>();
 private List<String> xData=new ArrayList<String>();


 public List<Integer> getyData() {
 return yData;
    }

 public void setyData(List<Integer> yData) {
 this.yData = yData;
    }

 public List<String> getxData() {
 return xData;
    }

 public void setxData(List<String> xData) {
 this.xData = xData;
    }
}

5.2 mapper

修改ContractProductCMapper.xml

<!--产品的销售情况-->
<select id="listProductSaleData" resultType="com.sxt.pojo.ECharsData">
  SELECT PRODUCT_NO name,COUNT(1) value FROM contract_product_c GROUP BY PRODUCT_NO
</select>

修改ContractProductCMapper

List<ECharsData> listProductSaleData();

5.3 service

修改StatChartServiceImpl

@Override
public ECharsDataVo getProductSaleData() throws Exception {
    List<ECharsData> productSaleData = contractProductCMapper.getProductSaleData();

    ECharsDataVo eCharsDataVo = new ECharsDataVo();
 for (int i = 0; i < productSaleData.size(); i++) {
        ECharsData eCharsData =  productSaleData.get(i);
        eCharsDataVo.getxData().add(eCharsData.getName());
        eCharsDataVo.getyData().add(eCharsData.getValue());
    }
 return eCharsDataVo;
}

5.4 controller

修改StatChartController

@RequestMapping("/productSale")
public String toProductSale(){
 return "stat/chart/SaleOrder";
}

@RequestMapping("/getProductSaleData")
@ResponseBody
public ECharsDataVo getProductSaleData()throws Exception{
 return statChartService.getProductSaleData();
}

5.5 jsp

修改SaleOrder.jsp

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
 $(function(){
 $.ajax({
 url:'${ctx}/statChart/getProductSaleData',
 type:'post',
 success:showChars
 });
    });
 function showChars(data) {
 // 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.getElementById('main'));

 // 指定图表的配置项和数据
 var option = {
 //标题
 title : {
 text: '产品销售排行统计',
 x:'center'
 },
 color: ['#3398DB'],
 tooltip: {
 trigger: 'axis',
 axisPointer: {            // 坐标轴指示器，坐标轴触发有效
 type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
 }
            },
 grid: {
 left: '3%',
 right: '4%',
 bottom: '3%',
 containLabel: true
 },
 xAxis: [
                {
 type: 'category',
 data: data.xData,
 axisTick: {
 alignWithLabel: true
 }
                }
            ],
 yAxis: [
                {
 type: 'value'
 }
            ],
 series: [
                {
 name: '产品销售情况',
 type: 'bar',
 barWidth: '100%',
 data: data.yData
                }
            ]
        };

 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);
    }
</script>
</body>
</html>

6. 系统访问压力图

6.1 mapper

创建AccessLogMapper.xml

<?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.sxt.mapper.AccessLogMapper" >
 <select id="listAccessLogData" resultType="com.sxt.pojo.ECharsData">
        SELECT DATE_FORMAT(CREATE_TIME,'%H') name,count(1) value FROM access_log_p GROUP BY name
 </select>
</mapper>

创建AccessLogMappe


public interface AccessLogMapper {
    List<ECharsData> listAccessLogData();
}

6.2 service

修改StatChartServiceImpl

@Override
public ECharsDataVo getOnlineInfoData() throws Exception {
    List<ECharsData> productSaleData = contractProductCMapper.getOnlineInfoData();

    ECharsDataVo eCharsDataVo = new ECharsDataVo();
 for (int i = 0; i < productSaleData.size(); i++) {
        ECharsData eCharsData =  productSaleData.get(i);
        eCharsDataVo.getxData().add(eCharsData.getName());
        eCharsDataVo.getyData().add(eCharsData.getValue());
    }
 return eCharsDataVo;
}

6.3 controller

修改StatChartController

@RequestMapping("/onlineInfo")
public String toOnlineInfo(){
 return "stat/chart/UserBrowse";
}

@RequestMapping("/getOnlineInfoData")
@ResponseBody
public ECharsDataVo getOnlineInfoData()throws Exception{
 return statChartService.getOnlineInfoData();
}

6.4 jsp

修改UserBrowse.jsp

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
 $(function(){
 $.ajax({
 url:'${ctx}/statChart/getAccessLogData',
 type:'post',
 success:showChars
 });
    });
 function showChars(data) {
 // 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.getElementById('main'));

 // 指定图表的配置项和数据
 var option = {
 //标题
 title : {
 text: '用户访问统计',
 x:'center'
 },
 xAxis: {
 type: 'category',
 data: data.xData
            },
 yAxis: {
 type: 'value'
 },
 series: [{
 data: data.yData,
 type: 'line'
 }]
        };

 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);
    }
</script>
</body>
</html>

</body>
</html>

weixin_39963523

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html上加jsp统计_物流项目之统计分析

1. 统计分析的好处？如何让数据说话？　　如何挖掘基础数据的价值？2. 图形统计报表图形统计报表用来将企业中现有的数据进行有效的整合，快速准确的提供报表并提出决策依据，帮助企业做出明智的业务经营决策。　　下面的统计报表就是我们充分挖掘企业的基础信息，从中分析出更有价值的信息，为企业业务经营决策提供直观的数据支持。例如通过分析我们能知道我们的重点客户，能知道我们最受欢迎的产品是哪些，从而在这...
复制链接

扫一扫