实习日记（4-30）

最新推荐文章于 2022-08-30 15:19:07 发布

黑胡子大叔的小屋

最新推荐文章于 2022-08-30 15:19:07 发布

阅读量578

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/lzl980111/article/details/105853617

版权

笔记专栏收录该内容

33 篇文章 2 订阅

订阅专栏

小记

到今天下午为止，之前的TRAMS项目练习的所有练习题就都完成了，再稍微梳理一下。
开始的时候我是不知道要利用公司封装过的类来实现这个项目，然后自己就原生写了一下，当时是也是实现了一个小的题目，整合了一下SSH+EasyUI做了一个小的例子。

Spring

Spring是为了解决什么问题：
引入Spring是为了帮助我们管理框架，在以往的编程中，我们需要手动声明实例对象，引入Spring后，我们将常用到的实例对象（Dao、Service、Action等）都交给Spring保管，在使用到的时候直接拿来用就好了，就不需要再有额外的空间去声明它。
TRAMS项目中没有用到Spring

Struts2

Struts2:是为了解决什么问题：
首先我们要清楚传统servlet跟Struts2的区别，Struts2其实就是对servlet进一步封装，Action是Struts2的控制器，而Servlet就是Servlet的控制器。Servlet只能通过getParameter获取前台参数，而Struts2的话可以通过getter、setter方法注入，更加方便。

Struts2的Json传参配置：
https://blog.csdn.net/lzl980111/article/details/105572706

Struts2的流程：
在这里插入图片描述
Servlet的流程：

实现分页的话在Action层就需要进行判断了，Action向Dao层传递了一个PageListData参数，Dao层不再返回List而是直接对Action传递的PageListData进行操作。
https://blog.csdn.net/lzl980111/article/details/105762089

Hibernate

Hibernate：
Hibernate是一种ORM框架，进行数据库持久化操作。
ORM（Object Relational Mapping）框架采用元数据来描述对象与关系映射的细节，元数据一般采用XML格式，并且存放在专门的对象一映射文件中。

hql语法是面向pojo的

每个pojo都需要有自己的映射文件，在这个TRAMS项目中，它对pojo又进行了封装，应该是为了方便扩展，封装后的属性没有在映射文件中，应该是方便后端查询进行的封装。

所有的pojo映射文件需要映射到总的配置文件中

EasyUI

这是一个前端UI插件集合体，今天看ECharts，感觉用法跟EasyUI很相近。
EasyUI的使用可以通过JS也可以通过HTML标签中的属性赋值，我个人更喜欢用js，方便，直观。
个人理解（还不知道对不对）：EasyUI是一种UI插件，区别于Vue，Vue的话更偏向于框架，更偏向于架构，如何调用组件更加方便，资源利用率更高，而EasyUI更加侧重于展示的文本框啊、密码框啊、多选框啊，也就是说EasyUI是搭载在Vue框架上的。

笔记整理

今天搞Echarts，ECharts的开发文档下载不了，看这个就够了，再就是有一篇pdf（不是特别好，没有目录）：
https://pan.baidu.com/s/1-ZikpsOhwIhMGgSAX2DqUw

搞了一部分：
在这里插入图片描述
HTML：

<div id="main" style="width: 400px;height:300px;float: left"></div>
<div id="echar" style="width: 400px;height:300px;float: left"></div>
<div id="line" style="width: 400px;height:300px;float: left"></div>
<div id="funnel" style="width: 400px;height:300px;float: left"></div>
<div id="funnel_ascending" style="width: 400px;height:300px;float: left"></div>
<div id="guage" style="width: 400px;height:300px;float: left"></div>

JS:
引入ECharts

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

大饼图

    /*大饼图*/
    var pie = echarts.init(document.getElementById('main'));
    pie.setOption({
        series : [
            {
                name: '访问来源',
                type: 'pie',    // 设置图表类型为饼图
                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data:[          // 数据数组，name 为数据项名称，value 为数据项值
                    {value:235, name:'视频广告'},
                    {value:274, name:'联盟广告'},
                    {value:310, name:'邮件营销'},
                    {value:335, name:'直接访问'},
                    {value:400, name:'搜索引擎'}
                ]
            }
        ],
        title: {
            text: '饼图'
        },
    })

柱状图

    /*      柱状图部分          */
    var bar=echarts.init(document.getElementById('echar'));
    bar.setOption({
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }
        ],
        title: {
            text: '柱状图'
        },
        legend: {  //图例
            data:['销量']
        },
        xAxis:{
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis:{},
    })
    bar.on('click',function (param) {
        console.log(param);

    })

连线图

    /*连线图部分*/
    var line=echarts.init(document.getElementById('line'))
    var data1=[1,2,3,4,5,6,7,8,9,0,23,43,32,43];
    var data2=[1,2,3,4,5,6,7,8,9,0,10,32,53,32,13,55,32,12];
    line.setOption({

        series: [
            {
                name:'昨日uv',
                type:'line',
                smooth:true,
                stack: '总量',
                data:data1
            },
            {
                name:'今日uv',
                type:'line',
                smooth:true,
                stack: '总量',
                data:data2
            }
        ],
        legend: {  //图例
            data:['昨日uv','今日uv']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['0:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','21:00','22:00','23:00']
        },
        yAxis: {
            type: 'value'
        },
        title: {
            text: '最近2天uv图',
            textStyle:{
                color: 'black',
                fontStyle: 'normal',
                fontWeight: 'normal',
                fontFamily: '微软雅黑'
            }
        },
    })

漏斗图

/*漏斗图*/
    var funnel=echarts.init(document.getElementById('funnel'));
    funnel.setOption({

        series:[
            {

                name:'漏斗图',
                type:'funnel',
                data:[
                    {value:60, name:'访问'},
                    {value:40, name:'咨询'},
                    {value:20, name:'订单'},
                    {value:80, name:'点击'},
                    {value:100, name:'展现'}
                ]
            }
        ],
        legend: {
            data : ['展现','点击','访问','咨询','订单']
        },
        title:{
            text:'漏斗图'
        }
    })

金字塔图

/*金字塔图*/
    var funnel_ascending=echarts.init(document.getElementById('funnel_ascending'));
    funnel_ascending.setOption({
        title:{
          text:'金字塔图'
        },
        series:[
            {
                name:'金字塔图',
                type:'funnel',
                sort : 'ascending',
                data:[
                    {value:60, name:'应用层'},
                    {value:40, name:'传输层'},
                    {value:20, name:'网络层'},
                    {value:80, name:'数据链路层'},
                    {value:100, name:'物理层'}
                ]
            }
        ],
        calculable : true,//是否启用拖拽重计算特性，默认关闭

    })

仪表图

/*仪表图 Guage*/
    var guage=echarts.init(document.getElementById('guage'));
    guage.setOption({
        title:{
            text:'仪表图'
        },
        series: [
            {
                type : "gauge",
                center: ["50%", "55%"], // 默认全局居中
                radius : "80%",
                startAngle: 200,
                endAngle: -20,
                axisLine : {
                    show : true,
                    lineStyle : { // 属性lineStyle控制线条样式
                        color : [ //表盘颜色
                            [ 0.5, "#DA462C" ],//0-50%处的颜色
                            [ 0.7, "#FF9618" ],//51%-70%处的颜色
                            [ 0.9, "#FFED44" ],//70%-90%处的颜色
                            [ 1,"#20AE51" ]//90%-100%处的颜色
                        ],
                        width : 30//表盘宽度
                    }
                },

                axisTick : { //刻度线样式（及短线样式）
                    length : 20
                },
                axisLabel : { //文字样式（及“10”、“20”等文字样式）
                    color : "black",
                    distance : 5 //文字离表盘的距离
                },

                data: [{
                    value: 100,
                    label: {
                        textStyle: {
                            fontSize: 12
                        }
                    }
                }]
            }
        ]
    })

捣鼓了一会儿做出来一点小成果（使用TRAMS后端数据绘制柱状图）：
但是会导致x轴间隔显示，不显示全部的，搜了一下。
在这里插入图片描述

解决方案：
https://www.jianshu.com/p/c387b769a928
在xAxis中加入属性：

            axisLabel: {
                interval:0 
            }

在这里插入图片描述
解决完成
这里还有一篇讲的 Ajax+ECharts 的博客：
https://blog.csdn.net/u010452388/article/details/81877663

先Ajax请求从后端拿到数据
拿到数据调用 ECharts 的声明方法

黑胡子大叔的小屋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实习日记（4-30）

小记到今天下午为止，之前的TRAMS项目练习的所有练习题就都完成了，再稍微梳理一下。开始的时候我是不知道要利用公司封装过的类来实现这个项目，然后自己就原生写了一下，当时是也是实现了一个小的题目，整合了一下SSH+EasyUI做了一个小的例子。SpringSpring是为了解决什么问题：引入Spring是为了帮助我们管理框架，在以往的编程中，我们需要手动声明实例对象，引入Spring后，我...
复制链接

扫一扫