[TOC]

ECharts

（一）使用

1．基本入门demo

<script src=”../../resource/js/echarts.min.js” type=”text/javascript” charset=”utf-8”></script>

就这么简单

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>ECharts</title>

<!-- 引入 echarts.js -->

<script undefined></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>

（二）概念

是图表技术,底层是JavaScript封装的,在网页HTML中嵌入ECharts代码显示数据图表

AdminLte

（三）基本介绍

是一套模版,页面基本都写完了,你通过模版可以快速去制作出一套后台系统页面.

主要是后台程序员用的,因为做后端的基本对前端样式一窍不通

AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具，它提供了一系列响应的、可重复使用的组件，并内置了多个模板页面；同时自适应多种屏幕分辨率，兼容PC和移动端。通过AdminLTE，我们可以快速的创建一个响应式的Html5网站。AdminLTE框架在网页架构与设计上，有很大的辅助作用，尤其是前端架构设计师，用好AdminLTE 不但美观，而且可以免去写很大CSS与JS的工作量。

（四）基本使用

1．先介绍

模版在day67天的
有模版可以参考一下,黑马定制版的(是中文的)
打开下面路径:
F:\新班就业资料\day67_maven高级_ssm第一天\资料\AdminLTE资料\adminlte2-itheima-master\release\dist\pages\
有个all-admin-index.html 这个就是首页.

想要什么功能就去找,比如想要数据列表就从左边菜单里面找
里面有不少功能了.你都可以自己弄

前端杂七杂八[笔记] - 图1

2．开始制作首页

复制这三个放到项目里面
前端杂七杂八[笔记] - 图2
想做页面就开始copy一下
先创建一个页面,然后打开页面,右键用文本编辑器打开,然后无脑全部复制,再稍稍修改一下,比如修改表头,还需要改引入文件路径,和上面复制的三个文件夹路径要对上就行了.

前端杂七杂八[笔记] - 图3

想修改什么就自己去找
前端杂七杂八[笔记] - 图4

自己进行页面的修改.

EasyUI

（五）基本介绍

是基于jQuery的UI插件集合,增强用户界面,完成浏览器和服务器和交互(ajax异步交互)的效果

（六）使用方式

需要集成EasyUI的css和js文件
一定要引入EasyUI自己的css和js文件,因为不同公司的jQuery类库文件不同(类库可以自己扩展)　
需要引入easyui.css icon.css 等等配置文件,看看下面图片,注意不要放在 WEB-INF里面
要想在页面中使用EasyUI，那么首先要做的就是在页面中引入必要js和css样式文件，以在jsp文件中使用EasyUI为例，文件引入的顺序如下所示
这个估计是在HTML的吧???

这个是在jsp里面引入的东西

以上四个文件为必须引入，其他文件为可选
引入以上四个文件后，就可以使用easyUi了

（七）小技巧

让组件占满需要使用data-options=”fit:true”
如果让图片平铺框框里面需要设置 height=“100%” width=“100%”

如果不知道页面是否加载,建议先指定到那个页面,看看有没有数据再.
路径引号问题
前端杂七杂八[笔记] - 图5

（八）分页已经需要的json格式数据(EasyUI特有的)

具体看黑马51期的视频:
获取当前页:
page是当前页
rows是每页显示条数
需要特殊的json格式数据,否则无法解析

（九）EasyUI需要明白的知识点

1 如何将一个普通的html标签渲染成easyUI的组件？
在html标签中引入属性class 以及属性值：easyui-组件名

2 如何给渲染成功的组件设置额外样式？
在html标签中引入属性data-options 以及属性值：去文档中查询
ps:如果值是中文获取是样式需要加单引号

3 渲染成easyUI组件有2类：
1 静态方式/css方式
特点：所有内容都要写在标签体内
例如：

The window content.

2 动态方式/js方式
特点：所有内容都要写在js代码中
例如：

123456

4 easyui提供的组件所具有的内容：
1 属性
2 事件
3 方法

属性和事件：
$(“元素”).组件名(
{

设置属性
设置事件
})
方法：$(“元素”).组件名(“方法名”,方法值)
ps: 方法值有可能是一个也有可能是多个
如果是一个：直接写 (“方法名”,方法值)
如果是多个：(“方法名”,{值名1：值1,值名2：值2…})

（十）Jquery EasyUi插件功能

jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合，包括功能强大的 datagrid（数据网格）、treegrid（树形表格）、 panel（面板）、combo（下拉组合）等等。用户可以组合使用这些组件，也可以单独使用其中一个。
功能如下图：(可能不全)
前端杂七杂八[笔记] - 图6