## 项目第十一天 ##

最新推荐文章于 2022-06-13 15:27:54 发布

vamViolet

最新推荐文章于 2022-06-13 15:27:54 发布

阅读量233

点赞数

本文链接：https://blog.csdn.net/qq_32332777/article/details/79004108

版权

统计分析模块

早期的报表技术（了解）

Excel图形报表（了解）

1. 早期可以使用Excel进行图形报表的操作
    * 从数据库中查询到数据
    * 打开Excel，将数据复制进去，再插入图形就可以了

2. 例如：统计各个生产厂家的销售总金额，并对总金额进行排行
    * select c.factory_name,sum(c.amount) t from CONTRACT_PRODUCT_C c group by c.factory_name order by t desc
    * 创建Excel，拷贝查询出的数据，插入图形

JFreechart制作图形报表（了解）

1. 它是使用Java开源方式编写出来的一套专门制作图形的插件，早期应用还是比较多。
2. 开发的步骤
    * 导入JFreechart的坐标
    * 导入相关的代码
    * 显示效果

amchart图形报表技术

amChart图形报表概述

1. 现在流行的报表技术都是由JS + Flash效果组成的，常用的JS报表技术有：amChart highchart eCharts（百度）
2. 这一类的图形报表技术都是基于JS的技术完成的，咱们开发方式主要是给提供数据就可以了
3. 开发的步骤
    * 找到显示图形效果的html例子
    * 给该html提供数据

4. amChart的数据来源有两种方式
    * 早期使用的是XML作为数据来源（相对比较麻烦）
    * 新版本中推荐使用Json作为数据来源

amChart的入门程序

1. 先把下载的amCharts的js、css和图片拷贝到项目中去
2. 查找到一个demo案例，制作图形
3. 创建StatChartAction类，编写方法，跳转页面
    /**
     * 统计分析模块
     * @author Administrator
     */
    @Namespace("/stat")
    public class StatChartAction extends BaseAction{

        @Autowired
        private SqlService sqlService;

        /**
         * 统计生产厂家的销售金额
         * @return
         * @throws Exception
         */
        public String factorysale() throws Exception {

            return "factorysale";
        }

        /**
         * 统计产品销售排行
         * @return
         * @throws Exception
         */
        public String productsale() throws Exception {

            return "productsale";
        }

        /**
         * 统计在线人数
         * @return
         * @throws Exception
         */
        public String onlineinfo() throws Exception {

            return "onlineinfo";
        }
    }

4. 制作饼图，先找到demo的案例，把案例的代码拷贝到JSP页面中
5. 修改引入的js和css文件的路径，把路径修改正确，功能就可以使用，替换数据

统计分析模块的准备工作

1. 在项目中考入amCharts相关的JS和CSS的文件
    * 咱们采用的方式是拼接字符串的方式，拼接出一个XML的文档

2. 从资料中配置SqlDao类了，创建cn.itcast.common.dao的包，考入SqlDao类
    * 在applicationContext.xml配置文件中配置JdbcTemplate类
        <!-- 配置JdbcTemplate类 -->
        <bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
            <property name="dataSource" ref="dataSource"/>
        </bean>

    * 使用注解的方式，配置SqlDao类
        @Repository
        public class SqlDao {

            private static Logger log = Logger.getLogger(SqlDao.class);
            private UtilFuns utilFuns = new UtilFuns();

            @Autowired
            private JdbcTemplate jdbcTemplate;

3. 导入service，配置service

统计生产厂家销售额

1. 后台代码
    @Action(value = "statChartAction_factorysale", results = {@Result(name = "factorysale", location = "/WEB-INF/pages/stat/chart/pieDonut3D.jsp") })
    public String factorysale() throws Exception {
        // 编写SQL语句
        String sql = "select c.factory_name,sum(c.amount) t from CONTRACT_PRODUCT_C c group by c.factory_name order by t desc";
        // 执行SQL
        List<String> list = sqlService.executeSQL(sql);

        // 存储map集合
        List<Map<String, Object>> list2 = new ArrayList<Map<String, Object>>();
        // 遍历list
        for (int i=0;i<list.size();i++) {
            Map<String, Object> map = new HashMap<String, Object>();
            // 存入值
            map.put("factoryName", list.get(i++));
            map.put("value", Double.parseDouble(list.get(i)));
            list2.add(map);
        }
        String str = FastJsonUtils.toJSONString(list2);
        super.put("str", str);
        return "factorysale";
    }

2. 前端代码
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title>
        <link rel="stylesheet" href="${pageContext.request.contextPath }/components/newAmcharts/style.css" type="text/css">
        <script src="${pageContext.request.contextPath }/components/newAmcharts/amcharts/amcharts.js" type="text/javascript"></script>
        <script src="${pageContext.request.contextPath }/components/newAmcharts/amcharts/pie.js" type="text/javascript"></script>

        <script>
            var chart;
            var chartData = ${str};

            AmCharts.ready(function () {
                // PIE CHART
                chart = new AmCharts.AmPieChart();

                // title of the chart
                chart.addTitle("统计销售量的前15名", 16);

                chart.dataProvider = chartData;
                chart.titleField = "factoryName";//===============================
                chart.valueField = "value";//==================================
                chart.sequencedAnimation = true;
                chart.startEffect = "elastic";
                chart.innerRadius = "40%";
                chart.startDuration = 5;
                chart.labelRadius = 15;
                chart.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";
                // the following two lines makes the chart 3D
                chart.depth3D = 10;
                chart.angle = 15;

                chart.creditsPosition = "top-right";

                // WRITE
                chart.write("chartdiv");
            });
        </script>
    </head>

    <body>
        <div id="chartdiv" style="width:100%; height:100%;position: absolute;left: -10px;top: 10px"></div>
    </body>

统计产品销售排行

1. 代码如下
    /**
     * 统计产品销售排行
     * @return
     * @throws Exception
     */
    @Action(value = "statChartAction_productsale", results = {@Result(name = "productsale", location = "/WEB-INF/pages/stat/chart/column3D.jsp") })
        public String productsale() throws Exception {
            String sql = "select * from (select c.product_no,sum(c.amount) t from contract_product_c c group by c.product_no order by t desc) b where rownum < 3";
            List<String> productList = sqlService.executeSQL(sql);
            List<Map<String, Object>> productJsonList = new ArrayList<Map<String, Object>>();
            for (int i = 0; i < productList.size(); i++) {
                Map<String, Object> map = new HashMap<String, Object>();
                map.put("productNo", productList.get(i++));
                map.put("saleAmount", productList.get(i));
                // 在productJsonList集合中添加一个元素（map）
                productJsonList.add(map);
            }
            String str = FastJsonUtils.toJSONString(productJsonList);
            super.put("str", str);
            return "productsale";
        }

2. 前端的代码如下
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title>
        <link rel="stylesheet" href="${pageContext.request.contextPath }/components/newAmcharts/style.css" type="text/css">
        <script src="${pageContext.request.contextPath }/components/newAmcharts/amcharts/amcharts.js" type="text/javascript"></script>
        <script src="${pageContext.request.contextPath }/components/newAmcharts/amcharts/serial.js" type="text/javascript"></script>

        <script>
            var chart;
            var chartData = ${str};

            AmCharts.ready(function () {
                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;
                chart.categoryField = "productNo";//======================================
                // the following two lines makes chart 3D
                chart.depth3D = 20;
                chart.angle = 30;

                // AXES
                // category
                 var categoryAxis = chart.categoryAxis;
                //categoryAxis.labelRotation = 20;
                categoryAxis.dashLength = 5;
                categoryAxis.gridPosition = "start"; 

                // value
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.title = "销售额";
                valueAxis.dashLength = 5;
                chart.addValueAxis(valueAxis);

                // GRAPH
                var graph = new AmCharts.AmGraph();
                graph.valueField = "saleAmount";//================================================
                graph.colorField = "color";
                graph.balloonText = "<span style='font-size:18px'>[[category]]: <b>[[value]]</b></span>";
                graph.type = "column";
                graph.lineAlpha = 0;
                graph.fillAlphas = 1;
                chart.addGraph(graph);

                // CURSOR
                var chartCursor = new AmCharts.ChartCursor();
                chartCursor.cursorAlpha = 0;
                chartCursor.zoomable = false;
                chartCursor.categoryBalloonEnabled = false;
                chart.addChartCursor(chartCursor);

                chart.creditsPosition = "top-right";

                // WRITE
                chart.write("chartdiv");
            });
        </script>
    </head>

    <body>
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
    </body>

统计每个时间段登录过的人数

1. 统计每个时间段登录过的人数，时间端以1小时为单位。
2. 重点就是SQL语句，SQL语句推到出来的过程
    * 查询在14点登录过的人数（不管是哪年，哪月）
        * select * from LOGIN_LOG_P where to_char(login_time,'HH24') = '14';

    * 统计每个时间段登录过的人数，以小时为时间段
        * select to_char(login_time,'HH24') a1,count(*) t from LOGIN_LOG_P group by to_char(login_time,'HH24') order by a1

    * 把每个时间段都显示，没有值的显示成0
        select a.a1,nvl(b.t,0) from (select * from online_info_t) a left join (select to_char(login_time,'HH24') a1,count(*) t from LOGIN_LOG_P group by to_char(login_time,'HH24') order by a1) b on a.a1 = b.a1 order by a.a1

3. 代码如下
    /**
     * 统计每个时间段登录过的人数
     * @return
     * @throws Exception
     */
    @Action(value = "statChartAction_onlineinfo", results = {@Result(name = "onlineinfo", location = "/WEB-INF/pages/stat/chart/linSmooth.jsp") })
    public String onlineinfo() throws Exception {
        String sql = "select a.a1,nvl(b.t,0) from (select * from online_info_t) a left join (select to_char(login_time,'HH24') a1,count(*) t from LOGIN_LOG_P group by to_char(login_time,'HH24') order by a1) b on a.a1 = b.a1 order by a.a1";
        List<String> list = sqlService.executeSQL(sql);
        List<Map<String, Object>> list2 = new ArrayList<Map<String, Object>>();
        for (int i = 0; i < list.size(); i++) {
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("hour", list.get(i++));
            map.put("value", list.get(i));
            list2.add(map);
        }
        String str = FastJsonUtils.toJSONString(list2);
        super.put("str", str);

        return "onlineinfo";
    }

4. 前端的代码如下
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title>
        <link rel="stylesheet" href="${pageContext.request.contextPath }/components/newAmcharts/style.css" type="text/css">
        <script src="${pageContext.request.contextPath }/components/newAmcharts/amcharts/amcharts.js" type="text/javascript"></script>
        <script src="${pageContext.request.contextPath }/components/newAmcharts/amcharts/serial.js" type="text/javascript"></script>

        <script>
            var chart;
            var graph;
            /* 
            var chartData = [
                {
                    "hour": "00",
                    "value": 5
                },
                {
                    "hour": "01",
                    "value": 12
                },
                {
                    "hour": "02",
                    "value": 56
                },
                {
                    "hour": "03",
                    "value": 1
                },
                {
                    "hour": "04",
                    "value": 0
                },
                {
                    "hour": "05",
                    "value": 3
                },
                {
                    "hour": "06",
                    "value": 1
                },
                {
                    "hour": "07",
                    "value": 5
                },
                {
                    "hour": "08",
                    "value": 8
                },
                {
                    "hour": "09",
                    "value": 110
                },
                {
                    "hour": "10",
                    "value": 20
                },
                {
                    "hour": "11",
                    "value": 12
                },
                {
                    "hour": "12",
                    "value": 22
                },
                {
                    "hour": "13",
                    "value": 1
                },
                {
                    "hour": "14",
                    "value": 78
                },
                {
                    "hour": "15",
                    "value": 12
                },
                {
                    "hour": "16",
                    "value": 46
                },
                {
                    "hour": "17",
                    "value": 78
                },
                {
                    "hour": "18",
                    "value": 9
                },
                {
                    "hour": "19",
                    "value": 4
                },
                {
                    "hour": "20",
                    "value": 2
                },
                {
                    "hour": "21",
                    "value": 1
                },
                {
                    "hour": "22",
                    "value": 0
                },
                {
                    "hour": "23",
                    "value": 3
                }
            ];
             */

            var chartData = ${str};

            AmCharts.ready(function () {
                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();

                chart.dataProvider = chartData;
                chart.marginLeft = 10;
                chart.categoryField = "hour";
                //chart.dataDateFormat = "YYYY";

                // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
                //chart.addListener("dataUpdated", zoomChart);

                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                //categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
                //categoryAxis.minPeriod = "YYYY"; // our data is yearly, so we set minPeriod to YYYY
                categoryAxis.dashLength = 3;
                categoryAxis.minorGridEnabled = true;
                categoryAxis.minorGridAlpha = 0.1;//0.1

                // value
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.axisAlpha = 0;
                valueAxis.inside = true;
                valueAxis.dashLength = 3;
                chart.addValueAxis(valueAxis);

                // GRAPH
                graph = new AmCharts.AmGraph();
                graph.type = "smoothedLine"; // this line makes the graph smoothed line.
                graph.lineColor = "#d1655d";
                graph.negativeLineColor = "#637bb6"; // this line makes the graph to change color when it drops below 0
                graph.bullet = "round";
                graph.bulletSize = 8;
                graph.bulletBorderColor = "#FFFFFF";
                graph.bulletBorderAlpha = 1;
                graph.bulletBorderThickness = 2;
                graph.lineThickness = 2;
                graph.valueField = "value";
                graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
                chart.addGraph(graph);

                // CURSOR
                var chartCursor = new AmCharts.ChartCursor();
                chartCursor.cursorAlpha = 0;
                chartCursor.cursorPosition = "mouse";
                //chartCursor.categoryBalloonDateFormat = "YYYY";
                chart.addChartCursor(chartCursor);

                // SCROLLBAR
                //var chartScrollbar = new AmCharts.ChartScrollbar();
                //chart.addChartScrollbar(chartScrollbar);

                chart.creditsPosition = "top-right";

                // WRITE
                chart.write("chartdiv");
            });

            // this method is called when chart is first inited as we listen for "dataUpdated" event
            function zoomChart() {
                // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
                chart.zoomToDates(new Date(1972, 0), new Date(1984, 0));
            }
        </script>
    </head>

    <body>
        <div id="chartdiv" style="width:100%; height:400px;"></div>
    </body>

eCharts的介绍

vamViolet

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
## 项目第十一天 ##

统计分析模块早期的报表技术（了解）Excel图形报表（了解）1. 早期可以使用Excel进行图形报表的操作 * 从数据库中查询到数据 * 打开Excel，将数据复制进去，再插入图形就可以了2. 例如：统计各个生产厂家的销售总金额，并对总金额进行排行 * select c.factory_name,sum(c.amount) t from CO
复制链接

扫一扫