Skip to content

Latest commit

 

History

History
1132 lines (927 loc) · 27.4 KB

实训.md

File metadata and controls

1132 lines (927 loc) · 27.4 KB

D2(7/2)jdbc

jdbc

jdbc是java application和dbms的中间层

mysql安装

mysql安装用php工具箱。在mysql的bin目录用检查是否安装成功

mysql -u root -p

java程序连接mysql,发起查询请求

 import java.sql.*;
 
public class mysql {
 
    // MySQL 8.0 以下版本 - JDBC 驱动名及数据库 URL
    static final String JDBC_DRIVER = "com.mysql.jdbc.Driver";  
    static final String DB_URL = "jdbc:mysql://localhost:3306/manager";
 
    // MySQL 8.0 以上版本 - JDBC 驱动名及数据库 URL
    //static final String JDBC_DRIVER = "com.mysql.cj.jdbc.Driver";  
    //static final String DB_URL = "jdbc:mysql://localhost:3306/RUNOOB?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=UTC";
 
 
    // 数据库的用户名与密码,需要根据自己的设置
    static final String USER = "root";
    static final String PASS = "123456";
 
    public static void main(String[] args) {
        Connection conn = null;
        Statement stmt = null;
        try{
            // 注册 JDBC 驱动
            Class.forName(JDBC_DRIVER);
        
            // 打开链接
            System.out.println("连接数据库...");
            conn = DriverManager.getConnection(DB_URL,USER,PASS);
        
            // 执行查询
            System.out.println(" 实例化Statement对象...");
            stmt = conn.createStatement();
            String sql;
            sql = "SELECT id, bname, price FROM book1";
            ResultSet rs = stmt.executeQuery(sql);
        
            // 展开结果集数据库
            while(rs.next()){
                // 通过字段检索
                int id  = rs.getInt("id");
                String name = rs.getString("bname");
                String url = rs.getString("price");
    
                // 输出数据
                System.out.print("ID: " + id);
                System.out.print(", 书名: " + name);
                System.out.print(", 价格: " + url);
                System.out.print("\n");
            }
            // 完成后关闭
            rs.close();
            stmt.close();
            conn.close();
        }catch(SQLException se){
            // 处理 JDBC 错误
            se.printStackTrace();
        }catch(Exception e){
            // 处理 Class.forName 错误
            e.printStackTrace();
        }finally{
            // 关闭资源
            try{
                if(stmt!=null) stmt.close();
            }catch(SQLException se2){
            }// 什么都不做
            try{
                if(conn!=null) conn.close();
            }catch(SQLException se){
                se.printStackTrace();
            }
        }
        System.out.println("Goodbye!");
    }
}

D3(7/3)supermarket

java包的命名

  • POJO:简单无规则 java 对象
  • DAO:数据访问对象
  • Util:工具类

Main

生成UUID

System.out.println (UUID.randomUUID().toString());

DAO

插入一条数据到mysql

public static int addEmp(Connection con, Emp emp){
        int x=0;
        try{
            String sql="insert into emp values (UUID(),?,?,?,0,1,now())";
            PreparedStatement ps=con.prepareStatement(sql);
            ps.setString ( 1, emp.getEmpName()) ;
            ps.setString (  2, emp.getEmpLoginName()) ;
            ps.setString (  3, emp.getEmpLoginPassword()) ;
            x=ps.executeUpdate() ;
        }catch (Exception ex) {
            System. out. println (ex. getMessage()) ;
        }
        return x;
    }

POJO(Entity)

在IDEA右侧的数据库浏览器,选择表直接创建entity

Util

PropertiesUtil 通过key查询db.properties中的数据

DBconnection 创建一个mysql连接

D4(7/6)爬虫

python爬虫:当当网图书封面

相关工具下载

  1. chrome下载chromedriver.exe

    https://chromedriver.storage.googleapis.com/index.html

  2. Firefox 下载Xpath finder

代码和注释

from lxml import etree
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
import urllib
import urllib.request
import time


def savePic(url, bookid):
    h = {
        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36"}
    req = urllib.request.Request(url, headers=h)
    image = urllib.request.urlopen(req).read()
    path = "img/" + str(bookid) + ".png"
    with open(path, 'wb') as f:
        f.write(image)


# 加载chromedriver,设置在后台启动浏览器
chromeOption = Options()
chromeOption.add_argument("--headless")
driver = webdriver.Chrome(
    executable_path=r'C:\Users\MortonWong\Desktop\markdown\实训\chromedriver.exe')  # ,options=chromeOption

# 加载当当网
driver.get('http://book.dangdang.com/')

# 找到搜索框,并传值"python"
driver.find_element_by_id("key_S").send_keys("python")

# 对搜索按钮执行点击事件
driver.find_element_by_class_name("button").click()

# 对搜索结果的每一页进行遍历,获取图书封面

index = 1  # 计数
# 第一页
begin = 1
# 最后一页
end = 10
while begin <= end:
    print("当前是第%d页,共%d页" % (begin, end))
    # 处理网页动态加载,每秒滚一下
    print("开始网页加载")
    i = 500
    while i < 16000:
        js = "var q = document.documentElement.scrollTop=" + str(i)
        # 执行js代码,意思是滚到到某个像素点
        driver.execute_script(js)
        i += 500
        time.sleep(1)  # 一秒
        print("距离顶部像素是%d" % i)
    print("网页加载结束")

    # html转换成xml,才能使用xpath函数来解析元素内容,xpath返回的是列表,如果是单值需要加[0]
    page = etree.HTML(driver.page_source)
    # 获取下一页url
    newurl = "http://search.dangdang.com/" + \
             page.xpath("/html/body/div[3]/div/div[3]/div[1]/div[5]/div[2]/div/ul/li[10]/a/@href")[0]
    print("下一页url:" + newurl)
    # xpath语法:元素的属性加@符号,//代表从任意处开始。/代表从开头开始
    list = page.xpath("//div[@class='con shoplist']/div[@id='search_nature_rg']/ul/li")
    print("这页内容数量:"+len(list))

    for item in list:
        # 从li元素获取图片地址
        url = item.xpath("a[@class='pic']/img/@src")
        # 从图片url保存图片
        savePic(url[0], index)
        index += 1

    # 翻页

    begin += 1
    driver.get(newurl)

把爬取的数据导入mysql(还没看)

D5(7/7)SpringBoot

新建一个maven管理(jar包不需要放在项目文件夹里)的spring项目,使用以下依赖

image-20200712104515006

初始配置

新建一个maven项目之后,pom.xml是项目的配置文件,上面描述所需的jar包

jar包存放在C:/用户/.m2/repository中

加入数据源包

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid</artifactId>
    <version>1.1.5</version>
</dependency>

Druid是一个JDBC组件,它包括三部分:

  • DruidDriver 代理Driver,能够提供基于Filter-Chain模式的插件体系。
  • DruidDataSource 高效可管理的数据库连接池。
  • SQLParser

如果放入了jar包还报红

右键pom.xml -> maven -> reload project

提示 Cannot resolve plugin org.apache.maven.plugins:maven-site-plugin:3.3

把下面的插入pom,然后relow

  <!-- https://mvnrepository.com/artifact/org.apache.maven.plugins/maven-site-plugin -->
<dependency>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-site-plugin</artifactId>
    <version>3.3</version>
</dependency>

配置项目信息

修改src\main\resources\application.properties

#服务器的端口
server.port=9000
#允许调试,能在控制台看到调试信息
debug=true

#数据源
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.password=root
spring.datasource.username=root
spring.datasource.url=jdbc:mysql://localhost/supermaket?useSSL=true&characterEncoding=UTF8&serverTimezone=Asia/Shanghai
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

分层

在java目录,AirlineApplication的同级目录下,建立po、dao、service、controler层

controller是java和前端交互的层级,dao是java和数据库交互的层级

service层是放业务逻辑(流程)的,是面向用户的(这次项目不用这个文件夹)

image-20200715092206008

AirlineApplication.java

添加dao层注解,使dao层可用

image-20200715094205171

用idea数据库连接完成po层

根据D2内容

dao层

在每个dao层文件,添加一段注解,表明是dao层文件都是【组件】

@component 后自动补全

image-20200715092507170

dao层文件的每个接口用 注解+函数名定义 的形式,表示接口。其中Insert内类似的#{empName}是po层属性(需是方法的参数)

image-20200715092834551

此后,dao层大概只代表执行sql语句接口。返回执行条数int值

其它dao层的写法:

image-20200715094849518

image-20200715094849518

dao层参数列表写法:

image-20200715095751293

Param内的代表select中的引用。

多个参数:

image-20200715100404928

controller层

同样用注解形式,表示这个方法是控制器

image-20200715093137830

添加跨域注解

image-20200715102213426

在controller添加所需的dao(注解和dao层对象)

image-20200715093321183

在controller添加实际方法。(注解是匹配路由,第二个注解是ajax当页返回)

image-20200715093822032

controller返回的东西将返回给前端,对象以json形式返回

select写法

image-20200715095012880

返回map的controller层:

image-20200715095448241

D6(7/9)前端

jquery ajax

https://www.runoob.com/jquery/jquery-ajax-intro.html

引入老师的【常用js库】

bootstrap

bootstrap-table

modal

sessionStorage

image-20200715104105583

$.getJSON、treeview

D7(7/10)数据库

数据库密码加密(MD5+BASE64混编,后端util层)

0710_am_01

验证码(前端)

0710_am_02

文件上传下载(后端controller)

0710_am_03

读excel文件(excelUtil)

0710_am_04

0710_pm_01

xml解析

0710_pm_02

D8(7/12)

echart

0712_am_01

服务器连接

0712_am_02

连接服务器

114.116.35.67 root 123qwe@!

配置服务器

//安装java
yum install java

//安装mysql
wget http://repo.mysql.com/mysql-community-release-el6-5.noarch.rpm
rpm -ivh mysql-community-release-el6-5.noarch.rpm
yum install mysql-community-server -y

//设置开机启动
chkconfig mysqld on

//启动mysql
service mysqld start

//初始化配置root的密码
mysql_secure_installation

//登录启动mysql
mysql -u root -p

//停止mysql
service mysqld stop

//进入mysql命令行
use mysql;
update user set host ='%' where user ='root';
select host,user from user where user='root';

//设置屏蔽防火墙
sudo systemctl stop firewalld
sudo systemctl disable firewalld 

D9(7/13)

打包成jar、前端运行

0713_am_01

阿帕奇设置,服务器跑项目

0713_am_02

apache目录在usr/local/tomcat

D10(7/14)

Spring Data Jpa

po层、dao层更简化

航班查询系统

任务分工

黄琛霖

  1. PC Web前端页面(基于vue.js)
  2. 小程序前端(uniapp+HbuilderX)

黄琛霖、彭榕、曹雨阳

  1. java后端项目搭建(dao、po、util、controller代码编写)
  2. 数据库

李泽冰、张津铭

  1. xml和excel文档解析(java的util)
  2. 爬取数据(python)
  3. 美工(设计logo、前端需要的网页图片)

何畅、曹雨阳

  1. 文档(一共三个,开发人员提供项目资料,文档人员根据资料和格式来写)
  2. PPT(只负责ppt的设计、排版,由开发人员提供内容)

开发计划

7月15号

数据库搭建,确定前端做啥界面,后端写啥controller,爬虫爬啥数据,文档写什么东西

7月16~20日

仪表盘

密码加密

7月21日

测试、文档编写、ppt制作

记录

子组件路由变化,父组件的渲染 用updated钩子

航线图

var startPoint = {
    x: 104.114129,
    y: 37.550339
};
// 地图自定义样式
var bmap = {
    center: [startPoint.x, startPoint.y],
    zoom: 5,
    roam: true,
    mapStyle: {
        styleJson: [{
            "featureType": "water",
            "elementType": "all",
            "stylers": {
                "color": "#044161"
            }
        }, {
            "featureType": "land",
            "elementType": "all",
            "stylers": {
                "color": "#004981"
            }
        }, {
            "featureType": "boundary",
            "elementType": "geometry",
            "stylers": {
                "color": "#064f85"
            }
        }, {
            "featureType": "railway",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "highway",
            "elementType": "geometry",
            "stylers": {
                "color": "#004981"
            }
        }, {
            "featureType": "highway",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#005b96",
                "lightness": 1
            }
        }, {
            "featureType": "highway",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
                "color": "#004981"
            }
        }, {
            "featureType": "arterial",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#00508b"
            }
        }, {
            "featureType": "poi",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "green",
            "elementType": "all",
            "stylers": {
                "color": "#056197",
                "visibility": "off"
            }
        }, {
            "featureType": "subway",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "manmade",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "local",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "arterial",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "boundary",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#029fd4"
            }
        }, {
            "featureType": "building",
            "elementType": "all",
            "stylers": {
                "color": "#1a5787"
            }
        }, {
            "featureType": "label",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        }]
    }
}

var geoCoordMap = {
    '上海': [121.4648, 31.2891],
    '东莞': [113.8953, 22.901],
    '东营': [118.7073, 37.5513],
    '中山': [113.4229, 22.478],
    '临汾': [111.4783, 36.1615],
    '临沂': [118.3118, 35.2936],
    '丹东': [124.541, 40.4242],
    '丽水': [119.5642, 28.1854],
    '乌鲁木齐': [87.9236, 43.5883],
    '佛山': [112.8955, 23.1097],
    '保定': [115.0488, 39.0948],
    '兰州': [103.5901, 36.3043],
    '包头': [110.3467, 41.4899],
    '北京': [116.4551, 40.2539],
    '北海': [109.314, 21.6211],
    '南京': [118.8062, 31.9208],
    '南宁': [108.479, 23.1152],
    '南昌': [116.0046, 28.6633],
    '南通': [121.1023, 32.1625],
    '厦门': [118.1689, 24.6478],
    '台州': [121.1353, 28.6688],
    '合肥': [117.29, 32.0581],
    '呼和浩特': [111.4124, 40.4901],
    '咸阳': [108.4131, 34.8706],
    '哈尔滨': [127.9688, 45.368],
    '唐山': [118.4766, 39.6826],
    '嘉兴': [120.9155, 30.6354],
    '大同': [113.7854, 39.8035],
    '大连': [122.2229, 39.4409],
    '天津': [117.4219, 39.4189],
    '太原': [112.3352, 37.9413],
    '威海': [121.9482, 37.1393],
    '宁波': [121.5967, 29.6466],
    '宝鸡': [107.1826, 34.3433],
    '宿迁': [118.5535, 33.7775],
    '常州': [119.4543, 31.5582],
    '广州': [113.5107, 23.2196],
    '廊坊': [116.521, 39.0509],
    '延安': [109.1052, 36.4252],
    '张家口': [115.1477, 40.8527],
    '徐州': [117.5208, 34.3268],
    '德州': [116.6858, 37.2107],
    '惠州': [114.6204, 23.1647],
    '成都': [103.9526, 30.7617],
    '扬州': [119.4653, 32.8162],
    '承德': [117.5757, 41.4075],
    '拉萨': [91.1865, 30.1465],
    '无锡': [120.3442, 31.5527],
    '日照': [119.2786, 35.5023],
    '昆明': [102.9199, 25.4663],
    '杭州': [119.5313, 29.8773],
    '枣庄': [117.323, 34.8926],
    '柳州': [109.3799, 24.9774],
    '株洲': [113.5327, 27.0319],
    '武汉': [114.3896, 30.6628],
    '汕头': [117.1692, 23.3405],
    '江门': [112.6318, 22.1484],
    '沈阳': [123.1238, 42.1216],
    '沧州': [116.8286, 38.2104],
    '河源': [114.917, 23.9722],
    '泉州': [118.3228, 25.1147],
    '泰安': [117.0264, 36.0516],
    '泰州': [120.0586, 32.5525],
    '济南': [117.1582, 36.8701],
    '济宁': [116.8286, 35.3375],
    '海口': [110.3893, 19.8516],
    '淄博': [118.0371, 36.6064],
    '淮安': [118.927, 33.4039],
    '深圳': [114.5435, 22.5439],
    '清远': [112.9175, 24.3292],
    '温州': [120.498, 27.8119],
    '渭南': [109.7864, 35.0299],
    '湖州': [119.8608, 30.7782],
    '湘潭': [112.5439, 27.7075],
    '滨州': [117.8174, 37.4963],
    '潍坊': [119.0918, 36.524],
    '烟台': [120.7397, 37.5128],
    '玉溪': [101.9312, 23.8898],
    '珠海': [113.7305, 22.1155],
    '盐城': [120.2234, 33.5577],
    '盘锦': [121.9482, 41.0449],
    '石家庄': [114.4995, 38.1006],
    '福州': [119.4543, 25.9222],
    '秦皇岛': [119.2126, 40.0232],
    '绍兴': [120.564, 29.7565],
    '聊城': [115.9167, 36.4032],
    '肇庆': [112.1265, 23.5822],
    '舟山': [122.2559, 30.2234],
    '苏州': [120.6519, 31.3989],
    '莱芜': [117.6526, 36.2714],
    '菏泽': [115.6201, 35.2057],
    '营口': [122.4316, 40.4297],
    '葫芦岛': [120.1575, 40.578],
    '衡水': [115.8838, 37.7161],
    '衢州': [118.6853, 28.8666],
    '西宁': [101.4038, 36.8207],
    '西安': [109.1162, 34.2004],
    '贵阳': [106.6992, 26.7682],
    '连云港': [119.1248, 34.552],
    '邢台': [114.8071, 37.2821],
    '邯郸': [114.4775, 36.535],
    '郑州': [113.4668, 34.6234],
    '鄂尔多斯': [108.9734, 39.2487],
    '重庆': [107.7539, 30.1904],
    '金华': [120.0037, 29.1028],
    '铜川': [109.0393, 35.1947],
    '银川': [106.3586, 38.1775],
    '镇江': [119.4763, 31.9702],
    '长春': [125.8154, 44.2584],
    '长沙': [113.0823, 28.2568],
    '长治': [112.8625, 36.4746],
    '阳泉': [113.4778, 38.0951],
    '青岛': [120.4651, 36.3373],
    '韶关': [113.7964, 24.7028]
};

var BJData = [
    [{
        name: '北京'
    }, {
        name: '上海',
        value: 95
    }],
    [{
        name: '北京'
    }, {
        name: '广州',
        value: 90
    }],
    [{
        name: '北京'
    }, {
        name: '大连',
        value: 80
    }],
    [{
        name: '北京'
    }, {
        name: '南宁',
        value: 70
    }],
    [{
        name: '北京'
    }, {
        name: '南昌',
        value: 60
    }],
    [{
        name: '北京'
    }, {
        name: '拉萨',
        value: 50
    }],
    [{
        name: '北京'
    }, {
        name: '长春',
        value: 40
    }],
    [{
        name: '北京'
    }, {
        name: '包头',
        value: 30
    }],
    [{
        name: '北京'
    }, {
        name: '重庆',
        value: 20
    }],
    [{
        name: '北京'
    }, {
        name: '常州',
        value: 10
    }]
];

var SHData = [
    [{
        name: '上海'
    }, {
        name: '包头',
        value: 95
    }],
    [{
        name: '上海'
    }, {
        name: '昆明',
        value: 90
    }],
    [{
        name: '上海'
    }, {
        name: '广州',
        value: 80
    }],
    [{
        name: '上海'
    }, {
        name: '郑州',
        value: 70
    }],
    [{
        name: '上海'
    }, {
        name: '长春',
        value: 60
    }],
    [{
        name: '上海'
    }, {
        name: '重庆',
        value: 50
    }],
    [{
        name: '上海'
    }, {
        name: '长沙',
        value: 40
    }],
    [{
        name: '上海'
    }, {
        name: '北京',
        value: 30
    }],
    [{
        name: '上海'
    }, {
        name: '丹东',
        value: 20
    }],
    [{
        name: '上海'
    }, {
        name: '大连',
        value: 10
    }]
];

var GZData = [
    [{
        name: '广州'
    }, {
        name: '福州',
        value: 95
    }],
    [{
        name: '广州'
    }, {
        name: '太原',
        value: 90
    }],
    [{
        name: '广州'
    }, {
        name: '长春',
        value: 80
    }],
    [{
        name: '广州'
    }, {
        name: '重庆',
        value: 70
    }],
    [{
        name: '广州'
    }, {
        name: '西安',
        value: 60
    }],
    [{
        name: '广州'
    }, {
        name: '成都',
        value: 50
    }],
    [{
        name: '广州'
    }, {
        name: '常州',
        value: 40
    }],
    [{
        name: '广州'
    }, {
        name: '北京',
        value: 30
    }],
    [{
        name: '广州'
    }, {
        name: '北海',
        value: 20
    }],
    [{
        name: '广州'
    }, {
        name: '海口',
        value: 10
    }]
];

var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

var convertData = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[0].name];
        var toCoord = geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
            res.push({
                fromName: dataItem[0].name,
                toName: dataItem[1].name,
                coords: [fromCoord, toCoord]
            });
        }
    }
    return res;
};

var color = ['#a6c84c', '#ffa022', '#46bee9'];
var series = [];
[
    ['北京', BJData],
    ['上海', SHData],
    ['广州', GZData]
].forEach(function(item, i) {
    series.push({
        name: item[0] + ' Top10',
        type: 'effectScatter',
        coordinateSystem: 'bmap',
        zlevel: 2,
        rippleEffect: {
            brushType: 'stroke'
        },
        label: {
            normal: {
                show: true,
                position: 'right',
                formatter: '{b}'
            }
        },
        symbolSize: function(val) {
            return val[2] / 4;
        },
        showEffectOn: 'render',
        itemStyle: {
            normal: {
                color: color[i]
            }
        },
        data: [{
            name: item[0],
            value: geoCoordMap[item[0]].concat([100])
        }]
    }, {
        name: item[0] + ' Top10',
        type: 'lines',
        coordinateSystem: 'bmap',
        zlevel: 1,
        effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: '#fff',
            symbolSize: 3
        },
        lineStyle: {
            normal: {
                color: color[i],
                width: 0,
                curveness: 0.2
            }
        },
        data: convertData(item[1])
    }, {
        name: item[0] + ' Top10',
        type: 'lines',
        coordinateSystem: 'bmap',
        zlevel: 2,
        effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: planePath,
            symbolSize: 15
        },
        lineStyle: {
            normal: {
                color: color[i],
                width: 1,
                opacity: 0.4,
                curveness: 0.2
            }
        },
        data: convertData(item[1])
    }, {
        name: item[0] + ' Top10',
        type: 'effectScatter',
        coordinateSystem: 'bmap',
        zlevel: 2,
        rippleEffect: {
            brushType: 'stroke'
        },
        label: {
            normal: {
                show: true,
                position: 'right',
                formatter: '{b}'
            }
        },
        symbolSize: function(val) {
            return val[2] / 4;
        },
        showEffectOn: 'render',
        itemStyle: {
            normal: {
                color: color[i]
            }
        },
        data: item[1].map(function(dataItem) {
            return {
                name: dataItem[1].name,
                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
            };
        })
    });
});

var option = {
    bmap: bmap,
    color: ['gold', 'aqua', 'lime'],
    title: {
        text: '天津机场出发航线图',
        subtext: 'data-visual.cn',
        sublink:'http://data-visual.cn',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        top: 'bottom',
        left: 'right',
        data: ['北京 Top10', '上海 Top10', '广州 Top10'],
        textStyle: {
            color: '#fff'
        },
        selectedMode: 'single'
    },
    series: series
};