项目一 12 电子报运 echarts(图形化报表)

回顾

  • 报运的业务(打断设计)
  • 报运单的新增和修改
  • webservice( jax-rs,jax-ws )
  • jax-rs的入门案例

1jax-ws规范(了解)

三要素:

​ wsdl : jaxws的文档

​ soap协议 : http + 符合标准的XML文件

​ UDDI: 记录收集公共的webservice 目录

server 端:

在这里插入图片描述
(1)新建一个jaxws_server项目(web项目)
在这里插入图片描述
(2)在pom文件内导入做坐标依赖

在这里插入图片描述
相关坐标如下所示

<dependencies>
        <dependency>
            <groupId>org.apache.cxf</groupId>
            <artifactId>cxf-rt-frontend-jaxws</artifactId>
            <version>3.0.1</version>
        </dependency>

        <!-- cxf 进行rs开发 必须导入  -->
        <dependency>
            <groupId>org.apache.cxf</groupId>
            <artifactId>cxf-rt-frontend-jaxrs</artifactId>
            <version>3.0.1</version>
        </dependency>
        <!-- 日志引入  -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
            <version>1.7.12</version>
        </dependency>

        <!-- 客户端 -->
        <dependency>
            <groupId>org.apache.cxf</groupId>
            <artifactId>cxf-rt-rs-client</artifactId>
            <version>3.0.1</version>
        </dependency>

        <!-- 扩展json提供者 -->
        <dependency>
            <groupId>org.apache.cxf</groupId>
            <artifactId>cxf-rt-rs-extension-providers</artifactId>
            <version>3.0.1</version>
        </dependency>


        <!-- 转换json工具包,被extension providers 依赖 -->
        <dependency>
            <groupId>org.codehaus.jettison</groupId>
            <artifactId>jettison</artifactId>
            <version>1.3.7</version>
        </dependency>

        <!-- spring 核心 -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>5.0.5.RELEASE</version>
        </dependency>
        <!-- spring web集成 -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>5.0.5.RELEASE</version>
        </dependency>
        <!-- spring 整合junit  -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>5.0.5.RELEASE</version>
        </dependency>
        <!-- junit 开发包 -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
        </dependency>
    </dependencies>

(3)创建接口和实现类
接口如下:
在这里插入图片描述

实现类如下:
此注解webService相当于暴露一个webservice服务

在这里插入图片描述

(4)整合spring

在这里插入图片描述
(5) 配置web.xml文件在这里插入图片描述
在这里插入图片描述
(6) 配置到servlet中
在这里插入图片描述
在这里插入图片描述

client端

在这里插入图片描述
1.根据文档说明书(xsd)自动生成代码
打开存放代码的当前目录,在cmd命令行中输入如下命令:
wsimport -s . http://localhost:8080/ws/weather?wsdl
在这里插入图片描述
在这里插入图片描述
2.配置spring整合服务调用

在这里插入图片描述

3.从容器中获取对象并调用方法

在这里插入图片描述
测试文件内相关代码如下

public class Client {
    public static void main(String[] args) {
        ClassPathXmlApplicationContext ac = new ClassPathXmlApplicationContext("applicationContext-cxf-client.xml");
        WeatherService weatherService=(WeatherService) ac.getBean("weatherService");
        String name = weatherService.getWeatherByCityName("北京");
        System.out.println(name);

    }
}

2电子报运(重点)

在这里插入图片描述

##2.1构造电子报运的数据

在这里插入图片描述

##2.2完成电子报运

在这里插入图片描述

##2.3查询报运结果

在这里插入图片描述

##2.4更新报运结果

在service中添加方法
在这里插入图片描述

3前端图形报表框架echarts

echarts : 百度开源的一套前端的图形报表框架

3.1echarts的入门

(1)初始化echarts

(2)配置echarts数据

(3)展示echarts图标

//1.初始化echarts
var myChart = echarts.init(document.getElementById('main'));
//2.准备数据(配置表格类型)
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["皮蛋","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [100, 20, 36, 10, 10, 20]
    }]
};
//3.展示图标
myChart.setOption(option);

使用echarts :

​ 1.从官网文档中copy你喜欢的样式

​ 2.替换数据

4统计分析

##4.1搭建环境

在这里插入图片描述

4.1.1 注意事项

配置mybatis的dao层,如果返回值是一个map集合的话,

map集合的key = 查询的字段名

map集合的value = 查询结果

##4.2厂家的销售统计

(1) 页面(饼图)

$.get("/stat/getFactoryData.do", function(factoryData) {
    var names = [];
    for(var i=0;i<factoryData.length;i++) {
        var obj = factoryData[i];
        names[i] = obj.name;
    }

    //1.初始化echarts
    var myChart = echarts.init(document.getElementById('main'));
    //2.准备数据(配置表格类型)
    var option = {
        title : {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: names
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:factoryData,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    //3.展示图标
    myChart.setOption(option);
});

(2) sql语句

SELECT factory_name NAME , SUM(amount) VALUE FROM co_contract_product WHERE company_id="1" GROUP BY factory_name

##4.3货物销量排行榜

(1)页面(柱状图)

<script type="text/javascript">

    $.get( "/stat/getSellData.do", function( sellData ) {

        var categorys = [];
        var values = [];
        for(var i=0;i<sellData.length;i++) {
            var obj = sellData[i];
            categorys [i] = obj.name;
            values [i] = obj.value;
        }


        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        //数据
        var option = {
            //xAxis.axisLabel.rotate
            xAxis: {
                type: 'category',
                data: categorys,
                axisLabel: {
                    rotate : 90
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: values,
                type: 'bar'
            }]
        };

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

</script>

(2)sql语句

SELECT product_no, SUM(amount) FROM co_contract_product WHERE company_id="1" GROUP BY product_no ORDER BY  SUM(amount) DESC  LIMIT 15

##4.4系统访问的压力图

系统访问 : 每个时间段内访问系统的人数数量

(1)页面(现状图)

<script type="text/javascript">

    $.get("/stat/getOnLineData.do",function(onlineData){
        var categorys = [];
        var values = [];
        for(var i=0;i<onlineData.length;i++) {
            var obj = onlineData[i];
            categorys [i] = obj.hour;
            values [i] = obj.count;
        }


        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        //数据
        var option = {
            xAxis: {
                type: 'category',
                data: categorys
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: values,
                type: 'line',
                symbol: 'triangle',
                symbolSize: 20,
                lineStyle: {
                    normal: {
                        color: 'green',
                        width: 4,
                        type: 'dashed'
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: 3,
                        borderColor: 'yellow',
                        color: 'blue'
                    }
                }
            }]
        };

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

(2)SQL语句

SELECT a1 HOUR, IFNULL(syslog.count,0) COUNT FROM st_online_info info LEFT JOIN 
	(
		SELECT DATE_FORMAT(TIME,'%H') h1, COUNT(id) COUNT FROM st_sys_log WHERE company_id="1" GROUP BY  DATE_FORMAT(TIME,'%H')
	) syslog ON info.a1=syslog.h1

作业:

​ 1.电子报运

​ 2.统计分析


版权声明:本文为AdamCafe原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。