前端杂的学习笔记

什么是nginx

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器

Nginx是一款轻量级的Web 服务器/反向代理服务器，处理高并发能力是十分强大的，并且支持热部署，启动简单，可以做到7*24不间断运行

正代和反代

学习nginx，最重要的就是反向代理

安装nginx

直接安装

初学者可以尝试这种模式

yum install -y nginx

docker安装

docker pull nginx:latest

docker run -itd --name nginx -p 80:80 nginx:latest

用docker的话，就把配置文件和目录映射出来，方便修改

常用命令

# 开启服务
nginx
# 快速停止
nginx -s stop
# 有序停止
nginx -s quit
# 重启服务：
nginx -s reload
# 检查配置文件是否有语法操作
nginx -t

nginx.conf

nginx默认配置文件

一般在/usr/local/nginx/conf/nginx.conf

nginx.conf由多个块组成，最外面的块是main，main包含Events和HTTP，HTTP包含upstream和多个Server，Server又包含多个location

user  nginx;  # 指定nginx进程的运行用户
worker_processes  auto; # 指定Nginx要开启的进程数，每个Nginx进程平均耗费10M~12M内存。建议指定和CPU的数量一致即可。

error_log  /var/log/nginx/error.log notice; # 用来定义全局错误日志文件。日志输出级别有debug、info、notice、warn、error、crit可供选择，其中，debug输出日志最为最详细，而crit输出日志最少。
pid        /var/run/nginx.pid; # 用来指定进程pid的存储文件位置


events {
    worker_connections  1024;  # 用于定义Nginx每个进程的最大连接数，默认是1024
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;   # 这里设定默认类型为二进制流，也就是当文件类型未定义时使用这种方式，例如在没有配置PHP环境时，Nginx是不予解析的，此时，用浏览器访问PHP文件就会出现下载窗口。

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on; # 用于开启高效文件传输模式。将tcp_nopush和tcp_nodelay两个指令设置为on用于防止网络阻塞；

    keepalive_timeout  65;  # 设置客户端连接保持活动的超时时间。在超过这个时间之后，服务器会关闭该连接；


    include /etc/nginx/conf.d/*.conf;  # 导入其他的配置文件，注意include所在的位置
}

main（全局设置）、server（主机设置）、upstream（负载均衡服务器设置）和 location（URL匹配特定位置的设置）。

main块设置的指令将影响其他所有设置；
server块的指令主要用于指定主机和端口；
upstream指令主要用于负载均衡，设置一系列的后端服务器；
location块用于匹配网页位置。

localtion

URL地址匹配是进行Nginx配置中最灵活的部分。 location支持正则表达式匹配，也支持条件判断匹配，用户可以通过location指令实现Nginx对动、静态网页进行过滤处理

我这里准备了一个html文件，html文件引入了图片

然后配置文件如下：

server {
    listen 80;
    location / {
        root /opt/nginx_study/html; # 根目录
        index index.html; # 默认显示的页面
    }
}

此时访问服务器ip就可以正常看到页面和图片

注意啊，在html引入图片是相对路径，如果你这样写

<img src="/html/image/1.jpg" alt="">
<img src="/html/image/2.jpg" alt="">

不改nginx的情况下，页面上能看到图片吗？

答案是肯定的，肯定看不到的

那我们可以配置一下图片的访问路径

server {
    listen 80;

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
        root /opt/nginx_study;
    }
    
    location / {
        root /opt/nginx_study/html; # 根目录
        index index.html; # 默认显示的页面
    }
}

或者

server {
    listen 80;

    location /html/ { # 后面没有/就会重定向
        root /opt/nginx_study;
        index image/1.jpg;  # 直接访问这个路径，会显示这个图片
    }
    location / {
        root /opt/nginx_study/html; # 根目录
        index index.html; # 默认显示的页面
    }


}

alias

Nginx中配置文件路径有两种方式，一种是root一种是alias

例如一个项目里面，有两个html文件要配置路由去访问

目录如下

html
    html1
       index.html
    html2
       index.html

我想实现访问127.0.0.1:80就是访问html1下的index.html

访问127.0.0.1:80/xxx就是访问html2下的index.html

如果这样写，会发现/xxx/怎么也到不了/html2那里

server {
    listen 80;

    location / {
        root /opt/nginx_study/html/html1;
        index index.html;
    }
     location /xxx/ {
        root /opt/nginx_study/html/html2/;  # 会把/xxx/的路径拼接上
        index index.html;
    }
}

所以就有了路径别名

这样就可以解决这个问题了

server {
    listen 80;

    location / {
        root /opt/nginx_study/html/html1;
        index index.html;
    }
     location /xxx/ {
        alias /opt/nginx_study/html/html2/;  # 只会把/xxx/后面的路径拼接过来
        index index.html;
    }
}

域名配置

server_name

如果你的项目是用ip访问的话，这个可以不写

但是如果你的服务器上要跑很多服务，并且都想使用80端口去访问

那就使用域名

通过访问不同的子域名来访问不同的服务

准备三个目录，方便让三个子域名访问

因为演示是在内网环境，没有真正的域名可以用

所以我们只能修改访问者的hosts文件，将上面三个域名执行到目标服务器上

例如我现在的hosts文件

192.168.100.185 doc.fengfengzhidao.com
192.168.100.185 news.fengfengzhidao.com
192.168.100.185 video.fengfengzhidao.com

然后配置nginx配置文件

server {
    listen 80;
    server_name doc.fengfengzhidao.com;

    location / {
        root /opt/nginx_study/html/doc.fengfengzhidao.com;
        index index.html;
    }
}
server {
    listen 80;
    server_name news.fengfengzhidao.com;

    location / {
        root /opt/nginx_study/html/news.fengfengzhidao.com;
        index index.html;
    }
}
server {
    listen 80;
    server_name video.fengfengzhidao.com;

    location / {
        root /opt/nginx_study/html/video.fengfengzhidao.com;
        index index.html;
    }
}

测试

C:\Users\枫枫>curl http://doc.fengfengzhidao.com
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
doc.fengfengzhidao.com
</body>
</html>


C:\Users\枫枫>curl http://news.fengfengzhidao.com
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
news.fengfengzhidao.com
</body>
</html>


C:\Users\枫枫>curl http://video.fengfengzhidao.com
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
video.fengfengzhidao.com
</body>
</html>

其他匹配模式

server_name 中支持通配符 "*", 但需要注意的是通配符不能出现在域名的中间，只能出现在首段或尾段

server_name 中可以使用正则表达式，并且使用 ~ 作为正则表达式字符串的开始标记

有些博客网站，用户创建博客之后就会得到一个自己的专属博客，我们可以使用通配符来实现这个修改

server {
    listen 80;
    server_name *.bolg.fengfengzhidao.com;

    location / {
        root /opt/nginx_study/html/doc.fengfengzhidao.com;
        index index.html;
    }
}

也可以使用正则表达式

这样就只能 zhangsan lisi wangwu三个访问

server {
    listen 80;
    server_name ~^(zhangsan)|(lisi)|(wangwu).bolg.fengfengzhidao.com$;

    location / {
        root /opt/nginx_study/html/doc.fengfengzhidao.com;
        index index.html;
    }
}

当然，前端肯定要获取当前的子域名是什么，然后发给后端查询是否有这个用户

我们的hosts文件

192.168.100.185 blog.fengfengzhidao.com
192.168.100.185 zhangsan.blog.fengfengzhidao.com
192.168.100.185 lisi.blog.fengfengzhidao.com
192.168.100.185 wangwu.blog.fengfengzhidao.com
192.168.100.185 fengfeng.blog.fengfengzhidao.com

认证

经常能看到这种输入用户名密码才能访问的网页

这种效果是怎么实现的呢

使用htpasswd生成特定的密码文件

yum install httpd-tools -y

这里我以test用户，密码123456为例

htpasswd -c  /opt/nginx_study/auth/htpasswd  test

nginx配置认证

server {
    listen 80;
    
    location / {
      # 开启功能模块，关闭为off
        auth_basic on;
        # 指定密码配置文件
        auth_basic_user_file /opt/nginx_study/auth/htpasswd;
        root /opt/nginx_study/html; # 根目录
        index index.html; # 默认显示的页面
    }

}

如果是用curl访问

curl -u test:123456 http://127.0.0.1

proxy_pass

这个就是nginx的重头戏了，nginx的代理

一般是针对特定的路由，代理到后端服务器上

例如我这里写了一个程序，匹配全部的路径，然后打印出来

package main

import (
  "encoding/json"
  "flag"
  "fmt"
  "github.com/gin-gonic/gin"
)

var name *string

// handler
func handler(c *gin.Context) {
  byteData, _ := json.Marshal(c.Request.Header)
  fmt.Println(string(byteData))
  c.String(200, fmt.Sprintf("%s %s name:%s", c.Request.URL.Path, c.ClientIP(), *name))
  return
}

func main() {
  addr := flag.String("addr", ":8080", "addr")
  name = flag.String("name", "default", "name")
  flag.Parse()
  router := gin.Default()
  router.GET("", handler)
  fmt.Println("服务运行中...")
  fmt.Printf("服务运行在：%s \n", *addr)
  router.Run(*addr)
}

build.bat

set GOOS=linux
go build -o main
set GOOS=windows

然后将编译好的文件，放在服务器上运行

然后配置proxy_pass

server {
    listen 80;

    location /a1/ {  # 匹配/a1/开始，将/a1/之后的加到/之后
        proxy_pass http://127.0.0.1:8080/;
    }
    location /a2/ {   # 匹配/a2/开始，将匹配的路径加到/之后，直观感受就是把被匹配的路径加上了
        proxy_pass http://127.0.0.1:8080;
    }
    location /b1/ {
        proxy_pass http://127.0.0.1:8080/xxx/;
    }
    location /b2/ {
        proxy_pass http://127.0.0.1:8080/xxx;
    }
}

这里这个路径会有绝对路径和相对路径的说法，演示一下就清楚了

请求路径                              实际到后端的路径
/a1/                                     /
/a1/123                                  /123

/a2/                                     /a2/
/a2/123                                  /a2/123

/b1/                                     /xxx/
/b1/123                                  /xxx/123

/b2/                                     /xxx
/b2/123                                  /xxx123

携带原始ip

这个时候，你会发现，我请求192.168.100.185这个服务器ip

但是在服务内部接收到的ip全是127.0.0.1，这是为什么呢

我们都知道，nginx的proxy就是代理，将源用户的请求代理到目标服务器上，也就是请求者变成了nginx

我们只需要将源请求的标识ip的特征，一起代理过去就行

主要配置一个特殊的请求头就可以了

server {
    listen 80;
    # proxy_set_header X-Real-IP $remote_addr; # 加在这里也可以

    location /a1/ {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://127.0.0.1:8080/;
    }
}

负载均衡

nginx应用场景之一就是负载均衡。在访问量较多的时候，可以通过负载均衡，将多个请求分摊到多台服务器上，相当于把一台服务器需要承担的负载量交给多台服务器处理，进而提高系统的吞吐率；另外如果其中某一台服务器挂掉，其他服务器还可以正常提供服务，以此来提高系统的可伸缩性与可靠性。

后端启动两个服务

./main -addr 127.0.0.1:8080 -name s1
./main -addr 127.0.0.1:8081 -name s2
upstream myapp1 {
  server 127.0.0.1:8080;
  server 127.0.0.1:8081;
}


server {
    listen 80;

    location /api/ {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://myapp1/;
    }
}

然后访问服务器ip:80/api/

你会发现分别将请求打到不同的后端服务上了

此时它们的权重是一样的

nginx给我们提供了不同的权重模式

轮询(Nginx自带、默认)

该策略是Nginx默认的负载均衡策略，每一个客户端请求按时间顺序轮流分配到不同的服务器上，如果后端服务不可以用，会自动过滤掉。

weight 权重(Nginx自带)

upstream myapp1 {
  server 127.0.0.1:8080 weight=1;  # 打中的比例是 1/3
  server 127.0.0.1:8081 weight=2;  # 打中的比例是 2/3
}

ip_hash(Nginx自带)

ip_hash是将每个请求按照访问ip的hash结果进行分配，这种方式可以保证同一个用户会固定访问一个后端服务器。优点：可以保证session会话，解决服务器之间session不能共享的问题。

upstream myapp1 {
  ip_hash;
  server 127.0.0.1:8080;
  server 127.0.0.1:8081;
}


server {
    listen 80;

    location /api/ {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://myapp1/;
    }
}

least_conn(Nginx自带)

将请求转发给连接数较少的后端服务器。每个后端服务器配置可能不同，处理的请求也有可能不同，对于处理的请求有快有慢，least_conn是根据后端服务器的连接情况，动态的选择连接数量较少的一台服务器来处理当前的请求。

upstream myapp1 {
    least_conn;
  server 127.0.0.1:8080;
  server 127.0.0.1:8081;
}


server {
    listen 80;

    location /api/ {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://myapp1/;
    }
}

nginx限制措施

黑名单

nginx的黑名单功能可以直接在nginx层面拦截恶意ip，让它到不了后端服务

被拦截之后的效果就是这样

它的配置也很简单

server {
    listen 80;
#     deny 192.168.100.113;  # 可以放在 server块

    location / {
        root /opt/nginx_study/html/;
        index index.html;
    }

    location /yyy/ {
        deny 192.168.100.113; # 也可以放在location块中
        alias /opt/nginx_study/html/;
        index index.html;
    }
}

deny 这个配置也是不挑地方的，可以放在不同的作用域中

也可以专门用一个文件去存放黑名单，只需要在不同的地方include即可，如下

black.conf

deny 192.168.100.113;

nginx.conf

server {
    listen 80;

    location / {
        root /opt/nginx_study/html/;
        index index.html;
    }

    include /opt/nginx_study/black.conf;
}

白名单

allow，一般和deny 连用

如下，只允许192.168.100.113访问，其他ip访问则被拒绝

server {
    listen 80;

    allow 192.168.100.113;
    deny all;

    location / {
        root /opt/nginx_study/html/;
        index index.html;
    }
}

UA黑名单

map $http_user_agent $bad_user_agent {
        default         0;
        ~*curl           1;
        ~*wget           1;
        ~*Unicornscan    1;
        ~*sqlmap         1;
        ~*nessus         1;
        ~*netsparker     1;
    }

server {
    listen 80;

     if ($bad_user_agent) {
        return 404;
    }

    location / {
        root /opt/nginx_study/html/;
        index index.html;
    }
}

注意，这个map只能写在server的外面

此时，通过 curl直接访问会得到 404

C:\Users\枫枫>curl 192.168.100.185
<html>
<head><title>404 Not Found</title></head>
<body bgcolor="white">
<center><h1>404 Not Found</h1></center>
<hr><center>nginx/1.13.7</center>
</body>
</html>


C:\Users\枫枫>curl --user-agent sss 192.168.100.185
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
你会
</body>
</html>

Referer黑名单

map $http_referer $bad_referer {
        default         0;
        ~*evil\.com     1;
        ~*xxx\.com      1;
        ~*yyy\.com      1;
    }

server {
    listen 80;

     if ($bad_referer) {
        return 404;
    }

    location / {
        root /opt/nginx_study/html/;
        index index.html;
    }
}
C:\Users\枫枫>curl 192.168.100.185
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
你会
</body>
</html>


C:\Users\枫枫>curl -e xxx.com 192.168.100.185
<html>
<head><title>404 Not Found</title></head>
<body bgcolor="white">
<center><h1>404 Not Found</h1></center>
<hr><center>nginx/1.13.7</center>
</body>
</html>

请求频率黑名单

黑客可以通过发送大量请求来模拟各种攻击，在一定时间内发送的请求达到某个阈值后则会被判定为恶意请求。实现请求频率限制也是黑名单的一种应用场景

这是一分钟内请求5次的示例

limit_req_zone $binary_remote_addr zone=perip:10m rate=5r/m;


server {
    listen 80;

    limit_req zone=perip burst=5 nodelay;

    location / {
        root /opt/nginx_study/html/;
        index index.html;
    }
}

这是一秒钟内请求5次的示例

limit_req_zone $binary_remote_addr zone=perip:10m rate=5r/s;


server {
    listen 80;

    limit_req zone=perip burst=10 nodelay;  # 最多可以处理10个并发请求

    location / {
        root /opt/nginx_study/html/;
        index index.html;
    }
}

https配置

自签名ssl证书

openssl genrsa -out private.key 2048
openssl req -new -key private.key  -out cert.csr
openssl x509 -req -in cert.csr -out cacert.pem -signkey private.key
server {
    listen 443 ssl;
    ssl_certificate /opt/nginx_study/ssl/cacert.pem;  # pem的路径
    ssl_certificate_key /opt/nginx_study/ssl/private.key;  # key的路径

    location / {
        root /opt/nginx_study/html/;
        index index.html;
    }
}

因为是自签的，所以浏览器会提示不安全，正常的

云平台的ssl证书

将key和pem文件放到服务器上

server {
    listen 80;  # 将80的请求重定向到443上去
    server_name www.xxx.com;
    return 301 https://$server_name$request_uri; 
}

server {
    listen 443 ssl;
    ssl_certificate /www/server/nginx/www.xxx.com.pem;  # pem的路径
    ssl_certificate_key /www/server/nginx/www.xxx.com.key;  # key的路径
    server_name www.xxx.com;
    
    location / {
        uwsgi_pass   127.0.0.1:8000;  # 这个案例是uwsgi的案例
        include uwsgi_params;
     }
    
    location /static {
        alias  /www/wwwroot/flask_deploy/static;
    }
}

gzip配置

这个配置也是不挑地方的

server {
    listen 80;

    location / {
        gzip on;
        gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
        root /opt/nginx_study/html/;
        index index.html;
    }

     location /xxx/ {
        alias /opt/nginx_study/html/;
        index index.html;
    }
}

参考文档

官网：nginx

nginx详解：Nginx详解（一文带你搞懂Nginx）-CSDN博客

nginx常用命令操作：nginx常用操作命令_nginx命令-CSDN博客

8分钟了解nginx：https://zhuanlan.zhihu.com/p/34943332

nginx常用命令和总结：nginx的常用命令和总结 - ministep88 - 博客园

nginx配置文件： Nginx安装及配置文件nginx.conf详解-CSDN博客

nginx负载均衡：百度安全验证

nginx server_name: nginx 配置指令之server_name_nginx servername-CSDN博客

nginx 黑名单：如何使用Nginx实现IP黑名单-Nginx-PHP中文网

nginx请求频率限制：https://www.python100.com/html/109613.html

nginx gzip： Nginx中启用Gzip压缩加速网页加载,-CSDN博客

nginx gzip具体配置： Nginx Gzip配置详解：优化压缩效率与范围-CSDN博客

jQuery 安装

下载 jQuery

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩
Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从 jquery.com 中下载

<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>

替代方案

Staticfile CDN:

<head>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
    </script>
</head>

百度 CDN:

<head>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
</head>

字节跳动:

<head>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js">
    </script>
</head>

又拍云 CDN:

<head>
    <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
    </script>
</head>

新浪 CDN:

<head>
    <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
    </script>
</head>

Microsoft CDN:

<head>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
</head>

jQuery 语法

基础语法： $(selector).action()

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素

文档就绪事件

实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){
    // 执行代码
});
// 或者
$(function(){
    // 执行代码
});

jQuery 选择器

元素选择器

<script src="https://cdn.staticfile.net/jquery/2.0.0/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").hide();
        });
    });
</script>
</head>
<body>
    <h2>这是一个标题</h2>
    <p>这是一个段落</p>
    <button>点我</button>
</body>

#id 选择器

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#test").hide();
        });
    });
</script>
</head>
<body>
    <h2>这是一个标题</h2>
    <p>这是一个段落</p>
    <p id="test">这是另外一个段落</p>
    <button>点我</button>
</body>

.class 选择器

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $(".test").hide();
        });
    });
</script>
</head>
<body>
    <h2 class="test">这是一个标题</h2>
    <p class="test">这是一个段落</p>
    <p>这是另外一个段落</p>
    <button>点我</button>
</body>

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p.intro")	选取 class 为 intro 的 <p> 元素
$("p:first")	选取第一个 <p> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素
$("tr:even")	选取偶数位置的 <tr> 元素
$("tr:odd")	选取奇数位置的 <tr> 元素

独立文件中使用 jQuery 函数

<head>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="my_jquery_functions.js"></script>
</head>

jQuery 事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick 双击元素时警报	keydown	change 规定针对被选元素当 change 事件发生时运行的函数	resize
mouseenter	keyup	focus 获得焦点时发生 focus 事件	scroll
mouseleave		blur 失去焦点时发生 blur 事件	unload
hover

鼠标事件

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("p").click(function(){
            $(this).fadeOut();
        });
    });
</script>
</head>
<body>
    <p>点击这个段落，使其消失。</p>
</body>

<script>
    $(document).ready(function(){
        $("p").dblclick(function(){
            $(this).fadeOut();
        });
    });
</script>

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("p").mouseenter(function(){
            $("p").css("background-color","yellow");
        });
        $("p").mouseleave(function(){
            $("p").css("background-color","lightgray");
        });
    });
</script>
</head>
<body>
    <p>鼠标移动到该段落。</p>
</body>

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("p").hover(function(){
            $("p").css("background-color","yellow");
        },function(){
            $("p").css("background-color","pink");
        });
    });
</script>
</head>
<body>
    <p>鼠标移动到该段落。</p>
</body>

键盘事件

与 keypress 事件相关的事件顺序：

keydown 键按下的过程
keypress 键被按下
keyup 键被松开

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    i=0;
    $(document).ready(function(){
        $("input").keypress(function(){
            $("span").text(i+=1);
        });
    });
</script>
</head>
<body>
    输入你的名字: <input type="text">
    <p>按键的次数: <span>0</span></p>
</body>

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("input").keydown(function(event){ 
            $("div").html("Key: " + event.which);
        });
    });
</script>
</head>
<body>
    输入名称: <input type="text">
    <p>当你在以上输入框中输入内容时，div 中会陷入输入键的数字码。</p>
    <div />
</body>

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("input").keydown(function(){
            $("input").css("background-color","yellow");
        });
        $("input").keyup(function(){
            $("input").css("background-color","pink");
        });
    });
</script>
</head>
<body>
    输入你的名字: <input type="text">
    <p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p>
</body>

表单事件

当提交表单时，显示警告框：

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("form").submit(function(){
            alert("Submitted");
        });
        $("button").click(function(){
            $("form").submit();
        });  
    });
</script>
</head>
<body>
    <form action="">
        First name: 
        <input type="text" name="FirstName" value="Mickey"><br>
        Last name: 
        <input type="text" name="LastName" value="Mouse"><br>
    </form> 
    <button>触发 submit 事件</button>
</body>

文档/窗口事件

$(document).ready(function(){
	$("img").load(function(){
		alert("图片已载入");
	});
});

对浏览器窗口调整大小进行计数

<script>
    x=0;
    $(document).ready(function(){
        $(window).resize(function(){
            $("span").text(x+=1);
        });
    });
</script>

对元素滚动的次数进行计数

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    x=0;
    $(document).ready(function(){
        $("div").scroll(function(){
            $("span").text(x+=1);
        });
    });
</script>
</head>
<body>
    <p>尝试滚动 div 中的滚动条</p>
    <div style="border:1px solid black;width:200px;height:100px;overflow:scroll;">菜鸟教程 —— 学的不仅是技术，更是梦想！菜鸟教程 —— 学的不仅是技术，更是梦想！
        <br><br>
        菜鸟教程 —— 学的不仅是技术，更是梦想！菜鸟教程 —— 学的不仅是技术，更是梦想！</div>
    <p>滚动了 <span>0</span> 次。</p>
</body>

当离开页面时，显示提示消息

$(window).unload(function(){
    alert("Goodbye!");
});

jQuery 效果- 隐藏和显示

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("#hide").click(function(){
            $("p").hide(1000);
        });
        $("#show").click(function(){
            $("p").show(1000);
        });
    });
</script>
</head>
<body>
    <p>如果你点击“隐藏” 按钮，我将会消失。</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
</body>

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<style>
    div{
        width: 130px;
        height: 50px;
        padding: 15px;
        margin: 15px;
        background-color: green;
    }
</style>
<script>
    $(document).ready(function(){
        $(".hidebtn").click(function(){
            $("div").hide(1000,"linear",function(){
                alert("Hide() 方法已完成!");
            });
        });
    });
</script>
</head>
<body>
    <div>隐藏及设置回调函数</div>
    <button class="hidebtn">隐藏</button>
</body>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").toggle(1000);
        });
    });
</script>

jQuery Callback 方法

许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数

speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒

<!-- 在隐藏效果完全实现后回调函数 -->
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").hide("slow",function(){
                alert("段落现在被隐藏了");
            });
        });
    });
</script>
</head>
<body>
    <button>隐藏</button>
    <p>我们段落内容，点击“隐藏”按钮我就会消失</p>
</body>

<!-- 没有回调函数，警告框会在隐藏效果完成前弹出 -->
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").hide(1000);
            alert("现在段落被隐藏了");
        });
    });
</script>
</head>
<body>
    <button>隐藏</button>
    <p>这是一个段落，内容很少</p>
</body>

jQuery 效果 - 淡入淡出

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").fadeIn();
            $("#div2").fadeIn("slow");
            $("#div3").fadeIn(3000);
        });
    });
</script>
</head>
<body>
    <p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
    <button>点击淡入 div 元素</button>
    <br><br>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").fadeOut();
            $("#div2").fadeOut("slow");
            $("#div3").fadeOut(3000);
        });
    });
</script>
</head>
<body>
    <p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
    <button>点击淡出 div 元素。</button>
    <br><br>
    <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
    <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
    <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").fadeToggle();
            $("#div2").fadeToggle("slow");
            $("#div3").fadeToggle(3000);
        });
    });
</script>
</head>
<body>
    <p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
    <button>点击淡入/淡出</button>
    <br><br>
    <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
    <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
    <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").fadeTo("slow",0.15);
            $("#div2").fadeTo("slow",0.4);
            $("#div3").fadeTo("slow",0.7);
        });
    });
</script>
</head>
<body>
    <p>演示 fadeTo() 使用不同参数</p>
    <button>点我让颜色变淡</button>
    <br><br>
    <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
    <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
    <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>

jQuery 效果 - 滑动

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script> 
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideDown("slow");
        });
    });
</script>
<style type="text/css"> 
    #panel,#flip {
        padding:5px;
        text-align:center;
        background-color:#e5eecc;
        border:solid 1px #c3c3c3;
    }
    #panel {
        padding:50px;
        display:none;
    }
</style>
</head>
<body>
    <div id="flip">点我滑下面板</div>
    <div id="panel">Hello world!</div>
</body>

jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script> 
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideUp("slow");
        });
    });
</script>
<style type="text/css"> 
    #panel,#flip {
        padding:5px;
        text-align:center;
        background-color:#e5eecc;
        border:solid 1px #c3c3c3;
    }
    #panel {
        padding:50px;
    }
</style>
</head>
<body>
    <div id="flip">点我拉起面板</div>
    <div id="panel">Hello world!</div>
</body>

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script> 
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideToggle("slow");
        });
    });
</script>
<style type="text/css"> 
    #panel,#flip {
        padding:5px;
        text-align:center;
        background-color:#e5eecc;
        border:solid 1px #c3c3c3;
    }
    #panel {
        padding:50px;
        display:none;
    }
</style>
</head>
<body>
    <div id="flip">点我，显示或隐藏面板。</div>
    <div id="panel">Hello world!</div>
</body>

jQuery 效果- 动画

animate() 方法

animate() 方法用于创建自定义动画

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script> 
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({left:'250px'});
        });
    });
</script> 
</head>
<body>
    <button>开始动画</button>
    <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
        如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    </div>
</body>

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script> 
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({
                left:'250px',
                opacity:'0.5',
                height:'150px',
                width:'150px'
            });
        });
    });
</script> 
</head>
<body>
    <button>开始动画</button>
    <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
        如果需要改变，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    </div>
</body>

animate() - 使用相对值

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script> 
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({
                left:'250px',
                height:'+=150px',
                width:'+=150px'
            });
        });
    });
</script> 
</head>
<body>
    <button>开始动画</button>
    <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
        如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    </div>
</body>

animate() - 使用预定义的值

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script> 
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({
                height:'toggle'
            });
        });
    });
</script> 
</head>
<body>
    <button>开始动画</button>
    <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
        如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    </div>
</body>

animate() - 使用队列功能

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script> 
    $(document).ready(function(){
        $("button").click(function(){
            var div=$("div");
            div.animate({height:'300px',opacity:'0.4'},"slow");
            div.animate({width:'300px',opacity:'0.8'},"slow");
            div.animate({height:'100px',opacity:'0.4'},"slow");
            div.animate({width:'100px',opacity:'0.8'},"slow");
        });
    });
</script> 
</head>
<body>
    <button>开始动画</button>
    <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
        如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    </div>
</body>

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script> 
    $(document).ready(function(){
        $("button").click(function(){
            var div=$("div");  
            div.animate({left:'100px'},"slow");
            div.animate({fontSize:'3em'},"slow");
        });
    });
</script> 
</head>
<body>
    <button>开始动画</button>
    <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
        如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>

jQuery 停止动画

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script> 
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideDown(5000);
        });
        $("#stop").click(function(){
            $("#panel").stop();
        });
    });
</script>
<style type="text/css"> 
    #panel,#flip {
        padding:5px;
        text-align:center;
        background-color:#e5eecc;
        border:solid 1px #c3c3c3;
    }
    #panel {
        padding:50px;
        display:none;
    }
</style>
</head>
<body>
    <button id="stop">停止滑动</button>
    <div id="flip">点我向下滑动面板</div>
    <div id="panel">Hello world!</div>
</body>

jQuery - 链(Chaining)

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function() {
        $("button").click(function() {
            $("#p1").css("color","red").slideUp(2000).slideDown(2000);
        });
    });
</script>
</head>
<body>
    <p id="p1">菜鸟教程!!</p>
    <button>点我</button>
</body>

jQuery - 获取内容和属性

获得内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标签）
val() - 设置或返回表单字段的值

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("#btn1").click(function(){
            alert("Text: " + $("#test").text());
        });
        $("#btn2").click(function(){
            alert("HTML: " + $("#test").html());
        });
    });
</script>
</head>
<body>
    <p id="test">这是段落中的 <b>粗体</b> 文本。</p>
    <button id="btn1">显示文本</button>
    <button id="btn2">显示 HTML</button>
</body>

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            alert("值为: " + $("#test").val());
        });
    });
</script>
</head>
<body>
    <p>名称: <input type="text" id="test" value="菜鸟教程"></p>
    <button>显示值</button>
</body>

获取属性 - attr()

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            alert($("#runoob").attr("href"));
        });
    });
</script>
</head>
<body>
    <p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
    <button>显示 href 属性的值</button>
</body>

jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val()

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("#btn1").click(function(){
            $("#test1").text("Hello world!");
        });
        $("#btn2").click(function(){
            $("#test2").html("<b>Hello world!</b>");
        });
        $("#btn3").click(function(){
            $("#test3").val("RUNOOB");
        });
    });
</script>
</head>
<body>
    <p id="test1">这是一个段落。</p>
    <p id="test2">这是另外一个段落。</p>
    <p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
    <button id="btn1">设置文本</button>
    <button id="btn2">设置 HTML</button>
    <button id="btn3">设置值</button>
</body>

text()、html() 以及 val() 的回调函数

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("#btn1").click(function(){
            $("#test1").text(function(i,origText){
                return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
            });
        });

        $("#btn2").click(function(){
            $("#test2").html(function(i,origText){
                return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
            });
        });

    });
</script>
</head>
<body>
    <p id="test1">这是一个有 <b>粗体</b> 字的段落。</p>
    <p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p>
    <button id="btn1">显示 新/旧 文本</button>
    <button id="btn2">显示 新/旧 HTML</button>
</body>

设置属性 - attr()

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#runoob").attr("href","http://www.runoob.com/jquery");
        });
    });
</script>
</head>
<body>
    <p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
    <button>修改 href 值</button>
    <p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
</body>

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#runoob").attr({
                "href" : "http://www.runoob.com/jquery",
                "title" : "jQuery 教程"
            });
            // 通过修改的 title 值来修改链接名称
            title =  $("#runoob").attr('title');
            $("#runoob").html(title);
        });
    });
</script>
</head>
<body>
    <p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
    <button>修改 href 和 title</button>
    <p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>
</body>

attr() 的回调函数

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#runoob").attr("href", function(i, origValue){
                return origValue + "/jquery";
            });
        });
    });
</script>
</head>
<body>
    <p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
    <button>修改 href 值</button>
    <p>点击按钮修改后，可以点击链接查看 href 属性是否变化。</p>
</body>

jQuery - 添加元素

jQuery append() 方法

方法在被选元素的结尾插入内容（仍然在该元素的内部）

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("#btn1").click(function(){
            $("p").append(" <b>追加文本</b>。");
        });
        $("#btn2").click(function(){
            $("ol").append("<li>追加列表项</li>");
        });
    });
</script>
</head>
<body>
    <p>这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
    <button id="btn1">添加文本</button>
    <button id="btn2">添加列表项</button>
</body>

jQuery prepend() 方法

方法在被选元素的开头插入内容

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("#btn1").click(function(){
            $("p").prepend("<b>在开头追加文本</b>。 ");
        });
        $("#btn2").click(function(){
            $("ol").prepend("<li>在开头添加列表项</li>");
        });
    });
</script>
</head>
<body>
    <p>这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <ol>
        <li>列表 1</li>
        <li>列表 2</li>
        <li>列表 3</li>
    </ol>
    <button id="btn1">添加文本</button>
    <button id="btn2">添加列表项</button>
</body>

通过 append() 和 prepend() 方法添加若干新元素

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    function appendText(){
        var txt1="<p>文本-1。</p>";              // 使用 HTML 标签创建文本
        var txt2=$("<p></p>").text("文本-2。");  // 使用 jQuery 创建文本
        var txt3=document.createElement("p");
        txt3.innerHTML="文本-3。";               // 使用 DOM 创建文本 text with DOM
        $("body").append(txt1,txt2,txt3);        // 追加新元素
    }
</script>
</head>
<body>
    <p>这是一个段落。</p>
    <button οnclick="appendText()">追加文本</button>
</body>

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容

jQuery before() 方法在被选元素之前插入内容

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("#btn1").click(function(){
            $("img").before("<b>之前</b>");
        });
        $("#btn2").click(function(){
            $("img").after("<i>之后</i>");
        });
    });
</script>
</head>
<body>
    <img src="/images/logo.png" >
    <br><br>
    <button id="btn1">之前插入</button>
    <button id="btn2">之后插入</button>
</body>

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    function afterText(){
        var txt1="<b>I </b>";                    // 使用 HTML 创建元素
        var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
        var txt3=document.createElement("big");  // 使用 DOM 创建元素
        txt3.innerHTML="jQuery!";
        $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
    }
</script>
</head>
<body>
    <img src="/images/logo2.png" >
    <br><br>
    <button οnclick="afterText()">之后插入</button>
</body>

jQuery - 删除元素

jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").remove();
        });
    });
</script>
</head>
<body>
    <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
        这是 div 中的一些文本。
        <p>这是在 div 中的一个段落。</p>
        <p>这是在 div 中的另外一个段落。</p>
    </div>
    <br>
    <button>移除div元素</button>
</body>

jQuery empty() 方法

jQuery empty() 方法删除被选元素的子元素

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").empty();
        });
    });
</script>
</head>
<body>
    <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
        这是 div 中的一些文本。
        <p>这是在 div 中的一个段落。</p>
        <p>这是在 div 中的另外一个段落。</p>
    </div>
    <br>
    <button>清空div元素</button>
</body>

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").remove(".italic");
        });
    });
</script> 
</head>
<body>
    <p>这是一个段落。</p>
    <p class="italic"><i>这是另外一个段落。</i></p>
    <p class="italic"><i>这是另外一个段落。</i></p>
    <button>移除所有  class="italic" 的 p 元素。</button>
</body>

jQuery - 获取并设置 CSS 类

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

jQuery addClass() 方法

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("h1,h2,p").addClass("blue");
            $("div").addClass("important blue");
        });
    });
</script>
<style type="text/css">
    .important {
        font-weight:bold;
        font-size:xx-large;
    }
    .blue {
        color:blue;
    }
</style>
</head>
<body>
    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <p>这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <div>这是一些重要的文本!</div> <br>
    <button>为元素添加 class</button>
</body>

jQuery removeClass() 方法

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("h1,h2,p").removeClass("blue");
        });
    });
</script>
<style type="text/css">
    .important {
        font-weight:bold;
        font-size:xx-large;
    }
    .blue {
        color:blue;
    }
</style>
</head>
<body>
    <h1 class="blue">标题 1</h1>
    <h2 class="blue">标题 2</h2>
    <p class="blue">这是一个段落。</p>
    <p class="important">这是另外一个段落。</p><br>
    <button>从元素中移除 class</button>
</body>

jQuery toggleClass() 方法

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("h1,h2,p").toggleClass("blue");
        });
    });
</script>
<style type="text/css">
    .blue {
        color:blue;
    }
</style>
</head>
<body>
    <h1 class="blue">标题 1</h1>
    <h2 class="blue">标题 2</h2>
    <p class="blue">这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <br>
    <button>切换 class</button>
</body>

jQuery css() 方法

返回 CSS 属性

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            alert("背景颜色 = " + $("p").css("background-color"));
        });
    });
</script>
</head>
<body>
    <h2>这是一个标题</h2>
    <p style="background-color:#ff0000">这是一个段落。</p>
    <p style="background-color:#00ff00">这是一个段落。</p>
    <p style="background-color:#0000ff">这是一个段落。</p>
    <button>返回第一个 p 元素的 background-color </button>
</body>

设置 CSS 属性

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").css("background-color","yellow");
        });
    });
</script>
</head>
<body>
    <h2>这是一个标题</h2>
    <p style="background-color:#ff0000">这是一个段落。</p>
    <p style="background-color:#00ff00">这是一个段落。</p>
    <p style="background-color:#0000ff">这是一个段落。</p>
    <p>这是一个段落。</p>
    <button>设置 p 元素的 background-color </button>
</body>

设置多个 CSS 属性

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").css({"background-color":"yellow","font-size":"200%"});
        });
    });
</script>
</head>
<body>
    <h2>这是一个标题</h2>
    <p style="background-color:#ff0000">这是一个段落。</p>
    <p style="background-color:#00ff00">这是一个段落。</p>
    <p style="background-color:#0000ff">这是一个段落。</p>
    <p>这是一个段落。</p>
    <button>为 p 元素设置多个样式</button>
</body>

jQuery 尺寸

width() height() innerWidth() innerHeight()

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）

innerWidth() 方法返回元素的宽度（包括内边距）

innerHeight() 方法返回元素的高度（包括内边距）

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            var txt="";
            txt+="div 宽度: " + $("#div1").width() + "</br>";
            txt+="div 高度: " + $("#div1").height() + "</br>";
            txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
            txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
            $("#div1").html(txt);
        });
    });
</script>
</head>
<body>
    <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
    <br>
    <button>显示 div 元素的尺寸</button>
    <p>innerWidth() - 返回元素的宽度 (包含内边距)。</p>
    <p>innerHeight() - 返回元素的高度 (包含内边距)。</p>
</body>

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）

outerHeight() 方法返回元素的高度（包括内边距和边框）

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            var txt="";
            txt+="div 宽度: " + $("#div1").width() + "</br>";
            txt+="div 高度: " + $("#div1").height() + "</br>";
            txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
            txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
            $("#div1").html(txt);
        });
    });
</script>
</head>
<body>
    <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
    <br>
    <button>显示 div 元素的尺寸</button>
    <p>outerWidth() - 返回元素的宽度 (包含内边距和边框)。</p>
    <p>outerHeight() - 返回元素的高度 (包含内边距和边框)。</p>
</body>

jQuery 遍历 - 祖先

jQuery parent() 方法

parent() 方法返回被选元素的直接父元素

<style>
    .ancestors *{ 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
</style>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("span").parent().css({"color":"red","border":"2px solid red"});
    });
</script>
</head>
<body>
    <div class="ancestors">
        <div style="width:500px;">div (曾祖父元素)
            <ul>ul (祖父元素)  
                <li>li (父元素)
                    <span>span</span>
                </li>
            </ul>   
        </div>
        <div style="width:500px;">div (祖父元素)   
            <p>p (父元素)
                <span>span</span>
            </p> 
        </div>
    </div>
</body>

jQuery parents() 方法

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)

<style>
    .ancestors * { 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
</style>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("span").parents().css({"color":"red","border":"2px solid red"});
    });
</script>
</head>
<body class="ancestors">body (曾曾祖父元素)
    <div style="width:500px;">div (曾祖父元素)
        <ul>ul (祖父元素)  
            <li>li (父元素)
                <span>span</span>
            </li>
        </ul>   
    </div>
</body>

$(document).ready(function(){
  $("span").parents("ul");
});

jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素

<style>
    .ancestors * { 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
</style>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
    });
</script>
</head>
<body class="ancestors"> body (曾曾祖父元素)
    <div style="width:500px;">div (曾祖父元素)
        <ul>ul (祖父元素)  
            <li>li (父元素)
                <span>span</span>
            </li>
        </ul>   
    </div>
</body>

jQuery 遍历 - 后代

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素

<style>
    .descendants * { 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
</style>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("div").children("p.1").css({"color":"red","border":"2px solid red"});
        // $("div").children().css({"color":"red","border":"2px solid red"});
    });
</script>
</head>
<body>
    <div class="descendants" style="width:500px;">div (当前元素) 
        <p class="1">p (儿子元素)
            <span>span (孙子元素)</span>     
        </p>
        <p class="2">p (儿子元素)
            <span>span (孙子元素)</span>
        </p> 
    </div>
</body>

jQuery find() 方法

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代

<!-- 返回属于 <div> 后代的所有 <span> 元素 -->
<style>
    .descendants * { 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
</style>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("div").find("span").css({"color":"red","border":"2px solid red"});
        // 返回 <div> 的所有后代
        // $("div").find("*").css({"color":"red","border":"2px solid red"});
    });
</script>
</head>
<body>
    <div class="descendants" style="width:500px;">div (当前元素) 
        <p>p (儿子元素)
            <span>span (孙子元素)</span>     
        </p>
        <p>p (儿子元素)
            <span>span (孙子元素)</span>
        </p> 
    </div>
</body>

jQuery 遍历 - 同胞(siblings)

jQuery siblings() 方法

siblings() 方法返回被选元素的所有同胞元素

<style>
    .siblings * { 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
</style>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("h2").siblings().css({"color":"red","border":"2px solid red"});
        // $("h2").siblings("p");  // 返回属于 <h2> 的同胞元素的所有 <p> 元素
    });
</script>
</head>
<body class="siblings">
    <div>div (父元素)
        <p>p</p>
        <span>span</span>
        <h2>h2</h2>
        <h3>h3</h3>
        <p>p</p>
    </div>
</body>

jQuery next() 方法

next() 方法返回被选元素的下一个同胞元素

<script>
    $(document).ready(function(){
        $("h2").next();
    });
</script>

jQuery nextAll() 方法

nextAll() 方法返回被选元素的所有跟随的同胞元素

<style>
    .siblings * { 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
</style>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("h2").nextAll().css({"color":"red","border":"2px solid red"});
    });
</script>
</head>
<body class="siblings">
    <div>div (父元素)
        <p>p</p>
        <span>span</span>
        <h2>h2</h2>
        <h3>h3</h3>
        <p>p</p>
    </div>
</body>

jQuery nextUntil() 方法

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素

<script>
    $(document).ready(function(){
        $("h2").nextUntil("h6");
    });
</script>

jQuery prev(), prevAll() & prevUntil() 方法

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）

jQuery 遍历- 过滤

jQuery first() 方法

first() 方法返回被选元素的首个元素

<script>
    $(document).ready(function(){
        $("div p").first();
    });
</script>

jQuery last() 方法

last() 方法返回被选元素的最后一个元素

<script>
    $(document).ready(function(){
        $("div p").last();
    });
</script>

jQuery eq() 方法

eq() 方法返回被选元素中带有指定索引号的元素

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("p").eq(1).css("background-color","yellow");
    });
</script>
</head>
<body>
    <h1>欢迎访问我的主页</h1>
    <p>菜鸟教程 (index 0).</p>
    <p>http://www.runoob.com (index 1)。</p>
    <p>google (index 2).</p>
    <p>http://www.google.com (index 3)。</p>
</body>

jQuery filter() 方法

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("p").filter(".url").css("background-color","yellow");
    });
</script>
</head>
<body>
    <h1>欢迎访问我的主页</h1>
    <p>菜鸟教程 (index 0).</p>
    <p class="url">http://www.runoob.com (index 1)。</p>
    <p>google (index 2).</p>
    <p class="url">http://www.google.com (index 3)。</p>
</body>

jQuery not() 方法

not() 方法返回不匹配标准的所有元素，not() 方法与 filter() 相反

<script>
    $(document).ready(function(){
        $("p").not(".url");
    });
</script>

jQuery - AJAX load() 方法

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").load("/try/ajax/demo_test.txt");
        });
    });
</script>
</head>
<body>
    <div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
    <button>获取外部内容</button>
</body>

load() 方法从服务器加载数据，并把返回的数据放入被选元素中

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合

可选的 callback 参数是 load() 方法完成后所执行的函数名称

这是示例文件（"demo_test.txt"）的内容：

<h2>jQuery AJAX 是个非常棒的功能！</h2>
<p id="p1">这是段落的一些文本</p>

$("#div1").load("demo_test.txt");

$("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
                if(statusTxt=="success")
                    alert("外部内容加载成功!");
                if(statusTxt=="error")
                    alert("Error: "+xhr.status+": "+xhr.statusText);
            });
        });
    });
</script>
</head>
<body>
    <div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>
    <button>获取外部内容</button>
</body>

jQuery - AJAX get() 和 post() 方法

jQuery $.get() 方法

<script>
    $.get(URL,callback);
    // 或
    $.get( URL [, data ] [, callback ] [, dataType ] )
</script>

URL：发送请求的 URL字符串
data：可选的，发送给服务器的字符串或 key/value 键值对
callback：可选的，请求成功后执行的回调函数
dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $.get("/try/ajax/demo_test.php",function(data,status){
                alert("数据: " + data + "\n状态: " + status);
            });
        });
    });
</script>
</head>
<body>
    <button>发送一个 HTTP GET 请求并获取返回结果</button>
</body>

jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

语法:

<script>
    $.post(URL,callback);
    // 或
    $.post( URL [, data ] [, callback ] [, dataType ] )
</script>

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $.post("/try/ajax/demo_test_post.php",{
                name:"菜鸟教程",
                url:"http://www.runoob.com"
            },
                   function(data,status){
                alert("数据: \n" + data + "\n状态: " + status);
            });
        });
    });
</script>
</head>
<body>
    <button>发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>

<?php
    $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$url;
?>
    # demo_test_post.php

jQuery - noConflict() 方法

jQuery 使用 $ 符号作为 jQuery 的简写

如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $.noConflict();
    jQuery(document).ready(function(){
        jQuery("button").click(function(){
            jQuery("p").text("jQuery 仍然在工作!");
        });
    });
</script>
</head>
<body>
    <p>这是一个段落</p>
    <button>点我</button>
</body>

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    var jq=$.noConflict();
    jq(document).ready(function(){
        jq("button").click(function(){
            jq("p").text("jQuery 仍然在工作!");
        });
    });
</script>
</head>
<body>
    <p>这是一个段落。</p>
    <button>点我</button>
</body>

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $.noConflict();
    jQuery(document).ready(function($){
        $("button").click(function(){
            $("p").text("jQuery 仍然在工作!");
        });
    });
</script>
</head>
<body>
    <p>这是一个段落。</p>
    <button>点我</button>
</body>

JSONP 教程

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据

JSONP 应用

1. 服务端 JSONP 格式数据

如客户想访问 : https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction。

假设客户期望返回数据：["customername1","customername2"]

真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])

服务端文件 jsonp.php 代码为：

<?php
    header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
    # jsonp.php

2. 客户端实现 callbackFunction 函数

<script type="text/javascript">
    function callbackFunction(result, methodName) {
        var html = '<ul>';
        for(var i = 0; i < result.length; i++) {
            html += '<li>' + result[i] + '</li>';
        }
        html += '</ul>';
        document.getElementById('divCustomers').innerHTML = html;
    }
</script>

页面展示

<div id="divCustomers"></div>

客户端页面完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JSONP 实例</title>
    </head>
    <body>
        <div id="divCustomers"></div>
        <script type="text/javascript">
            function callbackFunction(result, methodName) {
                var html = '<ul>';
                for(var i = 0; i < result.length; i++) {
                    html += '<li>' + result[i] + '</li>';
                }
                html += '</ul>';
                document.getElementById('divCustomers').innerHTML = html;
            }
        </script>
        <script type="text/javascript" src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
    </body>
</html>

jQuery 使用 JSONP

以上代码可以使用 jQuery 代码实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JSONP 实例</title>
        <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
    </head>
    <body>
        <div id="divCustomers"></div>
        <script>
            $.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
                var html = '<ul>';
                for(var i = 0; i < data.length; i++) {
                    html += '<li>' + data[i] + '</li>';
                }
                html += '</ul>';

                $('#divCustomers').html(html); 
            });
        </script>
    </body>
</html>

jQuery 插件

jQuery Validate | 菜鸟教程 (runoob.com)

jQuery 实例

jQuery 选择器

$(this).hide()

演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。

$("p").hide()

演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。

$(".test").hide()

演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。

$("#test").hide()

演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素。

jQuery 事件

jQuery click() 演示 jQuery jQuery click() 事件.

jQuery dblclick() 演示 jQuery dblclick() 事件。

jQuery mouseenter() 演示 jQuery mouseenter() 事件。

jQuery mouseleave() 演示 jQuery mouseleave() 事件。

jQuery mousedown() 演示 jQuery mousedown() 事件。

jQuery mouseup() 演示 jQuery mouseup() 事件。

jQuery hover() 演示 jQuery hover() 事件。

jQuery focus() 和 blur() 演示 jQuery focus() 和 blur() 事件。

实例解析

jQuery 隐藏/显示

jQuery hide() 演示 jQuery hide() 方法。

jQuery hide() 和 show() 演示jQuery hide() 和 show() 方法。

jQuery toggle() jQuery toggle() 用于切换 hide() 和 show() 方法。

jQuery hide() 另外一个隐藏文本的实例。

实例解析

jQuery 淡入淡出

jQuery fadeIn() 演示 jQuery fadeIn() 方法。

jQuery fadeOut() 演示 jQuery fadeOut() 方法。

jQuery fadeToggle() 演示 jQuery fadeToggle() 方法。

jQuery fadeTo() 演示 jQuery fadeTo() 方法。

实例解析

jQuery 滑动

jQuery slideDown() 演示 jQuery slideDown() 方法。

jQuery slideUp() 演示 jQuery slideUp() 方法。

jQuery slideToggle() 演示 jQuery slideToggle() 方法。

实例解析

jQuery 动画

jQuery animate() 演示简单的 jQuery animate() 方法。

jQuery animate() - 设置多个css属性演示通过 jQuery animate() 方法改变样式。

jQuery animate() - 使用相关值演示如何在 jQuery animate() 方法中使用相关值。

jQuery animate() - 使用预定义值演示通过 animate() 方法预定义 "hide", "show", "toggle" 值。

jQuery animate() 演示更多 jQuery animate() 方法实例

jQuery animate() 演示更多 jQuery animate() 方法实例 (多个 animate() 回调).

实例解析

jQuery 停止动画

jQuery stop() 滑动演示 jQuery stop() 方法。

jQuery stop() 动画 (带参数) 演示 jQuery stop() 方法。

实例解析

jQuery HTML 获取和属性

jQuery text() 和 html() - 获取文本和内容使用jQuery text() 和 html() 方法获取内容。

jQuery val() - 获取值使用jQuery val() 方法获取表单的字段值。

jQuery attr() - 获取属性值使用jQuery attr() 方法获取属性值。

实例解析

jQuery HTML 设置内容和属性

jQuery text(), html(), 和 val() - 设置内容使用 jQuery text(), html() 和 val() 方法设置内容。

jQuery text() 和 html() - 设置内容并使用回调函数使用 text() 和 html() 设置内容并使用回调函数

jQuery attr() - 设置属性值使用 jQuery attr() 方法设置属性值。

jQuery attr() - 设置多个属性值使用jQuery attr() 方法设置多个属性值。

jQuery attr() - 设置属性值并使用回调函数设置属性值 + 并使用回调函数调用attr().

实例解析

jQuery HTML 添加元素/内容

jQuery append() 在选取元素的末尾添加内容

jQuery prepend() 在选取元素的开头添加内容

jQuery append() -插入多个元素创新新的 text/HTML 元素, jQuery 和 JavaScript/DOM。添加在新元素文本后。

jQuery after() 和 before() 在选取元素的前后添加 HTML　元素。

jQuery after() - 插入多个元素创新新的 text/HTML 元素,jQuery和 JavaScript/DOM。在选取元素的末尾插入新元素。

实例解析

jQuery HTML 移除元素/内容

jQuery remove() 移除选取的元素

jQuery empty() 移除选取元素的所有子元素

jQuery remove() - 使用参数过滤元素并移除

实例解析

jQuery Get 和设置 CSS 类

jQuery addClass() 不同元素添加 class 属性

jQuery addClass() - 多个类使用 addClass() 方法添加多个类

jQuery removeClass() 移除指定元素的类

jQuery toggleClass() 在选取的元素切换（添加/删除）类

实例解析

jQuery css() 方法

jQuery css() - 返回 CSS 属性返回第一个匹配元素的css属性值

jQuery css() - 设置 CSS 属性设置所有配置元素指定的 CSS 属性

jQuery css() - 设置 CSS 属性设置多个匹配元素的 CSS 属性

实例解析

jQuery 尺寸

jQuery - 返回 width() 和 height() 返回指定元素的 width 和 height

jQuery - 返回 innerWidth() 和 innerHeight() 返回指定元素的 inner-width/height

jQuery - 返回 outerWidth() 和 outerHeight() 返回指定元素的 outer-width/height

jQuery - 返回 outerWidth(true) 和 outerHeight(true) 返回指定元素的 outer-width/height (包含外边框)

jQuery - 返回 width() 和 height() of document 和 window 返回 HTML 文档和窗口的 width 和 height

jQuery - 设置 width() 和 height() 设置指定元素的 width 和 height

实例解析

jQuery 遍历 - 祖先

jQuery parent() 演示 jQuery parent() 方法。

jQuery parents() 演示 jQuery parents() 方法。

jQuery parentsUntil() 演示 jQuery parentsUntil() 方法。

实例解析

jQuery 遍历 - 后代

jQuery children() 演示 jQuery children() 方法。

jQuery find() 演示 jQuery find() 方法。

实例解析

jQuery 遍历 - 同胞(siblings)

jQuery siblings() 演示 jQuery siblings() 方法。

jQuery next() 演示 jQuery next() 方法。

jQuery nextAll() 演示 jQuery nextAll() 方法。

jQuery nextUntil() 演示 jQuery nextUntil() 方法。

实例解析

jQuery AJAX load() 方法

jQuery load() 异步载入文件内容并插入到 <div> 元素中。

jQuery load() 异步载入文件内容中指定的元素内容并插入到 <div> 元素.

jQuery load() - 使用回调函数(callback) 使用 jQuery load() 方法的回调函数。

实例解析

jQuery AJAX get() 和 post() 方法

jQuery get() 使用 $.get() 方法从服务端异步获取数据

jQuery post() 使用 $.post() 方法从服务端异步获取数据

实例解析

其他实例

jQuery 动态粒子效果

`Elasticsearch`搜索引擎

es安装

# 拉取镜像
docker pull elasticsearch:7.12.0
# 创建docker容器挂载在的目录
# linux的命令
mkdir -p /opt/es/config & mkdir -p /opt/es/data & mkdir -p /opt/es/plugins
chmod 777 /opt/es/data
# 配置文件
echo "http.host: 0.0.0.0" > /opt/es/config/elasticsearch.yml
# 创建容器
# linux
docker run --name es -p 9200:9200  -p 9300:9300 -e "discovery.type=single-node" -e ES_JAVA_OPTS="-Xms84m -Xmx512m" -v /opt/es/config/elasticsearch.yml:/usr/share/elasticsearch/config/elasticsearch.yml -v /opt/es/data:/usr/share/elasticsearch/data -v /opt/es/plugins:/usr/share/elasticsearch/plugins -d elasticsearch:7.12.0
# windows
docker run --name es -p 9200:9200  -p 9300:9300 -e "discovery.type=single-node" -e ES_JAVA_OPTS="-Xms84m -Xmx512m" -v H:\\docker\\es\\config\\elasticsearch.yml:/usr/share/elasticsearch/config/elasticsearch.yml -v H:\\docker\\es\\data:/usr/share/elasticsearch/data -v H:\\docker\\es\\plugins:/usr/share/elasticsearch/plugins -d elasticsearch:7.12.0
# windows添加目录映射，需要在dockerDesktop里面设置映射目录

访问ip:9200能看到东西就说明安装成功了

浏览器可以下载一个 Multi Elasticsearch Head es插件

或者这个ElasticHD

连接es

package core
import (
    "es_study/global"
    "fmt"
    "github.com/olivere/elastic/v7"
)

func EsConnect() {
    client, err := elastic.NewClient(
        elastic.SetURL("http://127.0.0.1:9200"),
        elastic.SetSniff(false),
        elastic.SetBasicAuth("", ""),
    )
    if err != nil {
        fmt.Println(err)
        return
    }
    global.ESClient = client
}

es认证

不需要认证的情况

服务器自己使用，9200，9300端口不对外开放
本身跑在127.0.0.1上

需要认证的情况：

es需要对外提供服务的

给docker创建的elasticsearch容器添加密码_docker elasticsearch 设置密码-CSDN博客

这样就说明成功了

输入用户名和密码就能看到之前的那个页面

或者使用curl进行测试

curl  http://127.0.0.1:9200/
curl -u elastic:xxxxxx http://127.0.0.1:9200/

索引操作

mapping

// 查看某个索引的map
/index/_mapping

常见的类型

{
  "mappings": {
    "properties": {
      "title": { 
        "type": "text" // 查询的时候是分词匹配
      },
      "key": { 
        "type": "keyword" // 完整匹配
      },
      "user_id": {
        "type": "integer"
      },
      "created_at":{
        "type": "date",
        "null_value": "null",
        "format": "[yyyy-MM-dd HH:mm:ss]"
      }
    }
  }
}

创建索引

func CreateIndex() {
  createIndex, err := global.ESClient.
    CreateIndex("user_index").
    BodyString(models.UserModel{}.Mapping()).Do(context.Background())
  if err != nil {
    fmt.Println(err)
    return
  }
  fmt.Println(createIndex)
  fmt.Println("索引创建成功")
}

注意：索引存在执行创建索引是会报错的

判断索引是否存在

// ExistsIndex 判断索引是否存在
func ExistsIndex(index string) bool {
  exists, _ := global.ESClient.IndexExists(index).Do(context.Background())
  return exists
}

删除索引

func DeleteIndex(index string) {
  _, err := global.ESClient.
    DeleteIndex(index).Do(context.Background())
  if err != nil {
    fmt.Println(err)
    return
  }
  fmt.Println(index, "索引删除成功")
}

文档操作

添加文档

添加单个文档

func DocCreate() {
  user := models.UserModel{
    ID:        12,
    UserName:  "lisi",
    Age:       23,
    NickName:  "夜空中最亮的lisi",
    CreatedAt: time.Now().Format("2006-01-02 15:04:05"),
    Title:     "今天天气很不错",
  }
  indexResponse, err := global.ESClient.Index().Index(user.Index()).BodyJson(user).Do(context.Background())
  if err != nil {
    fmt.Println(err)
    return
  }
  fmt.Printf("%#v\n", indexResponse)
}

添加文档

如果是mapping里面没有的字段，那么es会自动创建这个字段对应的mapping

批量添加

func DocCreateBatch() {

  list := []models.UserModel{
    {
      ID:        12,
      UserName:  "fengfeng",
      NickName:  "夜空中最亮的枫枫",
      CreatedAt: time.Now().Format("2006-01-02 15:04:05"),
    },
    {
      ID:        13,
      UserName:  "lisa",
      NickName:  "夜空中最亮的丽萨",
      CreatedAt: time.Now().Format("2006-01-02 15:04:05"),
    },
  }

  bulk := global.ESClient.Bulk().Index(models.UserModel{}.Index()).Refresh("true")
  for _, model := range list {
    req := elastic.NewBulkCreateRequest().Doc(model)
    bulk.Add(req)
  }
  res, err := bulk.Do(context.Background())
  if err != nil {
    fmt.Println(err)
    return
  }
  fmt.Println(res.Succeeded())
}

删除文档

根据id删除

func DocDelete() {

  deleteResponse, err := global.ESClient.Delete().
    Index(models.UserModel{}.Index()).Id("tmcqfYkBWS69Op6Q4Z0t").Refresh("true").Do(context.Background())
  if err != nil {
    fmt.Println(err)
    return
  }
  fmt.Println(deleteResponse)
}

如果文档不存在，会报404的错误

根据id批量删除

func DocDeleteBatch() {
  idList := []string{
    "tGcofYkBWS69Op6QHJ2g",
    "tWcpfYkBWS69Op6Q050w",
  }
  bulk := global.ESClient.Bulk().Index(models.UserModel{}.Index()).Refresh("true")
  for _, s := range idList {
    req := elastic.NewBulkDeleteRequest().Id(s)
    bulk.Add(req)
  }
  res, err := bulk.Do(context.Background())
  if err != nil {
    fmt.Println(err)
    return
  }
  fmt.Println(res.Succeeded())  // 实际删除的文档切片
}

如果文档不存在，不会有错误， res.Succeeded() 为空

文档查询

列表查询

func DocFind() {

  limit := 2
  page := 4
  from := (page - 1) * limit

  query := elastic.NewBoolQuery()
  res, err := global.ESClient.Search(models.UserModel{}.Index()).Query(query).From(from).Size(limit).Do(context.Background())
  if err != nil {
    fmt.Println(err)
    return
  }
  count := res.Hits.TotalHits.Value  // 总数
  fmt.Println(count)
  for _, hit := range res.Hits.Hits {
    fmt.Println(string(hit.Source))
  }
}

精确匹配

针对keyword字段

query := elastic.NewTermQuery("user_name", "fengfeng")

模糊匹配

主要是查text，也能查keyword

模糊匹配keyword字段，是需要查完整的

匹配text字段则不用，搜完整的也会搜出很多

query := elastic.NewMatchQuery("nick_name", "夜空中最亮的枫枫")

嵌套字段的搜索

ElementPlus UI

ElementUI 安装及配置

一个 Vue 3 UI 框架 | Element Plus

安装

npm install element-plus --save

按钮

代码

// demo\src\main.js
import { createApp } from 'vue'

//整体导入 ElementPlus 组件库
import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能 
import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 CSS 样式

import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus) //将 ElementPlus 插件注册到 Vue 应用中
app.mount('#app')

<!--demo\src\App.vue-->
<script setup>

</script>

<template>
    <h3>按钮</h3>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>

    <hr>
    <h3>按钮属性</h3>
    <el-button plain>朴素按钮</el-button>
    <el-button round>圆角按钮</el-button>
    <el-button circle>圆</el-button>
    <el-button disabled>禁用按钮</el-button>
    <el-button loading>加载中</el-button>

    <hr>
    <h3>尺寸</h3>
    <el-button size="large">大型按钮</el-button>
    <el-button>默认按钮</el-button>
    <el-button size="small">小型按钮</el-button>
</template>s

<style scoped>

</style>

图标

ElementPlus 图标

Icon 图标 | Element Plus

demo\src\main.js
    import { createApp } from 'vue'

    //整体导入 ElementPlus 组件库
    import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能 
    import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 CSS 样式
    import * as ElementPlusIconsVue from '@element-plus/icons-vue' //导入 ElementPlus 组件库中的所有图标

    import App from './App.vue'

    const app = createApp(App)

    //注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }

    app.use(ElementPlus) //将 ElementPlus 插件注册到 Vue 应用中
    app.mount('#app')

demo\src\App.vue
<script setup>

</script>

<template>

<h3>图标</h3>
<el-icon><Plus /></el-icon>
<el-icon><Edit /></el-icon>
<el-icon><Delete /></el-icon>
<el-icon class="is-loading"><Loading /></el-icon>

<hr>
<h3>属性</h3>
<el-icon size="30" color="red"><Search /></el-icon>

<hr>
<h3>按钮</h3>
<el-button type="primary">
    <el-icon><Search /></el-icon>
    <span> 搜索 </span>
    </el-button>

<el-button type="primary">
    <el-icon><Search /></el-icon>
    </el-button>

<el-button type="primary" circle>
    <el-icon><Search /></el-icon>
    </el-button>

<hr>
<h3>按钮组</h3>
<el-button-group>
    <el-button type="primary">
        <el-icon><Plus /></el-icon>
    </el-button>

    <el-button type="primary">
        <el-icon><Edit /></el-icon>
    </el-button>

    <el-button type="primary">
        <el-icon><Delete /></el-icon>
    </el-button>
    </el-button-group>

</template>

<style scoped>

</style>

提示框

demo\src\App.vue
<script setup>
    import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'

    // 消息
    const openMsg = () => {
        ElMessage({
            type: 'success', // success | warning | info | error
            message: 'dengruicode.com',
            showClose: true
        })
    }

    // 确认框
    const openConfirm = () => {
        ElMessageBox.confirm('确认删除?', '标题', {
            type: 'warning',
            confirmButtonText: '确认',
            cancelButtonText: '取消'
        }).then(() => {
            console.log('确认')
        }).catch(() => {
            console.log('取消')
        })
    }

    // 通知
    const openNotifiy = () => {
        ElNotification({
            title: '标题',
            message: '邓瑞编程',
            duration: 1500 // 展示时间 [单位:毫秒]
        })
    }

    // 通知2
    const openNotifiy2 = () => {
        ElNotification({
            type: 'success', // success | warning | info | error
            title: '标题',
            message: 'dengruicode.com',
            duration: 1500,
            position: 'bottom-right'
        })
    }
</script>

<template>
<el-button @click="openMsg">消息</el-button>
<el-button @click="openConfirm">确认框</el-button>
<el-button @click="openNotifiy">通知</el-button>
<el-button @click="openNotifiy2">通知2</el-button>
</template>

<style scoped>

</style>

demo\src\App.vue
<script setup>
    import { reactive, ref } from 'vue'

    //默认选中的菜单索引
    //const selectedIndex = ref("2-2")
    const selectedIndex = ref("3")

    //选中菜单触发的回调
    const selected = (index, indexPath) => {
        console.log("index", index, "indexPath", indexPath)
    }

    //默认展开的菜单索引
    const defaultOpeneds = ref(["1","3"])

    //用户执行的命令
    const userCommand = (command) => { //点击菜单触发的回调
        console.log("command:", command)
    }
</script>

<template>

<h3>水平导航</h3>
<el-menu mode="horizontal" :default-active="selectedIndex" @select="selected">
    <el-menu-item index="1">邓瑞编程</el-menu-item>
    <el-sub-menu index="2">
        <template #title>我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-sub-menu>
<el-menu-item index="3">消息中心</el-menu-item>
<el-menu-item index="4">订单管理</el-menu-item>
</el-menu>


<h3>水平导航-自定义样式</h3>
<el-menu mode="horizontal" :default-active="selectedIndex" @select="selected" background-color="#545c64"
         text-color="#fff" active-text-color="#ffd04b" style="height: 40px; width: 600px;">
    <el-menu-item index="1">邓瑞编程</el-menu-item>
    <el-sub-menu index="2">
        <template #title>我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="3">消息中心</el-menu-item>
    <el-menu-item index="4">订单管理</el-menu-item>
</el-menu>

<h3>垂直导航</h3><br>
<el-menu :default-active="selectedIndex" @select="selected" style="width: 200px;">
    <el-sub-menu index="1">
        <template #title>
<el-icon><Search /></el-icon>
<span>导航一</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item index="2">
        <el-icon><Edit /></el-icon>
        <template #title>导航二</template>
    </el-menu-item>
    <el-menu-item index="3">
        <el-icon><Delete /></el-icon>
        <template #title>导航三</template>
    </el-menu-item>
    <el-menu-item index="4">
        <el-icon><Setting /></el-icon>
        <template #title>导航四</template>
    </el-menu-item>
</el-menu>

<h3>垂直导航-默认展开和自定义样式</h3>
<el-menu :default-active="selectedIndex" @select="selected" :default-openeds="defaultOpeneds"
         background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="width: 200px;">
    <el-sub-menu index="1">
        <template #title>
<el-icon><Search /></el-icon>
<span>导航一</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item index="2">
        <el-icon><Edit /></el-icon>
        <template #title>导航二</template>
    </el-menu-item>
    <el-sub-menu index="3">
        <template #title>
<el-icon><Search /></el-icon>
<span>导航三</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="3-1">选项1</el-menu-item>
            <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item index="4">
        <el-icon><Setting /></el-icon>
        <template #title>导航四</template>
    </el-menu-item>
</el-menu>

<h3>面包屑</h3>
<el-breadcrumb separator="/">
    <el-breadcrumb-item><a href="#">首页</a></el-breadcrumb-item>
    <el-breadcrumb-item>邓瑞编程</el-breadcrumb-item>
    <el-breadcrumb-item>dengruicode.com</el-breadcrumb-item>
</el-breadcrumb>

<h3>下拉菜单</h3><br>
<el-dropdown @command="userCommand">
    <span>
        个人中心<el-icon><User /></el-icon>
    </span>
    <template #dropdown>
<el-dropdown-menu>
    <el-dropdown-item command="order">订单</el-dropdown-item>
    <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
    </template>
</el-dropdown>

</template>

<style scoped>

</style>

标签页

demo\src\App.vue
<script setup>

    import { ref, reactive } from 'vue'

    //默认选中的标签名称
    const selectedName = ref("2")

    //选中标签触发的回调
    const tabClick = (tab, event) => {
        console.log("tab", tab.props, "event", event)
    }

    const tab = reactive({
        arr: [
            { name: "1", title: '邓瑞', content: '内容1' },
            { name: "2", title: '邓瑞编程', content: '内容2' },
            { name: "3", title: 'dengruicode.com', content: '内容3' },
        ]
    })

    //添加
    const tabAdd = () => {
        let index = tab.arr.length
        index++

        tab.arr.push({
            name: index,
            title: '新选项卡' + index,
            content: '内容' + index
        })
    }

    //移除
    const tabRemove = (name) => {
        console.log("name:", name)

        const index = tab.arr.findIndex((value) => {
            return value.name === name
        })

        tab.arr.splice(index, 1) //移除元素
    }

</script>

<template>

<h3>标签页</h3>
<el-tabs v-model="selectedName" @tab-click="tabClick">
    <el-tab-pane label="邓瑞" name="1">内容1</el-tab-pane>
    <el-tab-pane label="邓瑞编程" name="2">内容2</el-tab-pane>
    <el-tab-pane label="dengruicode.com" name="3">内容3</el-tab-pane>
    </el-tabs>

<h3>卡片风格</h3>
<el-tabs v-model="selectedName" @tab-click="tabClick" type="card">
    <el-tab-pane label="邓瑞" name="a">内容1</el-tab-pane>
    <el-tab-pane label="邓瑞编程" name="b">内容2</el-tab-pane>
    <el-tab-pane label="dengruicode.com" name="b">内容3</el-tab-pane>
    </el-tabs>

<h3>带有边框的卡片风格</h3>
<el-tabs v-model="selectedName" @tab-click="tabClick" type="border-card">
    <el-tab-pane label="邓瑞" name="A">内容1</el-tab-pane>
    <el-tab-pane label="邓瑞编程" name="B">内容2</el-tab-pane>
    <el-tab-pane label="dengruicode.com" name="C">内容3</el-tab-pane>
    </el-tabs>

<h3>动态添加</h3>
<el-button @click="tabAdd">添加</el-button>

<el-tabs v-model="selectedName" @tab-remove="tabRemove" closable type="card">
    <el-tab-pane v-for="(value, key) in tab.arr" :key="value.name" :label="value.title" :name="value.name">
        {{ value.content }}
    </el-tab-pane>
    </el-tabs>

</template>

<style scoped>

</style>

输入框

demo\src\App.vue
<script setup>
    import { ref } from 'vue'

    const name = ref('')
    const password = ref('')
    const content = ref('邓瑞编程')
    const url = ref('dengruicode.com')
    const url2 = ref('dengruicode')
    const email = ref('123456')

    //const selected = ref('')
    const selected = ref('2') //选中的下拉框
</script>

<template>
<div style="width: 300px;">
    <!-- clearable 可一键清空 -->
    <h3>输入框</h3>
    <el-input v-model="name" clearable placeholder="请输入用户名" />

    <!-- show-password 可切换显示隐藏密码 -->
    <h3>密码框</h3>
    <el-input v-model="password" show-password placeholder="请输入密码" />

    <h3>文本域</h3>
    <el-input type="textarea" v-model="content" rows="2" />

    <h3>输入内容长度限制 - 输入框</h3>
    <el-input v-model="name" maxlength="10" show-word-limit />

    <h3>输入内容长度限制 - 文本域</h3>
    <el-input type="textarea" v-model="content" maxlength="20" rows="3" show-word-limit />

    <h3>尺寸</h3>
    大 <el-input size="large" />
    默认 <el-input />
    小 <el-input size="small" />

    <h3>前置</h3>
    <el-input v-model="url">
        <template #prepend>https://</template>
</el-input>

<h3>后置</h3>
<el-input v-model="email">
    <template #append>@qq.com</template>
</el-input>

<h3>前置后置</h3>
<el-input v-model="url2">
    <template #prepend>https://</template>
    <template #append>.com</template>
</el-input>

<h3>前置后置扩展 - 搜索</h3>
<el-input placeholder="请输入课程名称">
    <template #prepend>
<el-select v-model="selected" placeholder="请选择" style="width: 100px;">
    <el-option label="前端" value="1" />
    <el-option label="后端" value="2" />
    <el-option label="服务端" value="3" />
        </el-select>
    </template>
    <template #append>
<el-button>
    <el-icon><Search /></el-icon>
        </el-button>
    </template>
</el-input>
</div>
</template>

<style scoped>

</style>

单选框、复选框

demo\src\App.vue
<script setup>
    import { ref } from 'vue'

    //单选框
    const radio = ref("3")
    const radio2 = ref("b")
    const radio3 = ref("C")

    const radioChange = (val) => {
        console.log("radioChange:", val)
    }

    const radioGroupChange = (val) => {
        console.log("radioGroupChange:", val)
    }

    //复选框
    const checked = ref(["1", "2"])
    const checked2 = ref([])

    const checkboxGroupChange = (val) => {
        console.log("checkboxGroupChange", val)
    }
</script>

<template>
<h3>单选框</h3>
<el-radio v-model="radio" value="1">前端</el-radio>
<el-radio v-model="radio" value="2">后端</el-radio>
<el-radio v-model="radio" value="3">服务端</el-radio>

<h3>单选框 - 事件绑定</h3>
<el-radio v-model="radio2" value="a" @change="radioChange">前端</el-radio>
<el-radio v-model="radio2" value="b" @change="radioChange">后端</el-radio>
<el-radio v-model="radio2" value="c" @change="radioChange">服务端</el-radio>

<h3>单选框组</h3>
<el-radio-group v-model="radio3" @change="radioGroupChange">
    <el-radio value="A">前端</el-radio>
    <el-radio value="B">后端</el-radio>
    <el-radio value="C">服务端</el-radio>
    </el-radio-group>

<h3>复选框</h3>
<el-checkbox-group v-model="checked">
    <el-checkbox value="1">前端</el-checkbox>
    <el-checkbox value="2">后端</el-checkbox>
    <el-checkbox value="3">服务端</el-checkbox>
    </el-checkbox-group>

<h3>事件绑定</h3>
<el-checkbox-group v-model="checked2" @change="checkboxGroupChange">
    <el-checkbox value="1">前端</el-checkbox>
    <el-checkbox value="2">后端</el-checkbox>
    <el-checkbox value="3">服务端</el-checkbox>
    </el-checkbox-group>
</template>

<style scoped>

</style>

下拉框

demo\src\App.vue
<script setup>
    import { ref,reactive } from 'vue'

    const selected = ref('2')
    const selected2 = ref('')
    const selected3 = ref('C')
    const selected4 = ref(['1','3'])

    const data = reactive({
        options: [
            { value: 'A', label: '前端', },
            { value: 'B', label: '后端', },
            { value: 'C', label: '服务端', }
        ]
    })

    //回调
    const selectChange = (val) => {
        console.log("selectChange:", val)
    }
</script>

<template>
<div style="width: 300px;">
    <h3>下拉框</h3>
    <el-select v-model="selected" placeholder="请选择">
        <el-option value="1" label="前端" />
        <el-option value="2" label="后端" />
        <el-option value="3" label="服务端" />
    </el-select>

    <h3>下拉框 - 事件绑定</h3>
    <el-select v-model="selected2" @change="selectChange" placeholder="请选择">
        <el-option value="a" label="前端" />
        <el-option value="b" label="后端" />
        <el-option value="c" label="服务端" />
    </el-select>

    <h3>动态下拉框</h3>
    <el-select v-model="selected3" placeholder="请选择">
        <el-option v-for="item in data.options" 
                   :value="item.value" 
                   :label="item.label"
                   :key="item.value" />
    </el-select>

    <h3>多选 - multiple</h3>
    <el-select v-model="selected4" multiple @change="selectChange" placeholder="请选择">
        <el-option value="1" label="前端" />
        <el-option value="2" label="后端" />
        <el-option value="3" label="服务端" />
    </el-select>
    </div>
</template>

<style scoped>

</style>

日期选择器

demo\src\main.js
    import { createApp } from 'vue'

    //整体导入 ElementPlus 组件库
    import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能 
    import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 CSS 样式
    import * as ElementPlusIconsVue from '@element-plus/icons-vue' //导入 ElementPlus 组件库中的所有图标
    import zhCn from 'element-plus/dist/locale/zh-cn.mjs' //导入 ElementPlus 组件库的中文语言包

    import App from './App.vue'

    const app = createApp(App)

    //注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }

    //app.use(ElementPlus) //将 ElementPlus 插件注册到 Vue 应用中s
    app.use(ElementPlus, {
        locale: zhCn // 设置 ElementPlus 组件库的区域语言为中文简体
    })
    app.mount('#app')

demo\src\App.vue
<script setup>
    import { ref } from 'vue'

    const date = ref('')

    const dateChange = (val) => {
        console.log("dateChange:", val)
    }
</script>

<template>
<h3>日期</h3>
<el-date-picker v-model="date" type="date" placeholder="请选择" />

<h3>日期时间</h3>
<el-date-picker v-model="date" type="datetime" placeholder="请选择" />

<h3>事件绑定</h3>
<el-date-picker v-model="date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" @change="dateChange" />
</template>

<style scoped>

</style>

表单

demo\src\App.vue
<script setup>
    import { ref } from 'vue'

    const data = ref({
        name: '',
        radio: '',
        checkbox: [],
        date: '',
        select: '',
        multipleSelect: [],
        textarea: ''
    })

    const add = () => {
        console.log(data.value)
    }

    const reset = () => {
        data.value = {
            name: '',
            radio: '',
            checkbox: [],
            date: '',
            select: '',
            multipleSelect: [],
            textarea: ''
        }
    }
</script>

<template>
<el-form label-width="80" style="width: 400px;">
    <el-form-item label="文本框">
        <el-input v-model="data.name" placeholder="请填写名称" />
    </el-form-item>

    <el-form-item label="单选框">
        <el-radio-group v-model="data.radio">
            <el-radio value="1">前端</el-radio>
            <el-radio value="2">后端</el-radio>
            <el-radio value="3">服务端</el-radio>
    </el-radio-group>
    </el-form-item>

    <el-form-item label="复选框">
        <el-checkbox-group v-model="data.checkbox">
            <el-checkbox value="a">前端</el-checkbox>
            <el-checkbox value="b">后端</el-checkbox>
            <el-checkbox value="c">服务端</el-checkbox>
    </el-checkbox-group>
    </el-form-item>

    <el-form-item label="日期时间">
        <el-date-picker v-model="data.date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
    </el-form-item>

    <el-form-item label="下拉框">
        <el-select v-model="data.select" placeholder="请选择">
            <el-option value="A" label="前端" />
            <el-option value="B" label="后端" />
            <el-option value="C" label="服务端" />
    </el-select>
    </el-form-item>

    <el-form-item label="多选框">
        <el-select v-model="data.multipleSelect" multiple placeholder="请选择">
            <el-option value="AA" label="前端" />
            <el-option value="BB" label="后端" />
            <el-option value="CC" label="服务端" />
    </el-select>
    </el-form-item>

    <el-form-item label="文本域">
        <el-input type="textarea" v-model="data.textarea" rows="2" placeholder="请填写内容" />
    </el-form-item>

    <el-form-item>
        <el-button type="primary" @click="add">添加</el-button>
        <el-button @click="reset">重置</el-button>
    </el-form-item>
    </el-form>
</template>

<style scoped>

</style>

对话框

demo\src\App.vue
<script setup>
    import { ref } from 'vue'

    const data = ref({
        name: '',
        radio: '',
        checkbox: [],
        date: '',
        select: '',
        multipleSelect: [],
        textarea: ''
    })

    const add = () => {
        console.log(data.value)
    }

    const reset = () => {
        data.value = {
            name: '',
            radio: '',
            checkbox: [],
            date: '',
            select: '',
            multipleSelect: [],
            textarea: ''
        }
    }

    //对话框
    const dialog = ref(false)

    const dialogClose = () => {
        console.log("关闭")
    }
</script>

<template>
<el-button @click="dialog = true">打开</el-button>

<!-- draggable 允许拖拽 -->
<el-dialog v-model="dialog" width="500" title="标题" draggable @close="dialogClose">
    <el-form label-width="80">
        <el-form-item label="文本框">
            <el-input v-model="data.name" placeholder="请填写名称" />
    </el-form-item>

        <el-form-item label="单选框">
            <el-radio-group v-model="data.radio">
                <el-radio value="1">前端</el-radio>
                <el-radio value="2">后端</el-radio>
                <el-radio value="3">服务端</el-radio>
    </el-radio-group>
    </el-form-item>

        <el-form-item label="复选框">
            <el-checkbox-group v-model="data.checkbox">
                <el-checkbox value="a">前端</el-checkbox>
                <el-checkbox value="b">后端</el-checkbox>
                <el-checkbox value="c">服务端</el-checkbox>
    </el-checkbox-group>
    </el-form-item>

        <el-form-item label="日期时间">
            <el-date-picker v-model="data.date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
    </el-form-item>

        <el-form-item label="下拉框">
            <el-select v-model="data.select" placeholder="请选择">
                <el-option value="A" label="前端" />
                <el-option value="B" label="后端" />
                <el-option value="C" label="服务端" />
    </el-select>
    </el-form-item>

        <el-form-item label="多选框">
            <el-select v-model="data.multipleSelect" multiple placeholder="请选择">
                <el-option value="AA" label="前端" />
                <el-option value="BB" label="后端" />
                <el-option value="CC" label="服务端" />
    </el-select>
    </el-form-item>

        <el-form-item label="文本域">
            <el-input type="textarea" v-model="data.textarea" rows="2" placeholder="请填写内容" />
    </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="add">添加</el-button>
            <el-button @click="reset">重置</el-button>
    </el-form-item>
    </el-form>
    </el-dialog>
</template>

<style scoped>

</style>

分页

demo\src\App.vue
<script setup>
    const currentPage = (val) => {
        console.log("currentPage:",val)
    }
</script>

<template>
<h3>page-size:每页显示记录数 total:总记录数</h3>
<el-pagination layout="prev, pager, next" :page-size="10" :total="50" />

<h3>background:显示背景</h3>
<el-pagination layout="prev, pager, next" :page-size="5" :total="50" background />

<h3>layout="total" 显示总数</h3>
<el-pagination layout="prev, pager, next, total" :page-size="5" :total="50" />

<h3>layout="jumper" 跳转</h3>
<el-pagination layout="prev, pager, next, jumper, total" :page-size="5" :total="50" />

<h3>事件绑定</h3>
<el-pagination layout="prev, pager, next" :page-size="5" :total="50" @current-change="currentPage" />
</template>

<style scoped>

</style>

表格

demo\src\App.vue
<script setup>
    import { ref } from 'vue'

    const data = ref({
        arr: [
            { id: '1', name: '邓瑞', web: 'dengruicode.com', date: '2023-06-20' },
            { id: '2', name: 'David', web: 'www.dengruicode.com', date: '2023-06-21' },
            { id: '3', name: 'Luna', web: 'dengruicode.com', date: '2023-06-22' },
            { id: '4', name: 'Lisa', web: 'www.dengruicode.com', date: '2023-06-22' }
        ]
    })

    //选中的复选框
    let idArr = []
    const selected = (data) => {
        //console.log("selected", data)

        idArr = [] //重置

        data.forEach((value) => {
            idArr.push(value.id)
        })

        console.log("idArr:", idArr)
    }

    //删除
    const del = () => {
        console.log("del:", idArr)
    }

    //编辑
    const edit = (index, row) => {
        console.log("index:", index, "row:", row)
    }    
</script>

<template>
<h3>表格</h3>
<el-table :data="data.arr" style="width: 800px;">
    <el-table-column prop="id" label="编号" width="80" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="web" label="网站" width="300" />
    <el-table-column prop="date" label="日期" />
    </el-table>

<h3>带边框表格</h3>
<el-table :data="data.arr" border style="width: 800px;">
    <el-table-column prop="id" label="编号" width="80" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="web" label="网站" width="300" />
    <el-table-column prop="date" label="日期" />
    </el-table>

<h3>设置高度固定表头</h3>
<el-table :data="data.arr" border height="120" style="width: 800px;">
    <el-table-column prop="id" label="编号" width="80" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="web" label="网站" width="300" />
    <el-table-column prop="date" label="日期" />
    </el-table>

<h3>type="selection" 多选</h3>
<el-table :data="data.arr" border style="width: 800px;">
    <el-table-column type="selection" width="55" />

    <el-table-column prop="id" label="编号" width="80" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="web" label="网站" width="300" />
    <el-table-column prop="date" label="日期" />
    </el-table>

<h3>按钮</h3>
<el-button type="primary" @click="del">删除</el-button>

<el-table :data="data.arr" @selection-change="selected" border style="width: 900px;margin: 3px 0;">
    <el-table-column type="selection" width="55"></el-table-column>

    <el-table-column prop="id" label="编号" width="80" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="web" label="网站" width="300" />
    <el-table-column prop="date" label="日期" />

    <el-table-column label="操作" width="150">
        <template #default="scope">
            <el-button size="small" type="primary" @click="edit(scope.$index, scope.row)">
                编辑
    </el-button>
            <el-button size="small">删除</el-button>
</template>
</el-table-column>
</el-table>

<el-pagination layout="prev, pager, next, jumper, total" :page-size="5" :total="50" />
</template>

<style scoped></style>

按需导入

代码

#自动导入

#安装 unplugin-vue-components 和 unplugin-auto-import 插件

npm install -D unplugin-vue-components unplugin-auto-import



#自动导入 图标

#安装 unplugin-icons 插件

npm install -D unplugin-icons



代码

demo\vite.config.js
  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'

  //unplugin
  import AutoImport from 'unplugin-auto-import/vite'
  import Components from 'unplugin-vue-components/vite'
  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  import Icons from 'unplugin-icons/vite' //图标
  import IconsResolver from 'unplugin-icons/resolver'

  // https://vitejs.dev/config/
  export default defineConfig({
    plugins: [
      vue(),

      AutoImport({
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ['vue'], 

        resolvers: [
          ElementPlusResolver(),
          // 自动导入图标组件
          IconsResolver(),
        ],
      }),
      Components({
        resolvers: [
          ElementPlusResolver(),
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ['ep'],
          }),
        ],
      }),

      Icons({
        autoInstall: true,
      }),

    ],
  })

demo\src\main.js
    import { createApp } from 'vue'

    /*
    //整体导入 ElementPlus 组件库
    import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能 
    import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 CSS 样式
    import * as ElementPlusIconsVue from '@element-plus/icons-vue' //导入 ElementPlus 组件库中的所有图标
    import zhCn from 'element-plus/dist/locale/zh-cn.mjs' //导入 ElementPlus 组件库的中文语言包
    */

    import App from './App.vue'

    const app = createApp(App)

    /*
    //注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }
    //app.use(ElementPlus) //将 ElementPlus 插件注册到 Vue 应用中s
    app.use(ElementPlus, {
        locale: zhCn // 设置 ElementPlus 组件库的区域语言为中文简体
    })
    */

    app.mount('#app')
    
demo\src\App.vue
    <script setup>
        // 消息
        const openMsg = () => {
            ElMessage({
                type: 'success', // success | warning | info | error
                message: 'dengruicode.com',
                showClose: true
            })
        }

        // 确认框
        const openConfirm = () => {
            ElMessageBox.confirm('确认删除?', '标题', {
                type: 'warning',
                confirmButtonText: '确认',
                cancelButtonText: '取消'
            }).then(() => {
                console.log('确认')
            }).catch(() => {
                console.log('取消')
            })
        }

        // 通知
        const openNotifiy = () => {
            ElNotification({
                title: '标题',
                message: '邓瑞编程',
                duration: 1500 // 展示时间 [单位:毫秒]
            })
        }

        // 通知2
        const openNotifiy2 = () => {
            ElNotification({
                type: 'success', // success | warning | info | error
                title: '标题',
                message: 'dengruicode.com',
                duration: 1500,
                position: 'bottom-right'
            })
        }

        const url = ref('dengruicode.com')
    </script>

    <template>
        <h3>按钮</h3>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>

        <h3>图标</h3>
        <!-- <el-icon><Plus /></el-icon> -->
        <el-icon><i-ep-Plus /></el-icon> <!-- i-ep- -->
        <el-icon><IEpEdit /></el-icon> <!-- IEp- -->
        <el-icon><IEpDelete /></el-icon>
        <el-icon class="is-loading"><IEpLoading /></el-icon>

        <h3>提示框</h3>
        <el-button @click="openMsg">消息</el-button>
        <el-button @click="openConfirm">确认框</el-button>
        <el-button @click="openNotifiy">通知</el-button>
        <el-button @click="openNotifiy2">通知2</el-button>

        <h3>输入框</h3>
        <el-input v-model="url" placeholder="请输入网址" />
    </template>

    <style scoped>
    
    </style>

`ECharts` 安装

独立版本(推荐下载本地)

cdn.staticfile.net/echarts/4.7.0/echarts.min.js

cdn.staticfile.net/echarts/4.7.0/echarts.js

使用 `CDN` 方法

Staticfile CDN（国内） : https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js
jsDelivr：https://cdn.jsdelivr.net/npm/echarts@4.3.0/dist/echarts.min.js。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js

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

`ECharts` 实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个 ECharts 实例</title>
        <!-- 引入 echarts.js -->
        <script src="https://cdn.staticfile.org/echarts/4.3.0/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>

<script>
    // 图例组件
    legend: {
        data: [{
            name: '系列1',
            // 强制设置图形为圆。
            icon: 'circle',
            // 设置文本为红色
            textStyle: {
                color: 'red'
            }
        }]
    }
</script>

`ECharts`图表类型

<!-- 图表类型 -->
type: 'bar'：柱状/条形图
type: 'line'：折线/面积图
type: 'pie'：饼图
type: 'scatter'：散点（气泡）图
type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
type: 'radar'：雷达图
type: 'tree'：树型图
type: 'treemap'：树型图
type: 'sunburst'：旭日图
type: 'boxplot'：箱形图
type: 'candlestick'：K线图
type: 'heatmap'：热力图
type: 'map'：地图
type: 'parallel'：平行坐标系的系列
type: 'lines'：线图
type: 'graph'：关系图
type: 'sankey'：桑基图
type: 'funnel'：漏斗图
type: 'gauge'：仪表盘
type: 'pictorialBar'：象形柱图
type: 'themeRiver'：主题河流
type: 'custom'：自定义系列

`ECharts` 饼图

<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.net/echarts/4.3.0/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'));
        myChart.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:'搜索引擎'}
                    ]
                }
            ]
        })
    </script>
</body>

南丁格尔图

<!-- roseType: 'angle', 饼图显示成南丁格尔图 -->
<script src="https://cdn.staticfile.net/echarts/4.3.0/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 = {
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    roseType: 'angle',    // 饼图显示成南丁格尔图
                    data:[
                        {value:235, name:'视频广告'},
                        {value:274, name:'联盟广告'},
                        {value:310, name:'邮件营销'},
                        {value:335, name:'直接访问'},
                        {value:400, name:'搜索引擎'}
                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

阴影的配置

<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.net/echarts/4.3.0/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 = {
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    data:[
                        {value:235, name:'视频广告'},
                        {value:274, name:'联盟广告'},
                        {value:310, name:'邮件营销'},
                        {value:335, name:'直接访问'},
                        {value:400, name:'搜索引擎'}
                    ],
                    roseType: 'angle',
                    itemStyle: {
                        normal: {
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>

`ECharts` 样式设置

颜色主题

ECharts4 开始，除了默认主题外，内置了两套主题，分别为 light 和 dark

<!-- 使用方式 -->
var chart = echarts.init(dom, 'light');
var chart = echarts.init(dom, 'dark');

<script src="https://cdn.staticfile.net/echarts/4.3.0/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'), 'dark'); // dark 可尝试修改为 light

        myChart.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:'搜索引擎'}
                    ]
                }
            ]
        })
    </script>
</body>

另外，我们也可以在官方的主题编辑器选择自己喜欢的主题下载

<!-- 下载并引入主题 -->
<script src="https://www.runoob.com/static/js/wonderland.js"></script>
var myChart = echarts.init(dom, 'wonderland');

$.getJSON('wonderland.json', function (themeJSON) {
    echarts.registerTheme('wonderland', themeJSON)
    var myChart = echarts.init(dom, 'wonderland');
});

调色盘

// 全局调色盘。
color: ['#ff0000','#00ff00', '#0000ff', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例s
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
            // 全局调色盘
            color: ['#ff0000','#00ff00', '#0000ff', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
            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:'搜索引擎'}
                    ]
                }
            ]
        })
    </script>

直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...

高亮的样式：emphasis

<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.net/echarts/4.3.0/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'));
        myChart.setOption({
            series : [
                {
                    name: '访问来源',
                    type: 'pie',    // 设置图表类型为饼图
                    radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    // 高亮样式。
                    emphasis: {
                        itemStyle: {
                            // 高亮时点的颜色
                            color: 'red'
                        },
                        label: {
                            show: true,
                            // 高亮时标签的文字
                            formatter: '高亮时显示的标签内容'
                        }
                    },
                    data:[          // 数据数组，name 为数据项名称，value 为数据项值
                        {value:235, name:'视频广告'},
                        {value:274, name:'联盟广告'},
                        {value:310, name:'邮件营销'},
                        {value:335, name:'直接访问'},
                        {value:400, name:'搜索引擎'}
                    ]
                }
            ]
        })
    </script>
</body>

`ECharts` 异步加载数据

// echarts_test_data.json 数据：
{	"data_pie" : [
        {"value":235, "name":"视频广告"},
        {"value":274, "name":"联盟广告"},
        {"value":310, "name":"邮件营销"},
        {"value":335, "name":"直接访问"},
        {"value":400, "name":"搜索引擎"}
    ]
}

<script src="https://cdn.staticfile.net/jquery/2.2.4/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.net/echarts/4.3.0/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'));
        myChart.showLoading();  // 开启 loading 效果
        $.get('https://www.runoob.com/static/js/echarts_test_data.json', function (data) {
            alert("可以看到 loading 字样"); // 测试代码，用于查看 loading 效果
            myChart.hideLoading();  // 隐藏 loading 效果
            myChart.setOption({s
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',    // 设置图表类型为饼图
                        radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                        data:data.data_pie
                    }
                ]
            })
        }, 'json');
    </script>

数据的动态更新

<script src="https://cdn.staticfile.net/jquery/2.2.4/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var base = +new Date(2014, 9, 3);    // 定义了一个变量base，它是一个时间戳，表示2014年10月3日的日期
        var oneDay = 24 * 3600 * 1000;    // 定义了一个变量oneDay，用来表示一天的毫秒数
        var date = [];    //  定义了一个空数组date，用来存储日期数据
        var data = [Math.random() * 150];    // 定义了一个数组data，初始化为包含一个随机数乘以150的结果
        var now = new Date(base);    // 定义了一个变量now，初始化为base时间戳对应的日期对象
        function addData(shift) {    // 定义了一个函数addData，它用于添加新的数据点到图表中。参数shift决定是否移除旧的数据点
            now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');    // 这行代码获取当前日期对象的年、月、日，并将其格式化为字符串
            date.push(now);    // 将格式化后的日期字符串添加到date数组
            data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);    // 这行代码生成一个新的随机数据点，并将其添加到data数组
            if (shift) { 
                date.shift();
                data.shift();
            }
            now = new Date(+new Date(now) + oneDay);    // 更新now变量为当前日期的下一天
        }
        for (var i = 1; i < 100; i++) {
            addData();
        }
        option = {
            xAxis: {
                type: 'category',	// type: 'category'表示x轴是分类轴
                boundaryGap: false,
                data: date
            },
            yAxis: {
                boundaryGap: [0, '50%'],
                type: 'value'
            },
            series: [
                {
                    name:'成交',
                    type:'line',	// 设置数据系列的类型为折线图
                    smooth:true,    // 设置折线图是否平滑
                    symbol: 'none',	// 设置折线图的数据点是否显示标记，这里设置为不显示
                    stack: 'a',		// 设置数据系列的堆叠方式，这里设置为堆叠到'a'
                    areaStyle: {
                        // 设置折线图的区域样式，这里没有具体设置样式属性
                        normal: {}
                    },
                    data: data
                }
            ]
        };
        setInterval(function () {
            addData(true);		// 在定时器的回调函数中调用addData函数，并传递true作为参数，表示每次更新时都移除最旧的数据点
            myChart.setOption({    //  使用setOption方法更新图表的配置选项
                xAxis: {
                    data: date
                },
                series: [{
                    name:'成交',
                    data: data
                }]
            });
        }, 500);    // 设置一个定时器，每500毫秒调用一次函数，更新图表数据
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option)
    </script>

`ECharts` 数据集（dataset）

<script src="https://cdn.staticfile.net/echarts/4.3.0/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 = {
            legend: {},
            tooltip: {},
            dataset: {
                // 提供一份数据。
                source: [
                    ['product', '2015', '2016', '2017'],
                    ['Matcha Latte', 43.3, 85.8, 93.7],
                    ['Milk Tea', 83.1, 73.4, 55.1],
                    ['Cheese Cocoa', 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 72.4, 53.9, 39.1]
                ]
            },
            // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
            xAxis: {type: 'category'},
            // 声明一个 Y 轴，数值轴。
            yAxis: {},
            // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

<script src="https://cdn.staticfile.net/echarts/4.3.0/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 = {
            legend: {},
            tooltip: {},
            dataset: {
                // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
                // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
                dimensions: ['product', '2015', '2016', '2017'],
                source: [
                    {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
                    {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
                    {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
                    {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

数据到图形的映射

<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                source: [
                    ['product', '2012', '2013', '2014', '2015'],
                    ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
                    ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
                    ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
                ]
            },
            xAxis: [
                {type: 'category', gridIndex: 0},
                {type: 'category', gridIndex: 1}
            ],
            yAxis: [
                {gridIndex: 0},
                {gridIndex: 1}
            ],
            grid: [
                {bottom: '55%'},
                {top: '55%'}
            ],
            series: [
                // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行
                {type: 'bar', seriesLayoutBy: 'row'},
                {type: 'bar', seriesLayoutBy: 'row'},
                {type: 'bar', seriesLayoutBy: 'row'},
                // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
            ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

竖表

eries.encode 属性将对应的数据映射到坐标轴（如 X、Y 轴）

<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            dataset: {
                source: [
                    ['score', 'amount', 'product'],
                    [89.3, 58212, 'Matcha Latte'],
                    [57.1, 78254, 'Milk Tea'],
                    [74.4, 41032, 'Cheese Cocoa'],
                    [50.1, 12755, 'Cheese Brownie'],
                    [89.7, 20145, 'Matcha Cocoa'],
                    [68.1, 79146, 'Tea'],
                    [19.6, 91852, 'Orange Juice'],
                    [10.6, 101852, 'Lemon Juice'],
                    [32.7, 20112, 'Walnut Brownie']
                ]
            },
            grid: {containLabel: true},
            xAxis: {},
            yAxis: {type: 'category'},
            series: [
                {
                    type: 'bar',
                    encode: {
                        // 将 "amount" 列映射到 X 轴。
                        x: 'amount',
                        // 将 "product" 列映射到 Y 轴。
                        y: 'product'
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

更多 encode 实例

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        $.get('https://www.runoob.com/static/js/life-expectancy-table.json', function (data) {
            var sizeValue = '57%';    // 用于设置网格(grid)的尺寸
            var symbolSize = 2.5;    // 用于设置散点图点的大小
            option = {
                legend: {},
                tooltip: {}, 
                toolbox: {
                    left: 'center',
                    feature: {
                        dataZoom: {}
                    }
                },
                grid: [
                    {right: sizeValue, bottom: sizeValue},
                    {left: sizeValue, bottom: sizeValue},
                    {right: sizeValue, top: sizeValue},
                    {left: sizeValue, top: sizeValue}
                ],
                xAxis: [
                    {type: 'value', gridIndex: 0, name: 'Income', axisLabel: {rotate: 50, interval: 0}},
                    {type: 'category', gridIndex: 1, name: 'Country', boundaryGap: false, axisLabel: {rotate: 50, interval: 0}},
                    {type: 'value', gridIndex: 2, name: 'Income', axisLabel: {rotate: 50, interval: 0}},
                    {type: 'value', gridIndex: 3, name: 'Life Expectancy', axisLabel: {rotate: 50, interval: 0}}
                ],
                yAxis: [
                    {type: 'value', gridIndex: 0, name: 'Life Expectancy'},
                    {type: 'value', gridIndex: 1, name: 'Income'},
                    {type: 'value', gridIndex: 2, name: 'Population'},
                    {type: 'value', gridIndex: 3, name: 'Population'}
                ],
                dataset: {
                    dimensions: [
                        'Income',
                        'Life Expectancy',
                        'Population',
                        'Country',
                        {name: 'Year', type: 'ordinal'}
                    ],
                    source: data
                },
                series: [
                    {
                        type: 'scatter',
                        symbolSize: symbolSize,
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        encode: {
                            x: 'Income',
                            y: 'Life Expectancy',
                            tooltip: [0, 1, 2, 3, 4]
                        }
                    },
                    {
                        type: 'scatter',
                        symbolSize: symbolSize,
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        encode: {
                            x: 'Country',
                            y: 'Income',
                            tooltip: [0, 1, 2, 3, 4]
                        }
                    },
                    {
                        type: 'scatter',
                        symbolSize: symbolSize,
                        xAxisIndex: 2,
                        yAxisIndex: 2,
                        encode: {
                            x: 'Income',
                            y: 'Population',
                            tooltip: [0, 1, 2, 3, 4]
                        }
                    },
                    {
                        type: 'scatter',
                        symbolSize: symbolSize,
                        xAxisIndex: 3,
                        yAxisIndex: 3,
                        encode: {
                            x: 'Life Expectancy',
                            y: 'Population',
                            tooltip: [0, 1, 2, 3, 4]
                        }
                    }
                ]
            };
            myChart.setOption(option);
        });
    </script>
</body>

视觉通道（颜色、尺寸等）的映射

视觉元素可以是：

symbol: 图元的图形类别
symbolSize: 图元的大小
color: 图元的颜色
colorAlpha: 图元的颜色的透明度
opacity: 图元以及其附属物（如文字标签）的透明度
colorLightness: 颜色的明暗度
colorSaturation: 颜色的饱和度
colorHue: 颜色的色调

<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            dataset: {
                source: [
                    ['score', 'amount', 'product'],
                    [89.3, 58212, 'Matcha Latte'],
                    [57.1, 78254, 'Milk Tea'],
                    [74.4, 41032, 'Cheese Cocoa'],
                    [50.1, 12755, 'Cheese Brownie'],
                    [89.7, 20145, 'Matcha Cocoa'],
                    [68.1, 79146, 'Tea'],
                    [19.6, 91852, 'Orange Juice'],
                    [10.6, 101852, 'Lemon Juice'],
                    [32.7, 20112, 'Walnut Brownie']
                ]
            },
            grid: {containLabel: true},
            xAxis: {name: 'amount'},
            yAxis: {type: 'category'},
            visualMap: {
                orient: 'horizontal',
                left: 'center',
                min: 10,
                max: 100,
                text: ['High Score', 'Low Score'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#D7DA8B', '#E15457']
                }
            },
            series: [
                {
                    type: 'bar',
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'amount',
                        // Map the "product" column to Y axis
                        y: 'product'
                    }
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>

交互联动

<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        setTimeout(function () {
            option = {
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    showContent: false
                },
                dataset: {
                    source: [
                        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                        ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                        ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                        ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                        ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                    ]
                },
                xAxis: {type: 'category'},
                yAxis: {gridIndex: 0},
                grid: {top: '55%'},
                series: [
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '30%',
                        center: ['50%', '25%'],
                        label: {
                            formatter: '{b}: {@2012} ({d}%)'
                        },
                        encode: {
                            itemName: 'product',
                            value: '2012',
                            tooltip: '2012'
                        }
                    }
                ]
            };
            myChart.on('updateAxisPointer', function (event) {
                var xAxisInfo = event.axesInfo[0];
                if (xAxisInfo) {
                    var dimension = xAxisInfo.value + 1;
                    myChart.setOption({
                        series: {
                            id: 'pie',
                            label: {
                                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                            },
                            encode: {
                                value: dimension,
                                tooltip: dimension
                            }
                        }
                    });
                }
            });
            myChart.setOption(option);
        });
    </script>
</body>

`ECharts` 交互组件

`dataZoom`

dataZoom 组件可以实现通过鼠标滚轮滚动，放大缩小图表的功能

默认情况下 dataZoom 控制 x 轴，即对 x 轴进行数据窗口缩放和数据窗口平移操作

<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'value'
            },
            dataZoom: [
                {   // 这个dataZoom组件，默认控制x轴。
                    type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                    start: 10,      // 左边在 10% 的位置。
                    end: 60         // 右边在 60% 的位置。
                }
            ],
            series: [
                {
                    type: 'scatter', // 这是个『散点图』
                    itemStyle: {
                        opacity: 0.8
                    },
                    symbolSize: function (val) {
                        return val[2] * 40;
                    },
                    data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
                }
            ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

增加 type: 'inside' 的配置信息

<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'value'
            },
            dataZoom: [
                {   // 这个dataZoom组件，默认控制x轴。
                    type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                    start: 10,      // 左边在 10% 的位置。
                    end: 60         // 右边在 60% 的位置。
                },
                {   // 这个dataZoom组件，也控制x轴。
                    type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
                    start: 10,      // 左边在 10% 的位置。
                    end: 60         // 右边在 60% 的位置。
                }

            ],
            series: [
                {
                    type: 'scatter', // 这是个『散点图』
                    itemStyle: {
                        opacity: 0.8
                    },
                    symbolSize: function (val) {
                        return val[2] * 40;
                    },
                    data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
                }
            ]
        }
        myChart.setOption(option);
    </script>
</body>

可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴

<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var data1 = [];
        var data2 = [];
        var data3 = [];
        var random = function (max) {
            return (Math.random() * max).toFixed(3);
        };
        for (var i = 0; i < 500; i++) {
            data1.push([random(15), random(10), random(1)]);
            data2.push([random(10), random(10), random(1)]);
            data3.push([random(15), random(10), random(1)]);
        }
        option = {
            animation: false,
            legend: {
                data: ['scatter', 'scatter2', 'scatter3']
            },
            tooltip: {
            },
            xAxis: {
                type: 'value',
                min: 'dataMin',
                max: 'dataMax',
                splitLine: {
                    show: true
                }
            },
            yAxis: {
                type: 'value',
                min: 'dataMin',
                max: 'dataMax',
                splitLine: {
                    show: true
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    start: 1,
                    end: 35
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: [0],
                    left: '93%',
                    start: 29,
                    end: 36
                },
                {
                    type: 'inside',
                    xAxisIndex: [0],
                    start: 1,
                    end: 35
                },
                {
                    type: 'inside',
                    yAxisIndex: [0],
                    start: 29,
                    end: 36
                }
            ],
            series: [
                {
                    name: 'scatter',
                    type: 'scatter',
                    itemStyle: {
                        normal: {
                            opacity: 0.8
                        }
                    },
                    symbolSize: function (val) {
                        return val[2] * 40;
                    },
                    data: data1
                },
                {
                    name: 'scatter2',
                    type: 'scatter',
                    itemStyle: {
                        normal: {
                            opacity: 0.8
                        }
                    },
                    symbolSize: function (val) {
                        return val[2] * 40;
                    },
                    data: data2
                },
                {
                    name: 'scatter3',
                    type: 'scatter',
                    itemStyle: {
                        normal: {
                            opacity: 0.8,
                        }
                    },
                    symbolSize: function (val) {
                        return val[2] * 40;
                    },
                    data: data3
                }
            ]
        }
        myChart.setOption(option);
    </script>
</body>

`ECharts` 响应式

left/right/top/bottom/width/height 定位方式

这六个量中，每个量都可以是『绝对值』或者『百分比』或者『位置描述』

绝对值

单位是浏览器像素（px），用 number 形式书写（不写单位）。例如 {left: 23, height: 400}
百分比

表示占 DOM 容器高宽的百分之多少，用 string 形式书写。例如 {right: '30%', bottom: '40%'}
位置描述
- 可以设置 left: 'center'，表示水平居中
- 可以设置 top: 'middle'，表示垂直居中

center / radius 定位方式

center

是一个数组，表示 [x, y]，其中，x、y可以是『绝对值』或者『百分比』，含义和前述相同
radius

是一个数组，表示 [内半径, 外半径]，其中，内外半径可以是『绝对值』或者『百分比』，含义和前述相同

在自适应容器大小时，百分比设置是很有用的

横向（horizontal）和纵向（vertical）

ECharts的『外观狭长』型的组件（如 legend、visualMap、dataZoom、timeline等），大多提供了『横向布局』『纵向布局』的选择。例如，在细长的移动端屏幕上，可能适合使用『纵向布局』；在PC宽屏上，可能适合使用『横向布局』

横纵向布局的设置，一般在『组件』或者『系列』的 orient 或者 layout 配置项上，设置为 'horizontal' 或者 'vertical'

<script src="https://cdn.staticfile.net/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        $.when(
            $.getScript('https://www.runoob.com/static/js/timelineGDP.js'),
            $.getScript('https://www.runoob.com/static/js/draggable.js')
        ).done(function () {
            draggable.init(
                $('div[_echarts_instance_]')[0],
                myChart,
                {
                    width: 700,
                    height: 400,
                    throttle: 70
                }
            );
            myChart.hideLoading();
            option = {
                baseOption: {
                    title : {
                        text: '南丁格尔玫瑰图',
                        subtext: '纯属虚构',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {
                                show: true,
                                type: ['pie', 'funnel']
                            },
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    series : [
                        {
                            name:'半径模式',
                            type:'pie',
                            roseType : 'radius',
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            lableLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data:[
                                {value:10, name:'rose1'},
                                {value:5, name:'rose2'},
                                {value:15, name:'rose3'},
                                {value:25, name:'rose4'},
                                {value:20, name:'rose5'},
                                {value:35, name:'rose6'},
                                {value:30, name:'rose7'},
                                {value:40, name:'rose8'}
                            ]
                        },
                        {
                            name:'面积模式',
                            type:'pie',
                            roseType : 'area',
                            data:[
                                {value:10, name:'rose1'},
                                {value:5, name:'rose2'},
                                {value:15, name:'rose3'},
                                {value:25, name:'rose4'},
                                {value:20, name:'rose5'},
                                {value:35, name:'rose6'},
                                {value:30, name:'rose7'},
                                {value:40, name:'rose8'}
                            ]
                        }
                    ]
                },
                media: [
                    {
                        option: {
                            legend: {
                                right: 'center',
                                bottom: 0,
                                orient: 'horizontal'
                            },
                            series: [
                                {
                                    radius: [20, '50%'],
                                    center: ['25%', '50%']
                                },
                                {
                                    radius: [30, '50%'],
                                    center: ['75%', '50%']
                                }
                            ]
                        }
                    },
                    {
                        query: {
                            minAspectRatio: 1
                        },
                        option: {
                            legend: {
                                right: 'center',
                                bottom: 0,
                                orient: 'horizontal'
                            },
                            series: [
                                {
                                    radius: [20, '50%'],
                                    center: ['25%', '50%']
                                },
                                {
                                    radius: [30, '50%'],
                                    center: ['75%', '50%']
                                }
                            ]
                        }
                    },
                    {
                        query: {
                            maxAspectRatio: 1
                        },
                        option: {
                            legend: {
                                right: 'center',
                                bottom: 0,
                                orient: 'horizontal'
                            },
                            series: [
                                {
                                    radius: [20, '50%'],
                                    center: ['50%', '30%']
                                },
                                {
                                    radius: [30, '50%'],
                                    center: ['50%', '70%']
                                }
                            ]
                        }
                    },
                    {
                        query: {
                            maxWidth: 500
                        },
                        option: {
                            legend: {
                                right: 10,
                                top: '15%',
                                orient: 'vertical'
                            },
                            series: [
                                {
                                    radius: [20, '50%'],
                                    center: ['50%', '30%']
                                },
                                {
                                    radius: [30, '50%'],
                                    center: ['50%', '75%']
                                }
                            ]
                        }
                    }
                ]
            };
            myChart.setOption(option);
        });
    </script>
</body>

要在 option 中设置 Media Query 须遵循如下格式：

option = {
    baseOption: { // 这里是基本的『原子option』。
        title: {...},
        legend: {...},
        series: [{...}, {...}, ...],
        ...
    },
    media: [ // 这里定义了 media query 的逐条规则。
        {
            query: {...},   // 这里写规则。
            option: {       // 这里写此规则满足下的option。
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二个规则。
            option: {       // 第二个规则对应的option。
                legend: {...},
                ...
            }
        },
        {                   // 这条里没有写规则，表示『默认』，
            option: {       // 即所有规则都不满足时，采纳这个option。
                legend: {...},
                ...
            }
        }
    ]
};

media: [
    ...,
    {
        query: {
            maxAspectRatio: 1           // 当长宽比小于1时。
        },
        option: {
            legend: {                   // legend 放在底部中间。
                right: 'center',
                bottom: 0,
                orient: 'horizontal'    // legend 横向布局。
            },
            series: [                   // 两个饼图左右布局。
                {
                    radius: [20, '50%'],
                    center: ['50%', '30%']
                },
                {
                    radius: [30, '50%'],
                    center: ['50%', '70%']
                }
            ]
        }
    },
    {
        query: {
            maxWidth: 500               // 当容器宽度小于 500 时。
        },
        option: {
            legend: {
                right: 10,              // legend 放置在右侧中间。
                top: '15%',
                orient: 'vertical'      // 纵向布局。
            },
            series: [                   // 两个饼图上下布局。
                {
                    radius: [20, '50%'],
                    center: ['50%', '30%']
                },
                {
                    radius: [30, '50%'],
                    center: ['50%', '75%']
                }
            ]
        }
    },
    ...
]

<script src="https://cdn.staticfile.net/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        $.when(
            $.getScript('https://www.runoob.com/static/js/timelineGDP.js'),
            $.getScript('https://www.runoob.com/static/js/draggable.js')
        ).done(function () {
            draggable.init(
                $('div[_echarts_instance_]')[0],
                myChart,
                {
                    width: 700,
                    height: 630,
                    lockY: true,
                    throttle: 70
                }
            );
            myChart.hideLoading();
            var categoryData = [
                '北京','天津','河北','山西','内蒙古','辽宁','吉林','黑龙江',
                '上海','江苏','浙江','安徽','福建','江西','山东','河南',
                '湖北','湖南','广东','广西','海南','重庆','四川','贵州',
                '云南','西藏','陕西','甘肃','青海','宁夏','新疆'
            ];
            option = {
                baseOption: {
                    timeline: {
                        axisType: 'category',
                        autoPlay: true,
                        playInterval: 1000,
                        data: [
                            '2002-01-01', '2003-01-01', '2004-01-01',
                            '2005-01-01', '2006-01-01', '2007-01-01',
                            '2008-01-01', '2009-01-01', '2010-01-01',
                            '2011-01-01'
                        ],
                        label: {
                            formatter : function(s) {
                                return (new Date(s)).getFullYear();
                            }
                        }
                    },
                    title: {
                        subtext: 'Media Query 示例'
                    },
                    tooltip: {
                        trigger:'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'value',
                        name: 'GDP（亿元）',
                        max: 30000,
                        data: null
                    },
                    yAxis: {
                        type: 'category',
                        data: categoryData,
                        axisLabel: {interval: 0},
                        splitLine: {show: false}
                    },
                    legend: {
                        data: ['第一产业', '第二产业', '第三产业', 'GDP', '金融', '房地产'],
                        selected: {
                            'GDP': false, '金融': false, '房地产': false
                        }
                    },
                    calculable : true,
                    series: [
                        {name: 'GDP', type: 'bar'},
                        {name: '金融', type: 'bar'},
                        {name: '房地产', type: 'bar'},
                        {name: '第一产业', type: 'bar'},
                        {name: '第二产业', type: 'bar'},
                        {name: '第三产业', type: 'bar'},
                        {name: 'GDP占比', type: 'pie'}
                    ]
                },
                media: [
                    {
                        option: {
                            legend: {
                                orient: 'horizontal',
                                left: 'right',
                                itemGap: 10
                            },
                            grid: {
                                left: '10%',
                                top: 80,
                                right: 90,
                                bottom: 100
                            },
                            xAxis: {
                                nameLocation: 'end',
                                nameGap: 10,
                                splitNumber: 5,
                                splitLine: {
                                    show: true
                                }
                            },
                            timeline: {
                                orient: 'horizontal',
                                inverse: false,
                                left: '20%',
                                right: '20%',
                                bottom: 10,
                                height: 40
                            },
                            series: [
                                {name: 'GDP占比', center: ['75%', '30%'], radius: '28%'}
                            ]
                        }
                    },
                    {
                        query: {maxWidth: 670, minWidth: 550},
                        option: {
                            legend: {
                                orient: 'horizontal',
                                left: 200,
                                itemGap: 5
                            },
                            grid: {
                                left: '10%',
                                top: 80,
                                right: 90,
                                bottom: 100
                            },
                            xAxis: {
                                nameLocation: 'end',
                                nameGap: 10,
                                splitNumber: 5,
                                splitLine: {
                                    show: true
                                }
                            },
                            timeline: {
                                orient: 'horizontal',
                                inverse: false,
                                left: '20%',
                                right: '20%',
                                bottom: 10,
                                height: 40
                            },
                            series: [
                                {name: 'GDP占比', center: ['75%', '30%'], radius: '28%'}
                            ]
                        }
                    },
                    {
                        query: {maxWidth: 550},
                        option: {
                            legend: {
                                orient: 'vertical',
                                left: 'right',
                                itemGap: 5
                            },
                            grid: {
                                left: 55,
                                top: '32%',
                                right: 100,
                                bottom: 50
                            },
                            xAxis: {
                                nameLocation: 'middle',
                                nameGap: 25,
                                splitNumber: 3
                            },
                            timeline: {
                                orient: 'vertical',
                                inverse: true,
                                right: 10,
                                top: 150,
                                bottom: 10,
                                width: 55
                            },
                            series: [
                                {name: 'GDP占比', center: ['45%', '20%'], radius: '28%'}
                            ]
                        }
                    }
                ],
                options: [
                    {
                        title: {text: '2002全国宏观经济指标'},
                        series: [
                            {data: dataMap.dataGDP['2002']},
                            {data: dataMap.dataFinancial['2002']},
                            {data: dataMap.dataEstate['2002']},
                            {data: dataMap.dataPI['2002']},
                            {data: dataMap.dataSI['2002']},
                            {data: dataMap.dataTI['2002']},
                            {data: [
                                {name: '第一产业', value: dataMap.dataPI['2002sum']},
                                {name: '第二产业', value: dataMap.dataSI['2002sum']},
                                {name: '第三产业', value: dataMap.dataTI['2002sum']}
                            ]}
                        ]
                    },
                    {
                        title : {text: '2003全国宏观经济指标'},
                        series : [
                            {data: dataMap.dataGDP['2003']},
                            {data: dataMap.dataFinancial['2003']},
                            {data: dataMap.dataEstate['2003']},
                            {data: dataMap.dataPI['2003']},
                            {data: dataMap.dataSI['2003']},
                            {data: dataMap.dataTI['2003']},
                            {data: [
                                {name: '第一产业', value: dataMap.dataPI['2003sum']},
                                {name: '第二产业', value: dataMap.dataSI['2003sum']},
                                {name: '第三产业', value: dataMap.dataTI['2003sum']}
                            ]}
                        ]
                    },
                    {
                        title : {text: '2004全国宏观经济指标'},
                        series : [
                            {data: dataMap.dataGDP['2004']},
                            {data: dataMap.dataFinancial['2004']},
                            {data: dataMap.dataEstate['2004']},
                            {data: dataMap.dataPI['2004']},
                            {data: dataMap.dataSI['2004']},
                            {data: dataMap.dataTI['2004']},
                            {data: [
                                {name: '第一产业', value: dataMap.dataPI['2004sum']},
                                {name: '第二产业', value: dataMap.dataSI['2004sum']},
                                {name: '第三产业', value: dataMap.dataTI['2004sum']}
                            ]}
                        ]
                    },
                    {
                        title : {text: '2005全国宏观经济指标'},
                        series : [
                            {data: dataMap.dataGDP['2005']},
                            {data: dataMap.dataFinancial['2005']},
                            {data: dataMap.dataEstate['2005']},
                            {data: dataMap.dataPI['2005']},
                            {data: dataMap.dataSI['2005']},
                            {data: dataMap.dataTI['2005']},
                            {data: [
                                {name: '第一产业', value: dataMap.dataPI['2005sum']},
                                {name: '第二产业', value: dataMap.dataSI['2005sum']},
                                {name: '第三产业', value: dataMap.dataTI['2005sum']}
                            ]}
                        ]
                    },
                    {
                        title : {text: '2006全国宏观经济指标'},
                        series : [
                            {data: dataMap.dataGDP['2006']},
                            {data: dataMap.dataFinancial['2006']},
                            {data: dataMap.dataEstate['2006']},
                            {data: dataMap.dataPI['2006']},
                            {data: dataMap.dataSI['2006']},
                            {data: dataMap.dataTI['2006']},
                            {data: [
                                {name: '第一产业', value: dataMap.dataPI['2006sum']},
                                {name: '第二产业', value: dataMap.dataSI['2006sum']},
                                {name: '第三产业', value: dataMap.dataTI['2006sum']}
                            ]}
                        ]
                    },
                    {
                        title : {text: '2007全国宏观经济指标'},
                        series : [
                            {data: dataMap.dataGDP['2007']},
                            {data: dataMap.dataFinancial['2007']},
                            {data: dataMap.dataEstate['2007']},
                            {data: dataMap.dataPI['2007']},
                            {data: dataMap.dataSI['2007']},
                            {data: dataMap.dataTI['2007']},
                            {data: [
                                {name: '第一产业', value: dataMap.dataPI['2007sum']},
                                {name: '第二产业', value: dataMap.dataSI['2007sum']},
                                {name: '第三产业', value: dataMap.dataTI['2007sum']}
                            ]}
                        ]
                    },
                    {
                        title : {text: '2008全国宏观经济指标'},
                        series : [
                            {data: dataMap.dataGDP['2008']},
                            {data: dataMap.dataFinancial['2008']},
                            {data: dataMap.dataEstate['2008']},
                            {data: dataMap.dataPI['2008']},
                            {data: dataMap.dataSI['2008']},
                            {data: dataMap.dataTI['2008']},
                            {data: [
                                {name: '第一产业', value: dataMap.dataPI['2008sum']},
                                {name: '第二产业', value: dataMap.dataSI['2008sum']},
                                {name: '第三产业', value: dataMap.dataTI['2008sum']}
                            ]}
                        ]
                    },
                    {
                        title : {text: '2009全国宏观经济指标'},
                        series : [
                            {data: dataMap.dataGDP['2009']},
                            {data: dataMap.dataFinancial['2009']},
                            {data: dataMap.dataEstate['2009']},
                            {data: dataMap.dataPI['2009']},
                            {data: dataMap.dataSI['2009']},
                            {data: dataMap.dataTI['2009']},
                            {data: [
                                {name: '第一产业', value: dataMap.dataPI['2009sum']},
                                {name: '第二产业', value: dataMap.dataSI['2009sum']},
                                {name: '第三产业', value: dataMap.dataTI['2009sum']}
                            ]}
                        ]
                    },
                    {
                        title : {text: '2010全国宏观经济指标'},
                        series : [
                            {data: dataMap.dataGDP['2010']},
                            {data: dataMap.dataFinancial['2010']},
                            {data: dataMap.dataEstate['2010']},
                            {data: dataMap.dataPI['2010']},
                            {data: dataMap.dataSI['2010']},
                            {data: dataMap.dataTI['2010']},
                            {data: [
                                {name: '第一产业', value: dataMap.dataPI['2010sum']},
                                {name: '第二产业', value: dataMap.dataSI['2010sum']},
                                {name: '第三产业', value: dataMap.dataTI['2010sum']}
                            ]}
                        ]
                    },
                    {
                        title : {text: '2011全国宏观经济指标'},
                        series : [
                            {data: dataMap.dataGDP['2011']},
                            {data: dataMap.dataFinancial['2011']},
                            {data: dataMap.dataEstate['2011']},
                            {data: dataMap.dataPI['2011']},
                            {data: dataMap.dataSI['2011']},
                            {data: dataMap.dataTI['2011']},
                            {data: [
                                {name: '第一产业', value: dataMap.dataPI['2011sum']},
                                {name: '第二产业', value: dataMap.dataSI['2011sum']},
                                {name: '第三产业', value: dataMap.dataTI['2011sum']}
                            ]}
                        ]
                    }
                ]
            };
            myChart.setOption(option);
        });
    </script>
</body>

`ECharts` 数据的视觉映射

图形类别（symbol）
图形大小（symbolSize）
颜色（color）
透明度（opacity）
颜色透明度（colorAlpha）
颜色明暗度（colorLightness）
颜色饱和度（colorSaturation）
色调（colorHue）

数据和维度

series.data最常见的形式是线性表，即一个普通数组：

series: {
    data: [
        {       // 这里每一个项就是数据项（dataItem）
            value: 2323, // 这是数据项的数据值（value）
            itemStyle: {...}
        },
        1212,   // 也可以直接是 dataItem 的 value，这更常见。
        2323,   // 每个 value 都是『一维』的。
        4343,
        3434
    ]
}
series: {
    data: [
        {                        // 这里每一个项就是数据项（dataItem）
            value: [3434, 129,  '圣马力诺'], // 这是数据项的数据值（value）
            itemStyle: {...}
        },
        [1212, 5454, '梵蒂冈'],   // 也可以直接是 dataItem 的 value，这更常见。
        [2323, 3223, '瑙鲁'],     // 每个 value 都是『三维』的，每列是一个维度。
        [4343, 23,   '图瓦卢']    // 假如是『气泡图』，常见第一维度映射到x轴，
                                 // 第二维度映射到y轴，
                                 // 第三维度映射到气泡半径（symbolSize）
    ]
}

visualMap 组件

visualMap 组件定义了把数据的指定维度映射到对应的视觉元素上

option = {
    visualMap: [
        { // 第一个 visualMap 组件
            type: 'continuous', // 定义为连续型 visualMap
            ...
        },
        { // 第二个 visualMap 组件
            type: 'piecewise', // 定义为分段型 visualMap
            ...
        }
    ],
    ...
};

<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
        <script type="text/javascript">
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;
            var geoCoordMap = {
                "海门":[121.15,31.89],
                "鄂尔多斯":[109.781327,39.608266],
                "招远":[120.38,37.35],
                "舟山":[122.207216,29.985295],
                "齐齐哈尔":[123.97,47.33],
                "盐城":[120.13,33.38],
                "赤峰":[118.87,42.28],
                "青岛":[120.33,36.07],
                "乳山":[121.52,36.89],
                "金昌":[102.188043,38.520089],
                "泉州":[118.58,24.93],
                "莱西":[120.53,36.86],
                "日照":[119.46,35.42],
                "胶南":[119.97,35.88],
                "南通":[121.05,32.08],
                "拉萨":[91.11,29.97],
                "云浮":[112.02,22.93],
                "梅州":[116.1,24.55],
                "文登":[122.05,37.2],
                "上海":[121.48,31.22],
                "攀枝花":[101.718637,26.582347],
                "威海":[122.1,37.5],
                "承德":[117.93,40.97],
                "厦门":[118.1,24.46],
                "汕尾":[115.375279,22.786211],
                "潮州":[116.63,23.68],
                "丹东":[124.37,40.13],
                "太仓":[121.1,31.45],
                "曲靖":[103.79,25.51],
                "烟台":[121.39,37.52],
                "福州":[119.3,26.08],
                "瓦房店":[121.979603,39.627114],
                "即墨":[120.45,36.38],
                "抚顺":[123.97,41.97],
                "玉溪":[102.52,24.35],
                "张家口":[114.87,40.82],
                "阳泉":[113.57,37.85],
                "莱州":[119.942327,37.177017],
                "湖州":[120.1,30.86],
                "汕头":[116.69,23.39],
                "昆山":[120.95,31.39],
                "宁波":[121.56,29.86],
                "湛江":[110.359377,21.270708],
                "揭阳":[116.35,23.55],
                "荣成":[122.41,37.16],
                "连云港":[119.16,34.59],
                "葫芦岛":[120.836932,40.711052],
                "常熟":[120.74,31.64],
                "东莞":[113.75,23.04],
                "河源":[114.68,23.73],
                "淮安":[119.15,33.5],
                "泰州":[119.9,32.49],
                "南宁":[108.33,22.84],
                "营口":[122.18,40.65],
                "惠州":[114.4,23.09],
                "江阴":[120.26,31.91],
                "蓬莱":[120.75,37.8],
                "韶关":[113.62,24.84],
                "嘉峪关":[98.289152,39.77313],
                "广州":[113.23,23.16],
                "延安":[109.47,36.6],
                "太原":[112.53,37.87],
                "清远":[113.01,23.7],
                "中山":[113.38,22.52],
                "昆明":[102.73,25.04],
                "寿光":[118.73,36.86],
                "盘锦":[122.070714,41.119997],
                "长治":[113.08,36.18],
                "深圳":[114.07,22.62],
                "珠海":[113.52,22.3],
                "宿迁":[118.3,33.96],
                "咸阳":[108.72,34.36],
                "铜川":[109.11,35.09],
                "平度":[119.97,36.77],
                "佛山":[113.11,23.05],
                "海口":[110.35,20.02],
                "江门":[113.06,22.61],
                "章丘":[117.53,36.72],
                "肇庆":[112.44,23.05],
                "大连":[121.62,38.92],
                "临汾":[111.5,36.08],
                "吴江":[120.63,31.16],
                "石嘴山":[106.39,39.04],
                "沈阳":[123.38,41.8],
                "苏州":[120.62,31.32],
                "茂名":[110.88,21.68],
                "嘉兴":[120.76,30.77],
                "长春":[125.35,43.88],
                "胶州":[120.03336,36.264622],
                "银川":[106.27,38.47],
                "张家港":[120.555821,31.875428],
                "三门峡":[111.19,34.76],
                "锦州":[121.15,41.13],
                "南昌":[115.89,28.68],
                "柳州":[109.4,24.33],
                "三亚":[109.511909,18.252847],
                "自贡":[104.778442,29.33903],
                "吉林":[126.57,43.87],
                "阳江":[111.95,21.85],
                "泸州":[105.39,28.91],
                "西宁":[101.74,36.56],
                "宜宾":[104.56,29.77],
                "呼和浩特":[111.65,40.82],
                "成都":[104.06,30.67],
                "大同":[113.3,40.12],
                "镇江":[119.44,32.2],
                "桂林":[110.28,25.29],
                "张家界":[110.479191,29.117096],
                "宜兴":[119.82,31.36],
                "北海":[109.12,21.49],
                "西安":[108.95,34.27],
                "金坛":[119.56,31.74],
                "东营":[118.49,37.46],
                "牡丹江":[129.58,44.6],
                "遵义":[106.9,27.7],
                "绍兴":[120.58,30.01],
                "扬州":[119.42,32.39],
                "常州":[119.95,31.79],
                "潍坊":[119.1,36.62],
                "重庆":[106.54,29.59],
                "台州":[121.420757,28.656386],
                "南京":[118.78,32.04],
                "滨州":[118.03,37.36],
                "贵阳":[106.71,26.57],
                "无锡":[120.29,31.59],
                "本溪":[123.73,41.3],
                "克拉玛依":[84.77,45.59],
                "渭南":[109.5,34.52],
                "马鞍山":[118.48,31.56],
                "宝鸡":[107.15,34.38],
                "焦作":[113.21,35.24],
                "句容":[119.16,31.95],
                "北京":[116.46,39.92],
                "徐州":[117.2,34.26],
                "衡水":[115.72,37.72],
                "包头":[110,40.58],
                "绵阳":[104.73,31.48],
                "乌鲁木齐":[87.68,43.77],
                "枣庄":[117.57,34.86],
                "杭州":[120.19,30.26],
                "淄博":[118.05,36.78],
                "鞍山":[122.85,41.12],
                "溧阳":[119.48,31.43],
                "库尔勒":[86.06,41.68],
                "安阳":[114.35,36.1],
                "开封":[114.35,34.79],
                "济南":[117,36.65],
                "德阳":[104.37,31.13],
                "温州":[120.65,28.01],
                "九江":[115.97,29.71],
                "邯郸":[114.47,36.6],
                "临安":[119.72,30.23],
                "兰州":[103.73,36.03],
                "沧州":[116.83,38.33],
                "临沂":[118.35,35.05],
                "南充":[106.110698,30.837793],
                "天津":[117.2,39.13],
                "富阳":[119.95,30.07],
                "泰安":[117.13,36.18],
                "诸暨":[120.23,29.71],
                "郑州":[113.65,34.76],
                "哈尔滨":[126.63,45.75],
                "聊城":[115.97,36.45],
                "芜湖":[118.38,31.33],
                "唐山":[118.02,39.63],
                "平顶山":[113.29,33.75],
                "邢台":[114.48,37.05],
                "德州":[116.29,37.45],
                "济宁":[116.59,35.38],
                "荆州":[112.239741,30.335165],
                "宜昌":[111.3,30.7],
                "义乌":[120.06,29.32],
                "丽水":[119.92,28.45],
                "洛阳":[112.44,34.7],
                "秦皇岛":[119.57,39.95],
                "株洲":[113.16,27.83],
                "石家庄":[114.48,38.03],
                "莱芜":[117.67,36.19],
                "常德":[111.69,29.05],
                "保定":[115.48,38.85],
                "湘潭":[112.91,27.87],
                "金华":[119.64,29.12],
                "岳阳":[113.09,29.37],
                "长沙":[113,28.21],
                "衢州":[118.88,28.97],
                "廊坊":[116.7,39.53],
                "菏泽":[115.480656,35.23375],
                "合肥":[117.27,31.86],
                "武汉":[114.31,30.52],
                "大庆":[125.03,46.58]
            };
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push(geoCoord.concat(data[i].value));
                    }
                }
                return res;
            };
            option = {
                backgroundColor: '#404a59',
                title: {
                    text: '全国主要城市空气质量',
                    subtext: 'data from PM25.in',
                    sublink: 'http://www.pm25.in',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    top: 'bottom',
                    left: 'right',
                    data:['pm2.5'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                visualMap: {
                    min: 0,
                    max: 300,
                    splitNumber: 5,
                    color: ['#d94e5d','#eac736','#50a3ba'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                geo: {
                    map: 'china',
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#323c48',
                            borderColor: '#111'
                        },
                        emphasis: {
                            areaColor: '#2a333d'
                        }
                    }
                },
                series: [
                    {
                        name: 'pm2.5',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData([
                            {name: "海门", value: 9},
                            {name: "鄂尔多斯", value: 12},
                            {name: "招远", value: 12},
                            {name: "舟山", value: 12},
                            {name: "齐齐哈尔", value: 14},
                            {name: "盐城", value: 15},
                            {name: "赤峰", value: 16},
                            {name: "青岛", value: 18},
                            {name: "乳山", value: 18},
                            {name: "金昌", value: 19},
                            {name: "泉州", value: 21},
                            {name: "莱西", value: 21},
                            {name: "日照", value: 21},
                            {name: "胶南", value: 22},
                            {name: "南通", value: 23},
                            {name: "拉萨", value: 24},
                            {name: "云浮", value: 24},
                            {name: "梅州", value: 25},
                            {name: "文登", value: 25},
                            {name: "上海", value: 25},
                            {name: "攀枝花", value: 25},
                            {name: "威海", value: 25},
                            {name: "承德", value: 25},
                            {name: "厦门", value: 26},
                            {name: "汕尾", value: 26},
                            {name: "潮州", value: 26},
                            {name: "丹东", value: 27},
                            {name: "太仓", value: 27},
                            {name: "曲靖", value: 27},
                            {name: "烟台", value: 28},
                            {name: "福州", value: 29},
                            {name: "瓦房店", value: 30},
                            {name: "即墨", value: 30},
                            {name: "抚顺", value: 31},
                            {name: "玉溪", value: 31},
                            {name: "张家口", value: 31},
                            {name: "阳泉", value: 31},
                            {name: "莱州", value: 32},
                            {name: "湖州", value: 32},
                            {name: "汕头", value: 32},
                            {name: "昆山", value: 33},
                            {name: "宁波", value: 33},
                            {name: "湛江", value: 33},
                            {name: "揭阳", value: 34},
                            {name: "荣成", value: 34},
                            {name: "连云港", value: 35},
                            {name: "葫芦岛", value: 35},
                            {name: "常熟", value: 36},
                            {name: "东莞", value: 36},
                            {name: "河源", value: 36},
                            {name: "淮安", value: 36},
                            {name: "泰州", value: 36},
                            {name: "南宁", value: 37},
                            {name: "营口", value: 37},
                            {name: "惠州", value: 37},
                            {name: "江阴", value: 37},
                            {name: "蓬莱", value: 37},
                            {name: "韶关", value: 38},
                            {name: "嘉峪关", value: 38},
                            {name: "广州", value: 38},
                            {name: "延安", value: 38},
                            {name: "太原", value: 39},
                            {name: "清远", value: 39},
                            {name: "中山", value: 39},
                            {name: "昆明", value: 39},
                            {name: "寿光", value: 40},
                            {name: "盘锦", value: 40},
                            {name: "长治", value: 41},
                            {name: "深圳", value: 41},
                            {name: "珠海", value: 42},
                            {name: "宿迁", value: 43},
                            {name: "咸阳", value: 43},
                            {name: "铜川", value: 44},
                            {name: "平度", value: 44},
                            {name: "佛山", value: 44},
                            {name: "海口", value: 44},
                            {name: "江门", value: 45},
                            {name: "章丘", value: 45},
                            {name: "肇庆", value: 46},
                            {name: "大连", value: 47},
                            {name: "临汾", value: 47},
                            {name: "吴江", value: 47},
                            {name: "石嘴山", value: 49},
                            {name: "沈阳", value: 50},
                            {name: "苏州", value: 50},
                            {name: "茂名", value: 50},
                            {name: "嘉兴", value: 51},
                            {name: "长春", value: 51},
                            {name: "胶州", value: 52},
                            {name: "银川", value: 52},
                            {name: "张家港", value: 52},
                            {name: "三门峡", value: 53},
                            {name: "锦州", value: 54},
                            {name: "南昌", value: 54},
                            {name: "柳州", value: 54},
                            {name: "三亚", value: 54},
                            {name: "自贡", value: 56},
                            {name: "吉林", value: 56},
                            {name: "阳江", value: 57},
                            {name: "泸州", value: 57},
                            {name: "西宁", value: 57},
                            {name: "宜宾", value: 58},
                            {name: "呼和浩特", value: 58},
                            {name: "成都", value: 58},
                            {name: "大同", value: 58},
                            {name: "镇江", value: 59},
                            {name: "桂林", value: 59},
                            {name: "张家界", value: 59},
                            {name: "宜兴", value: 59},
                            {name: "北海", value: 60},
                            {name: "西安", value: 61},
                            {name: "金坛", value: 62},
                            {name: "东营", value: 62},
                            {name: "牡丹江", value: 63},
                            {name: "遵义", value: 63},
                            {name: "绍兴", value: 63},
                            {name: "扬州", value: 64},
                            {name: "常州", value: 64},
                            {name: "潍坊", value: 65},
                            {name: "重庆", value: 66},
                            {name: "台州", value: 67},
                            {name: "南京", value: 67},
                            {name: "滨州", value: 70},
                            {name: "贵阳", value: 71},
                            {name: "无锡", value: 71},
                            {name: "本溪", value: 71},
                            {name: "克拉玛依", value: 72},
                            {name: "渭南", value: 72},
                            {name: "马鞍山", value: 72},
                            {name: "宝鸡", value: 72},
                            {name: "焦作", value: 75},
                            {name: "句容", value: 75},
                            {name: "北京", value: 79},
                            {name: "徐州", value: 79},
                            {name: "衡水", value: 80},
                            {name: "包头", value: 80},
                            {name: "绵阳", value: 80},
                            {name: "乌鲁木齐", value: 84},
                            {name: "枣庄", value: 84},
                            {name: "杭州", value: 84},
                            {name: "淄博", value: 85},
                            {name: "鞍山", value: 86},
                            {name: "溧阳", value: 86},
                            {name: "库尔勒", value: 86},
                            {name: "安阳", value: 90},
                            {name: "开封", value: 90},
                            {name: "济南", value: 92},
                            {name: "德阳", value: 93},
                            {name: "温州", value: 95},
                            {name: "九江", value: 96},
                            {name: "邯郸", value: 98},
                            {name: "临安", value: 99},
                            {name: "兰州", value: 99},
                            {name: "沧州", value: 100},
                            {name: "临沂", value: 103},
                            {name: "南充", value: 104},
                            {name: "天津", value: 105},
                            {name: "富阳", value: 106},
                            {name: "泰安", value: 112},
                            {name: "诸暨", value: 112},
                            {name: "郑州", value: 113},
                            {name: "哈尔滨", value: 114},
                            {name: "聊城", value: 116},
                            {name: "芜湖", value: 117},
                            {name: "唐山", value: 119},
                            {name: "平顶山", value: 119},
                            {name: "邢台", value: 119},
                            {name: "德州", value: 120},
                            {name: "济宁", value: 120},
                            {name: "荆州", value: 127},
                            {name: "宜昌", value: 130},
                            {name: "义乌", value: 132},
                            {name: "丽水", value: 133},
                            {name: "洛阳", value: 134},
                            {name: "秦皇岛", value: 136},
                            {name: "株洲", value: 143},
                            {name: "石家庄", value: 147},
                            {name: "莱芜", value: 148},
                            {name: "常德", value: 152},
                            {name: "保定", value: 153},
                            {name: "湘潭", value: 154},
                            {name: "金华", value: 157},
                            {name: "岳阳", value: 169},
                            {name: "长沙", value: 175},
                            {name: "衢州", value: 177},
                            {name: "廊坊", value: 193},
                            {name: "菏泽", value: 194},
                            {name: "合肥", value: 229},
                            {name: "武汉", value: 273},
                            {name: "大庆", value: 279}
                        ]),
                        symbolSize: 12,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            emphasis: {
                                borderColor: '#fff',
                                borderWidth: 1
                            }
                        }
                    }
                ]
            };
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        </script>
    </body>

视觉映射方式的配置

visualMap 中可以指定数据的指定维度映射到对应的视觉元素上

option = {
    visualMap: [
        {
            type: 'piecewise'
            min: 0,
            max: 5000,
            dimension: 3,       // series.data 的第四个维度（即 value[3]）被映射
            seriesIndex: 4,     // 对第四个系列进行映射。
            inRange: {          // 选中范围中的视觉配置
                color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表，
                                                    // 数据最小值映射到'blue'上，
                                                    // 最大值映射到'red'上，
                                                    // 其余自动线性计算。
                symbolSize: [30, 100]               // 定义了图形尺寸的映射范围，
                                                    // 数据最小值映射到30上，
                                                    // 最大值映射到100上，
                                                    // 其余自动线性计算。
            },
            outOfRange: {       // 选中范围外的视觉配置
                symbolSize: [30, 100]
            }
        },
        ...
    ]
};

option = {
    visualMap: [
        {
            ...,
            inRange: {          // 选中范围中的视觉配置
                colorLightness: [0.2, 1], // 映射到明暗度上。也就是对本来的颜色进行明暗度处理。
                                          // 本来的颜色可能是从全局色板中选取的颜色，visualMap组件并不关心。
                symbolSize: [30, 100]
            },
            ...
        },
        ...
    ]
};

ECharts 事件处理

ECharts 中我们可以通过监听用户的操作行为来回调对应的函数

ECharts 通过 on 方法来监听用户的行为，例如监控用户的点击行为

ECharts 中事件分为两种类型:

用户鼠标操作点击，如 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件

还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 'legendselectchanged'事件），数据区域缩放时触发的'datazoom'事件等等

myChart.on('click', function (params) {
    // 在用户点击后控制台打印数据的名称
    console.log(params);
});
myChart.on('legendselectchanged', function (params) {
    console.log(params);
});
chart.on('click', 'series.line', function (params) {
    console.log(params);
});
chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {
    console.log(params);
});

鼠标事件

ECharts 支持的鼠标事件类型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件

<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        // 处理点击事件并且弹出数据名称
        myChart.on('click', function (params) {
            alert(params.name);
        });
    </script>
</body>

组件交互的行为事件

在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 events 文档中有列出

下面是监听一个图例开关的示例：

<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        myChart.setOption(option);
        myChart.on('click', function (params) {
            alert(params.name);
        });
    </script>
</body>

代码触发 ECharts 中组件的行为

上面我们只说明了用户的交互操作，但有时候我们也会需要在程序里调用方法并触发图表的行为，比如显示 tooltip

ECharts通过 dispatchAction({ type: '' }) 来触发图表行为，统一管理了所有动作，也可以根据需要去记录用户的行为路径

以上实例用于轮播饼图中的tooltip：

<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main"  style="height: 100%;min-height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var app = {};
        option = null;
        var option = {
            title : {
                text: '饼图程序调用高亮示例',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        app.currentIndex = -1;
        setInterval(function () {
            var dataLen = option.series[0].data.length;
            // 取消之前高亮的图形
            myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: app.currentIndex
            });
            app.currentIndex = (app.currentIndex + 1) % dataLen;
            // 高亮当前图形
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: app.currentIndex
            });
            // 显示 tooltip
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: app.currentIndex
            });
        }, 1000);
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
</body>

ECharts 旭日图

旭日图（Sunburst）由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。

ECharts 创建旭日图很简单，只需要在 series 配置项中声明类型为 sunburst 即可，data 数据结构以树形结构声明，看下一个简单的实例：

<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            series: {
                type: 'sunburst',
                data: [{
                    name: 'A',
                    value: 10,
                    children: [{
                        value: 3,
                        name: 'Aa'
                    }, {
                        value: 5,
                        name: 'Ab'
                    }]
                }, {
                    name: 'B',
                    children: [{
                        name: 'Ba',
                        value: 4
                    }, {
                        name: 'Bb',
                        value: 2
                    }]
                }, {
                    name: 'C',
                    value: 3
                }]
            }
        };
        myChart.setOption(option);
    </script>
</body>

颜色等样式调整

默认情况下会使用全局调色盘 color 分配最内层的颜色，其余层则与其父元素同色

在旭日图中，扇形块的颜色有以下三种设置方式：

在 series.data.itemStyle 中设置每个扇形块的样式
在 series.levels.itemStyle 中设置每一层的样式
在 series.itemStyle 中设置整个旭日图的样式

上述三者的优先级是从高到低的，也就是说，配置了 series.data.itemStyle 的扇形块将会覆盖 series.levels.itemStyle 和 series.itemStyle 的设置

下面，我们将整体的颜色设为灰色 #aaa，将最内层的颜色设为蓝色 blue，将 Aa、B 这两块设为红色 red

<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            series: {
                type: 'sunburst',
                data: [{
                    name: 'A',
                    value: 10,
                    children: [{
                        value: 3,
                        name: 'Aa',
                        itemStyle: {
                            color: 'red'
                        }
                    }, {
                        value: 5,
                        name: 'Ab'
                    }]
                }, {
                    name: 'B',
                    children: [{
                        name: 'Ba',
                        value: 4
                    }, {
                        name: 'Bb',
                        value: 2
                    }],
                    itemStyle: {
                        color: 'red'
                    }
                }, {
                    name: 'C',
                    value: 3
                }],
                itemStyle: {
                    color: '#aaa'
                },
                levels: [{
                    // 留给数据下钻的节点属性
                }, {
                    itemStyle: {
                        color: 'blue'
                    }
                }]
            }
        };
        myChart.setOption(option);
    </script>
</body>

数据下钻

旭日图默认支持数据下钻，也就是说，当点击了扇形块之后，将以该扇形块的数据作为根节点，进一步显示该数据的细节

在数据下钻后，图形的中间会出现一个用于返回上一层的图形，该图形的样式可以通过 levels[0] 配置

<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var data = [{
            name: 'Grandpa',
            children: [{
                name: 'Uncle Leo',
                value: 15,
                children: [{
                    name: 'Cousin Jack',
                    value: 2
                }, {
                    name: 'Cousin Mary',
                    value: 5,
                    children: [{
                        name: 'Jackson',
                        value: 2
                    }]
                }, {
                    name: 'Cousin Ben',
                    value: 4
                }]
            }, {
                name: 'Father',
                value: 10,
                children: [{
                    name: 'Me',
                    value: 5
                }, {
                    name: 'Brother Peter',
                    value: 1
                }]
            }]
        }, {
            name: 'Nancy',
            children: [{
                name: 'Uncle Nike',
                children: [{
                    name: 'Cousin Betty',
                    value: 1
                }, {
                    name: 'Cousin Jenny',
                    value: 2
                }]
            }]
        }];
        option = {
            series: {
                type: 'sunburst',
                // highlightPolicy: 'ancestor',
                data: data,
                radius: [0, '90%'],
                label: {
                    rotate: 'radial'
                }
            }
        };
        myChart.setOption(option);
    </script>
</body>

高亮相关扇形块

旭日图支持鼠标移动到某扇形块时，高亮相关数据块的操作，可以通过设置 highlightPolicy，包括以下几种高亮方式：

'descendant'（默认值）：高亮鼠标移动所在扇形块与其后代元素；
'ancestor'：高亮鼠标所在扇形块与其祖先元素；
'self'：仅高亮鼠标所在扇形块；
'none'：不会淡化（downplay）其他元素

https://www.runoob.com/echarts/echarts-sunburst.html

`Ajax`

简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据

伪造Ajax - iframe标签

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>kuangshen</title>
    </head>
    <body>
        <script type="text/javascript">
            window.onload = function(){
                var myDate = new Date();
                document.getElementById('currentTime').innerText = myDate.getTime();
            };
            function LoadPage(){
                var targetUrl =  document.getElementById('url').value;
                console.log(targetUrl);
                document.getElementById("iframePosition").src = targetUrl;
            }
        </script>
        <div>
            <p>请输入要加载的地址:<span id="currentTime"></span></p>
            <p>
                <input id="url" type="text" value="https://www.baidu.com/"/>
                <input type="button" value="提交" οnclick="LoadPage()">
            </p>
        </div>
        <div>
            <h3>加载页面位置:</h3>
            <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
        </div>
    </body>
</html>

利用AJAX可以做:

注册时，输入用户名自动检测用户是否已经存在
登陆时，提示用户名密码错误
删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除

`jQuery.ajax`

code.jquery.com/jquery-3.7.1.js

也可直接在jQuery官网下载最小的版本

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中
jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用

jQuery.get(...)
/* 参数   
- url: 待载入页面的URL地址
- data: 待发送 key/value 参数
- success: 载入成功时回调函数
- dataType: 返回内容格式, xml, json, script, text, html  */
jQuery.post(...)
/* 参数   
- url: 待载入页面的URL地址
- data: 待发送 key/value 参数
- success: 载入成功时回调函数
- dataType: 返回内容格式, xml, json, script, text, html  */
jQuery.getJSON(...)
/* 参数   
- url: 待载入页面的URL地址
- data: 待发送 key/value 参数
- success: 载入成功时回调函数  */
jQuery.getScript(...)
/* 参数   
- url: 待载入页面的URL地址
- data: 待发送 key/value 参数
- success: 载入成功时回调函数  */
jQuery.ajax(...)
/* 参数(了解)
- url: 请求地址
- type: 请求方式，GET、POST（1.9.0之后用method）
- headers: 请求头
- data: 要发送的数据
- contentType: 即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
- async: 是否异步
- timeout: 设置请求超时时间（毫秒）
- beforeSend: 发送请求前执行的函数(全局)
- complete: 完成之后执行的回调函数(全局)
- success: 成功之后执行的回调函数(全局)
- error: 失败之后执行的回调函数(全局)
- accepts: 通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
- dataType: 将服务器端返回的数据转换成指定类型
- "xml": 将服务器端返回的内容转换成xml格式
- "text": 将服务器端返回的内容转换成普通文本格式
- "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
- "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
- "json": 将服务器端返回的内容转换成相应的JavaScript对象
- "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数  */

我们来个简单的测试，使用最原始的HttpServletResponse处理 , .最简单 , 最通用

1、配置web.xml 和 springmvc的配置文件，复制上面案例的即可【记得静态资源过滤和注解驱动配置上】

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:context="http://www.springframework.org/schema/context"
      xmlns:mvc="http://www.springframework.org/schema/mvc"
      xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       https://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       https://www.springframework.org/schema/mvc/spring-mvc.xsd">

   <!-- 自动扫描指定的包，下面所有注解类交给IOC容器管理 -->
   <context:component-scan base-package="com.kuang.controller"/>
   <mvc:default-servlet-handler />
   <mvc:annotation-driven />

   <!-- 视图解析器 -->
   <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
         id="internalResourceViewResolver">
       <!-- 前缀 -->
       <property name="prefix" value="/WEB-INF/jsp/" />
       <!-- 后缀 -->
       <property name="suffix" value=".jsp" />
   </bean>
</beans>

2、编写一个AjaxController

@Controller
public class AjaxController {
    @RequestMapping("/a1")
    public void ajax1(String name , HttpServletResponse response) throws IOException {
        if ("admin".equals(name)){
            response.getWriter().print("true");
        }else{
            response.getWriter().print("false");
        }
    }
}

3、导入jquery ，可以使用在线的CDN ，也可以下载导入

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>

4、编写index.jsp测试

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
        <head>
            <title>$Title$</title>
            <%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
        <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
        <script>
            function a1(){
                $.post({
                    url:"${pageContext.request.contextPath}/a1",
                    data:{'name':$("#txtName").val()},
                    success:function (data,status) {
                        alert(data);
                        alert(status);
                    }
                });
            }
        </script>
        </head>
    <body>
        <%--onblur:失去焦点触发事件--%>
            用户名:<input type="text" id="txtName" οnblur="a1()"/>
            </body>
        </html>

5、启动tomcat测试！打开浏览器的控制台，当我们鼠标离开输入框的时候，可以看到发出了一个ajax的请求！是后台返回给我们的结果！测试成功！

Springmvc实现

实体类user

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String name;
    private int age;
    private String sex;
}

我们来获取一个集合对象，展示到前端页面

@RequestMapping("/a2")
public List<User> ajax2(){
   List<User> list = new ArrayList<User>();
   list.add(new User("秦疆1号",3,"男"));
   list.add(new User("秦疆2号",3,"男"));
   list.add(new User("秦疆3号",3,"男"));
   return list; //由于@RestController注解，将list转成json格式返回
}

前端页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
        <head>
            <title>Title</title>
        </head>
        <body>
            <input type="button" id="btn" value="获取数据"/>
            <table width="80%" align="center">
                <tr>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                </tr>
                <tbody id="content">
                </tbody>
            </table>
            <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
            <script>
                $(function () {
                    $("#btn").click(function () {
                        $.post("${pageContext.request.contextPath}/a2",function (data) {
                            console.log(data)
                            var html="";
                            for (var i = 0; i <data.length ; i++) {
                                html+= "<tr>" +
                                    "<td>" + data[i].name + "</td>" +
                                    "<td>" + data[i].age + "</td>" +
                                    "<td>" + data[i].sex + "</td>" +
                                    "</tr>"
                            }
                            $("#content").html(html);
                        });
                    })
                })
            </script>
        </body>
    </html>

成功实现了数据回显！可以体会一下Ajax的好处！

注册提示效果

我们再测试一个小Demo，思考一下我们平时注册时候，输入框后面的实时提示怎么做到的；如何优化

我们写一个Controller

@RequestMapping("/a3")
public String ajax3(String name,String pwd){
   String msg = "";
   //模拟数据库中存在数据
   if (name!=null){
       if ("admin".equals(name)){
           msg = "OK";
      }else {
           msg = "用户名输入错误";
      }
  }
   if (pwd!=null){
       if ("123456".equals(pwd)){
           msg = "OK";
      }else {
           msg = "密码输入有误";
      }
  }
   return msg; //由于@RestController注解，将msg转成json格式返回
}

前端页面 login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
        <head>
            <title>ajax</title>
            <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
            <script>
                function a1(){
                    $.post({
                        url:"${pageContext.request.contextPath}/a3",
                        data:{'name':$("#name").val()},
                        success:function (data) {
                            if (data.toString()=='OK'){
                                $("#userInfo").css("color","green");
                            }else {
                                $("#userInfo").css("color","red");
                            }
                            $("#userInfo").html(data);
                        }
                    });
                }
                function a2(){
                    $.post({
                        url:"${pageContext.request.contextPath}/a3",
                        data:{'pwd':$("#pwd").val()},
                        success:function (data) {
                            if (data.toString()=='OK'){
                                $("#pwdInfo").css("color","green");
                            }else {
                                $("#pwdInfo").css("color","red");
                            }
                            $("#pwdInfo").html(data);
                        }
                    });
                }
            </script>
        </head>
        <body>
            <p>
                用户名:<input type="text" id="name" οnblur="a1()"/>
                <span id="userInfo"></span>
            </p>
            <p>
                密码:<input type="text" id="pwd" οnblur="a2()"/>
                <span id="pwdInfo"></span>
            </p>
        </body>
    </html>

【记得处理json乱码问题】

测试一下效果，动态请求响应，局部刷新，就是如此！

获取baidu接口Demo

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>JSONP百度搜索</title>
        <style>
            #q{
                width: 500px;
                height: 30px;
                border:1px solid #ddd;
                line-height: 30px;
                display: block;
                margin: 0 auto;
                padding: 0 10px;
                font-size: 14px;
            }
            #ul{
                width: 520px;
                list-style: none;
                margin: 0 auto;
                padding: 0;
                border:1px solid #ddd;
                margin-top: -1px;
                display: none;
            }
            #ul li{
                line-height: 30px;
                padding: 0 10px;
            }
            #ul li:hover{
                background-color: #f60;
                color: #fff;
            }
        </style>
        <script>
            // 2.步骤二
            // 定义demo函数 (分析接口、数据)
            function demo(data){
                var Ul = document.getElementById('ul');
                var html = '';
                // 如果搜索数据存在 把内容添加进去
                if (data.s.length) {
                    // 隐藏掉的ul显示出来
                    Ul.style.display = 'block';
                    // 搜索到的数据循环追加到li里
                    for(var i = 0;i<data.s.length;i++){
                        html += '<li>'+data.s[i]+'</li>';
                    }
                    // 循环的li写入ul
                    Ul.innerHTML = html;
                }
            }
            // 1.步骤一
            window.onload = function(){
                // 获取输入框和ul
                var Q = document.getElementById('q');
                var Ul = document.getElementById('ul');
                // 事件鼠标抬起时候
                Q.onkeyup = function(){
                    // 如果输入框不等于空
                    if (this.value != '') {
                        // ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆JSONPz重点☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
                        // 创建标签
                        var script = document.createElement('script');
                        //给定要跨域的地址 赋值给src
                        //这里是要请求的跨域的地址 我写的是百度搜索的跨域地址
                        script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=demo';
                        // 将组合好的带src的script标签追加到body里
                        document.body.appendChild(script);
                    }
                }
            }
        </script>
    </head>
    <body>
        <input type="text" id="q" />
        <ul id="ul">
        </ul>
    </body>
</html>