• 第二阶段总结


    WEB端代码简单展示:

    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- JQ、Bootstrap -->
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <script
    src="https://hm.baidu.com/hm.js?eaa57ca47dacb4ad4f5a257001a3457c"></script>
    <script src="static/js/jquery.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="static/css/index2.css">
    <script src="static/js/echarts.min.js"></script>
    <script src="static/js/world.js"></script>
    <script>
    var formaDate = function() {
    var d = new Date()
    var year = d.getFullYear(), //多变量赋值
    month = d.getMonth() + 1, //month:从0开始
    date = d.getDate(),
    hour = d.getHours(),
    minute = d.getMinutes(),
    second = d.getSeconds();
    year = year < 10 ? '0' + year : year; //三元操作符
    month = month < 10 ? '0' + month : month;
    date = date < 10 ? '0' + date : date;
    hour = hour < 10 ? '0' + hour : hour;
    minute = minute < 10 ? '0' + minute : minute;
    second = second < 10 ? '0' + second : second;
    var a = year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
    $('.showTime').html("<p>"+a+"</p>");
    window.addEventListener("resize", () => {
    var w = document.documentElement.clientWidth;
    var ST = document.getElementById('ST');
    if (w < 720) {
    ST.style.display = 'none'
    } else {
    ST.style.display = 'block'
    }
    });
    }
    setInterval(formaDate, 1000)
    //各州累计确诊分布模块
    $(function() {
    var myChart = echarts.init(document.querySelector(".bar .chart"));
    //指定配置项和数据
    var option = {
    legend: {
    top: 'bottom'
    },
    title: {
    show: true,
    x: 'center'
    },
    color: ['#37a2da', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#8378ea', '#00d887'],
    tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    toolbox: {
    show: true,
    feature: {
    mark: {show: true},
    dataView: {show: true, readOnly: false},
    restore: {show: true},
    saveAsImage: {show: true}
    }
    },
    series: [{
    name: '累计确诊',
    type: 'pie',
    radius: [20, 70],
    center: ['50%', '50%'],
    roseType: 'radius',
    label: {
    show: true
    },
    emphasis: {
    label: {
    show: true
    }
    }
    }]
    };
    //配置项设置给ECarts实例对象
    myChart.setOption(option);
    var count = [];
    $.ajax({
    url: 'https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=FAutoGlobalStatis,FAutoContinentStatis,FAutoGlobalDailyList,FAutoCountryConfirmAdd',
    type: 'get',
    // data: {},
    dataType: 'json',
    success: function(data) {
    var a = data.data.FAutoContinentStatis.length - 1
    var contines = data.data.FAutoContinentStatis[a].statis
    var con = Object.keys(contines)
    var sum = Object.values(contines)
    for (var i = 0; i < con.length; i++) {
    count.push({ value: sum[i], name: con[i] })
    }
    myChart.setOption({
    series: [{
    data: count
    }]
    })
    }
    })

    window.addEventListener('resize', function() {
    myChart.resize();
    })
    });
    // 全球疫情确诊图模块
    $(function() {
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.querySelector(".bar1 .chart"));
    option = {
    title: {

    subtext: '前15个国家',
    left: 'center'
    },
    dataset: {
    source: [
    ['Country', 'Confirmed']
    ]
    },
    tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{c} ({d}%)'
    },

    series: [{
    name: '确诊人数',
    type: 'pie',
    clockWise: false,
    radius: [30, 460],
    center: ['73%', '80%'],
    roseType: 'area',
    encode: {
    itemName: 'Country',
    value: 'Confirmed'
    },
    itemStyle: {
    normal: {
    color: function(params) {
    var colorList = [
    "#a71a4f", "#c71b1b", "#d93824", "#e7741b", "#dc9e31", "#d2b130", "#8cc13f", "#53b440", "#48af54", "#479c7f", "#48a698", "#57868c"
    ];
    return colorList[params.dataIndex]
    },
    label: {
    position: 'inside',
    textStyle: {
    fontWeight: 'bold',
    fontFamily: 'Microsoft YaHei',
    color: '#FAFAFA',
    fontSize: 10
    },
    formatter: function(params) {
    if (params.data[1] > 9000) { return params.data[0] } else { return ""; }
    }
    }
    }
    }
    }
    ]
    };
    myChart.setOption(option);
    var virus = [
    ['Country', 'Confirmed']
    ]
    $.ajax({
    url: 'https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist',
    type: 'get',

    dataType: 'json',
    success: function(data) {
    var num = data.data
    for (var i = 0; i < 15; i++) {
    virus.push([num[i].name, num[i].confirm])
    }
    // myChart.hideLoading()
    //必须在这里在设置一遍,这里涉及到的问题不太懂,只知道如不再设置,而在ajax外赋值是没有作用的
    myChart.setOption({ //加载数据图表
    dataset: {
    source: virus
    }
    })
    }
    })
    window.addEventListener("resize", function() {
    myChart.resize();
    });
    });
    //确诊趋势模块
    $(function() {
    var myChart = echarts.init(document.querySelector('.line .chart'))
    var option = {
    tooltip: {
    trigger: 'axis',
    },
    //图例
    legend: {
    top: "0%",
    //图例字体样式
    textStyle: {
    color: "rgba(255,255,255,.5)",
    fontSize: "12"
    }
    },
    // 坐标系
    grid: {
    top: '20%',
    left: '16.5%',
    right: '1%',
    bottom: '10%',
    containLabel: false, //grid 区域是否包含坐标轴的刻度标签
    },
    xAxis: [{
    type: 'category',
    boundaryGap: true,
    // data: ['二月', '三月', '四月', '五月', '六月'],
    // 文本颜色为rgba(255,255,255,.6) 文字大小为 12
    axisLabel: {
    textStyle: {
    color: "rgba(255,255,255,.6)",
    fontSize: 12
    }
    },
    // x轴线的颜色为 rgba(255,255,255,.2)
    axisLine: {
    lineStyle: {
    color: "rgba(255,255,255,.2)"
    }
    },
    }],
    yAxis: [{
    type: 'value',
    //隐藏坐标轴刻度
    axisTick: { show: false },
    //标注y轴线样式
    axisLine: {
    lineStyle: {
    color: "rgba(255,255,255,.1)"
    }
    },
    //标注文本
    axisLabel: {
    textStyle: {
    color: "rgba(255,255,255,.6)",
    fontSize: 8
    }
    },
    // 修改分割线的颜色
    splitLine: {
    lineStyle: {
    color: "rgba(255,255,255,.1)"
    }
    }
    }],
    //主题样式设计
    series: [{
    name: '累计确诊',
    type: 'line',
    smooth: true,
    // 单独修改线的样式
    lineStyle: {
    color: "red",
    2
    },
    //开始不显示坐标圆点
    showSymbol: false,
    },
    {
    // 开始不显示拐点, 鼠标经过显示
    showSymbol: false,
    name: "累计死亡",
    type: "line",
    smooth: true,
    lineStyle: {
    normal: {
    color: "white",
    2
    }
    },
    areaStyle: {
    normal: {
    color: new echarts.graphic.LinearGradient(
    0,
    0,
    0,
    1,
    [{
    offset: 0,
    color: "rgba(0, 216, 135, 0.4)"
    },
    {
    offset: 0.8,
    color: "rgba(0, 216, 135, 0.1)"
    }
    ],
    false
    ),
    shadowColor: "rgba(0, 0, 0, 0.1)"
    }
    },

    // 开始不显示拐点, 鼠标经过显示
    showSymbol: false,

    }
    ]
    };
    // 把配置和数据给实例对象
    myChart.setOption(option);
    var count = []
    var count1 = []
    var date = []
    $.ajax({
    url: 'https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=FAutoGlobalStatis,FAutoContinentStatis,FAutoGlobalDailyList,FAutoCountryConfirmAdd',
    type: 'get',

    dataType: 'json',
    success: function(data) {
    var qushi = data.data.FAutoGlobalDailyList
    for (var i = 0; i < qushi.length; i++) {
    count.push(qushi[i].all.confirm)
    count1.push(qushi[i].all.dead)
    date.push(qushi[i].date)
    }
    myChart.setOption({
    series: [{
    data: count
    }, {
    data: count1
    }],
    xAxis: [{
    data: date
    }]
    })
    }
    })
    window.addEventListener('resize', function() {
    myChart.resize()
    })
    });
    //地图模块
    $(function() {
    var myChart = echarts.init(document.querySelector('.map .chart'))
    var nameMap = {
    "Canada": "加拿大",
    "Turkmenistan": "土库曼斯坦",
    "Saint Helena": "圣赫勒拿",
    "Lao PDR": "老挝",
    "Lithuania": "立陶宛",
    "Cambodia": "柬埔寨",
    "Ethiopia": "埃塞俄比亚",
    "Faeroe Is.": "法罗群岛",
    "Swaziland": "斯威士兰",
    "Palestine": "巴勒斯坦",
    "Belize": "伯利兹",
    "Argentina": "阿根廷",
    "Bolivia": "玻利维亚",
    "Cameroon": "喀麦隆",
    "Burkina Faso": "布基纳法索",
    "Aland": "奥兰群岛",
    "Bahrain": "巴林",
    "Saudi Arabia": "沙特阿拉伯",
    "Fr. Polynesia": "法属波利尼西亚",
    "Cape Verde": "佛得角",
    "W. Sahara": "西撒哈拉",
    "Slovenia": "斯洛文尼亚",
    "Guatemala": "危地马拉",
    "Guinea": "几内亚",
    "Dem. Rep. Congo": "刚果(金)",
    "Germany": "德国",
    "Spain": "西班牙",
    "Liberia": "利比里亚",
    "Netherlands": "荷兰",
    "Jamaica": "牙买加",
    "Solomon Is.": "所罗门群岛",
    "Oman": "阿曼",
    "Tanzania": "坦桑尼亚",
    "Costa Rica": "哥斯达黎加",
    "Isle of Man": "曼岛",
    "Gabon": "加蓬",
    "Niue": "纽埃",
    "Bahamas": "巴哈马",
    "New Zealand": "新西兰",
    "Yemen": "也门",
    "Jersey": "泽西岛",
    "Pakistan": "巴基斯坦",
    "Albania": "阿尔巴尼亚",
    "Samoa": "萨摩亚",
    "Czech Rep.": "捷克",
    "United Arab Emirates": "阿拉伯联合酋长国",
    "Guam": "关岛",
    "India": "印度",
    "Azerbaijan": "阿塞拜疆",
    "N. Mariana Is.": "北马里亚纳群岛",
    "Lesotho": "莱索托",
    "Kenya": "肯尼亚",
    "Belarus": "白俄罗斯",
    "Tajikistan": "塔吉克斯坦",
    "Turkey": "土耳其",
    "Afghanistan": "阿富汗",
    "Bangladesh": "孟加拉国",
    "Mauritania": "毛里塔尼亚",
    "Dem. Rep. Korea": "朝鲜",
    "Saint Lucia": "圣卢西亚",
    "Br. Indian Ocean Ter.": "英属印度洋领地",
    "Mongolia": "蒙古",
    "France": "法国",
    "Cura?ao": "库拉索岛",
    "S. Sudan": "南苏丹",
    "Rwanda": "卢旺达",
    "Slovakia": "斯洛伐克",
    "Somalia": "索马里",
    "Peru": "秘鲁",
    "Vanuatu": "瓦努阿图",
    "Norway": "挪威",
    "Malawi": "马拉维",
    "Benin": "贝宁",
    "St. Vin. and Gren.": "圣文森特和格林纳丁斯",
    "Korea": "韩国",
    "Singapore": "新加坡",
    "Montenegro": "黑山共和国",
    "Cayman Is.": "开曼群岛",
    "Togo": "多哥",
    "China": "中国",
    "Heard I. and McDonald Is.": "赫德岛和麦克唐纳群岛",
    "Armenia": "亚美尼亚",
    "Falkland Is.": "马尔维纳斯群岛(福克兰)",
    "Ukraine": "乌克兰",
    "Ghana": "加纳",
    "Tonga": "汤加",
    "Finland": "芬兰",
    "Libya": "利比亚",
    "Dominican Rep.": "多米尼加",
    "Indonesia": "印度尼西亚",
    "Mauritius": "毛里求斯",
    "Eq. Guinea": "赤道几内亚",
    "Sweden": "瑞典",
    "Vietnam": "越南",
    "Mali": "马里",
    "Russia": "俄罗斯",
    "Bulgaria": "保加利亚",
    "United States": "美国",
    "Romania": "罗马尼亚",
    "Angola": "安哥拉",
    "Chad": "乍得",
    "South Africa": "南非",
    "Fiji": "斐济",
    "Liechtenstein": "列支敦士登",
    "Malaysia": "马来西亚",
    "Austria": "奥地利",
    "Mozambique": "莫桑比克",
    "Uganda": "乌干达",
    "Japan": "日本本土",
    "Niger": "尼日尔",
    "Brazil": "巴西",
    "Kuwait": "科威特",
    "Panama": "巴拿马",
    "Guyana": "圭亚那",
    "Madagascar": "马达加斯加",
    "Luxembourg": "卢森堡",
    "American Samoa": "美属萨摩亚",
    "Andorra": "安道尔",
    "Ireland": "爱尔兰",
    "Italy": "意大利",
    "Nigeria": "尼日利亚",
    "Turks and Caicos Is.": "特克斯和凯科斯群岛",
    "Ecuador": "厄瓜多尔",
    "U.S. Virgin Is.": "美属维尔京群岛",
    "Brunei": "文莱",
    "Australia": "澳大利亚",
    "Iran": "伊朗",
    "Algeria": "阿尔及利亚",
    "El Salvador": "萨尔瓦多",
    "C?te d'Ivoire": "科特迪瓦",
    "Chile": "智利",
    "Puerto Rico": "波多黎各",
    "Belgium": "比利时",
    "Thailand": "泰国",
    "Haiti": "海地",
    "Iraq": "伊拉克",
    "S?o Tomé and Principe": "圣多美和普林西比",
    "Sierra Leone": "塞拉利昂",
    "Georgia": "格鲁吉亚",
    "Denmark": "丹麦",
    "Philippines": "菲律宾",
    "S. Geo. and S. Sandw. Is.": "南乔治亚岛和南桑威奇群岛",
    "Moldova": "摩尔多瓦",
    "Morocco": "摩洛哥",
    "Namibia": "纳米比亚",
    "Malta": "马耳他",
    "Guinea-Bissau": "几内亚比绍",
    "Kiribati": "基里巴斯",
    "Switzerland": "瑞士",
    "Grenada": "格林纳达",
    "Seychelles": "塞舌尔",
    "Portugal": "葡萄牙",
    "Estonia": "爱沙尼亚",
    "Uruguay": "乌拉圭",
    "Antigua and Barb.": "安提瓜和巴布达",
    "Lebanon": "黎巴嫩",
    "Uzbekistan": "乌兹别克斯坦",
    "Tunisia": "突尼斯",
    "Djibouti": "吉布提",
    "Greenland": "丹麦",
    "Timor-Leste": "东帝汶",
    "Dominica": "多米尼克",
    "Colombia": "哥伦比亚",
    "Burundi": "布隆迪",
    "Bosnia and Herz.": "波斯尼亚和黑塞哥维那",
    "Cyprus": "塞浦路斯",
    "Barbados": "巴巴多斯",
    "Qatar": "卡塔尔",
    "Palau": "帕劳",
    "Bhutan": "不丹",
    "Sudan": "苏丹",
    "Nepal": "尼泊尔",
    "Micronesia": "密克罗尼西亚",
    "Bermuda": "百慕大",
    "Suriname": "苏里南",
    "Venezuela": "委内瑞拉",
    "Israel": "以色列",
    "St. Pierre and Miquelon": "圣皮埃尔和密克隆群岛",
    "Central African Rep.": "中非",
    "Iceland": "冰岛",
    "Zambia": "赞比亚",
    "Senegal": "塞内加尔",
    "Papua New Guinea": "巴布亚新几内亚",
    "Trinidad and Tobago": "特立尼达和多巴哥",
    "Zimbabwe": "津巴布韦",
    "Jordan": "约旦",
    "Gambia": "冈比亚",
    "Kazakhstan": "哈萨克斯坦",
    "Poland": "波兰",
    "Eritrea": "厄立特里亚",
    "Kyrgyzstan": "吉尔吉斯斯坦",
    "Montserrat": "蒙特塞拉特",
    "New Caledonia": "新喀里多尼亚",
    "Macedonia": "马其顿",
    "Paraguay": "巴拉圭",
    "Latvia": "拉脱维亚",
    "Hungary": "匈牙利",
    "Syria": "叙利亚",
    "Honduras": "洪都拉斯",
    "Myanmar": "缅甸",
    "Mexico": "墨西哥",
    "Egypt": "埃及",
    "Nicaragua": "尼加拉瓜",
    "Cuba": "古巴",
    "Serbia": "塞尔维亚",
    "Comoros": "科摩罗",
    "United Kingdom": "英国",
    "Fr. S. Antarctic Lands": "南极洲",
    "Congo": "刚果(布)",
    "Greece": "希腊",
    "Sri Lanka": "斯里兰卡",
    "Croatia": "克罗地亚",
    "Botswana": "博茨瓦纳",
    "Siachen Glacier": "锡亚琴冰川地区"
    }
    var option = {
    title: {
    text: '全球各国确诊情况',
    subtext: '世界地图',
    left: 'center',
    textStyle: {
    color: 'white'
    },
    top: 'top'
    },
    tooltip: {
    trigger: 'item',
    formatter: function(params) {
    var value = params.value + '';
    return params.seriesName + '<br/>' + params.name + ' : ' + value + '人';
    }
    },
    visualMap: {
    dimension: 0,
    pieces: [
    { gt: 1000000,label: '>1000000', color: '#4D0000'},
    { gt: 500000,lte:1000000,label: '500001-1000000', color: '#BF0060' },
    { gt: 9999, lte: 500000,label: '10000-500000', color: 'purple' },
    { gte: 1000, lte: 9999, label: '1000-9999', color: 'red' },
    { gt: 99, lte: 999, label: '100-999', color: 'yellow' },
    { gte: 10, lte: 99, label: '10-99', color: 'orange' },
    { gt: 0, lte: 9, label: '<10', color: 'pink' },
    { value: 0, color: "#ccff99", label: "0" }
    ]
    },
    series: [{
    name: '累计确诊人数',
    type: 'map',
    mapType: 'world',
    roam: true,
    itemStyle: {
    normal: {
    areaColor: '#fce8d5',
    borderColor: 'rgb(0,108,255)',
    },
    emphasis: {
    label: {
    show: true,
    color: 'black'
    },
    areaColor: '#fce8d5'
    }
    },
    nameMap: nameMap
    }]
    };
    myChart.setOption(option);
    var virus = []
    $.ajax({
    url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5',
    type: 'get',
    dataType: 'jsonp',
    success: function(data) {
    var res = data.data || "";
    res = JSON.parse(res).chinaTotal.confirm;
    virus.push({ name: '中国', value: res })
    myChart.setOption({
    series: [{
    data: virus
    }]
    })
    }
    });
    $.ajax({
    url: 'https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist',
    type: 'get',
    dataType: 'json',
    success: function(data) {
    var num = data.data
    var sum = 0
    for (var i = 0; i < num.length; i++) {
    virus.push({ name: num[i].name, value: num[i].confirm })
    sum += num[i].confirm
    }
    myChart.setOption({
    series: [{
    data: virus
    }]
    })
    }
    })
    window.addEventListener('resize', function() {
    myChart.resize()
    })
    });
    let res1, res2
    $.ajax({
    url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5',
    type: 'get',
    dataType: 'jsonp',
    })
    .then((data) => {
    var res = data.data || "";
    res1 = JSON.parse(res).chinaTotal.confirm;
    res2 = JSON.parse(res).chinaTotal.heal;
    return $.ajax({
    url: 'https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=FAutoGlobalStatis,FAutoContinentStatis,FAutoGlobalDailyList,FAutoCountryConfirmAdd',
    type: 'get',
    // data: {},
    dataType: 'json',
    })
    })
    .then((data) => {
    // console.log(data)
    let sum = data.data.FAutoGlobalStatis.confirm + res1
    let cureSum = data.data.FAutoGlobalStatis.heal + res2
    $(".no-hd li:first").text(sum)
    $(".no-hd li:nth-child(2)").text(cureSum)
    })
    </script>
    </head>
    <body class="bod">
    <header>
    <div class="index"></div>
    <h1>全球疫情情况展示</h1>
    <div class="showTime" id="ST">
    <p></p>
    </div>
    </header>
    <div class="container mainbox">
    <div class="row">
    <!-- 左模块 -->
    <div class="col-lg-3 col-md-5 a">
    <div class="panel bl bar">
    <h2>各洲累计确诊分布</h2>
    <div class="chart"
    style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
    <div
    style="position: relative; 318px; height: 250px; padding: 0px; margin: 0px; border- 0px;">
    <canvas data-zr-dom-id="zr_0" width="397" height="312"
    style="position: absolute; left: 0px; top: 0px; 318px; height: 250px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border- 0px;"></canvas>
    </div>
    <div></div>
    </div>
    <div class="panelFooter"></div>
    </div>
    <div class="panel bl line">
    <h2>全球疫情趋势</h2>
    <div class="chart"
    style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
    <div
    style="position: relative; 318px; height: 250px; padding: 0px; margin: 0px; border- 0px;">
    <canvas data-zr-dom-id="zr_0" width="397" height="312"
    style="position: absolute; left: 0px; top: 0px; 318px; height: 250px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border- 0px;"></canvas>
    </div>

    </div>
    <div class="panelFooter"></div>
    </div>
    </div>
    <!-- 中间模块 -->
    <div class="col-lg-6 order-lg-1 b order-md-2">
    <!-- 上模块 -->
    <div class="no">
    <div class="no-hd">
    <ul>
    <li></li>
    <li></li>
    </ul>
    </div>
    <div class="no-bd">
    <ul>
    <li class="text-white">累计确诊人数</li>
    <li class="text-white">累计治愈人数</li>
    </ul>
    </div>
    </div>
    <!-- 地图模块 -->
    <div class="map">
    <div class="chart" id="viewDiv"
    style="-webkit-tap-highlight-color: transparent; user-select: none;">
    <div
    style="position: relative; 728px; height: 542px; padding: 0px; margin: 0px; border- 0px; cursor: default;">
    <canvas data-zr-dom-id="zr_0" width="910" height="677"
    style="position: absolute; left: 0px; top: 0px; 728px; height: 542px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border- 0px;"></canvas>
    </div>
    <div
    style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border- 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px&amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; quot; Microsoft YaHei&amp;amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; quot;; padding: 5px; left: 294px; top: 153px; pointer-events: none;">
    累计确诊人数<br>
    </div>
    </div>
    <div class="panelFooter"></div>
    </div>
    </div>
    <!-- 右边模块 -->
    <div class="col-lg-3 order-lg-2 c col-md-7 order-md-1">
    <div class="panel bl bar1">
    <h2>全球疫情模块</h2>

    <div class="chart"
    style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
    <div
    style="position: relative; 318px; height: 636px; padding: 0px; margin: 0px; border- 0px;">
    <canvas data-zr-dom-id="zr_0" width="397" height="795"
    style="position: absolute; left: 0px; top: 0px; 318px; height: 636px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border- 0px;"></canvas>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    预估时间记录日志:

    PSP2.1阶段时间
    Planning 计划 1day
    - Estimate 估计这个任务需要多少时间 1week
    Development 开发  2day
    - Analysis 需求分析 1h
    - Coding Standard 代码规范 20min
    - Design 具体设计 2day
    - Coding 具体编码 2day
    - Test 测试
    - Count 总计 6day

    实际时间记录日志:

    PSP2.1阶段时间
    Development 开发  3day
    - Analysis 需求分析 30min
    - Coding Standard 代码规范 20min
    - Design 具体设计 2day
    - Coding 具体编码 1day
    - Test 测试
    - Count 总计 3day

     

    总结:

    本次作业是世界疫情地图的第二阶段,主要是web端和手机端的系统开发,总的来说,现在我的web差不多要搞定了,当然只是差不多而已,事实上我还差地图与表格的联动,表格方面,多条件查询包括了时间查询和地点查询并且界面样式采用了bootstrap来美化,并且表格用了datatables来封装,手机端方面现在还没开始做,但是我想只做个简单的查询系统,可以查询任一时间和任意地点的简单系统,总的来说,现在自己在学ssm框架以及今后要学vue前端框架,当然还有各种有用的插件,比如说bootstraptables以及bootstrap风格的ztree插件,这些都是我今后要学的目标。所以,今后继续努力,做完团队作业之后就开始学习其他新东西。

  • 相关阅读:
    c#操作Excel时,抛出异常:“未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序”
    设计模式(二)(Factory method)工厂方法设计模式
    设计模式(一)Singlton
    oracle中merge的用法,以及各版本的区别 Create
    rowid去重(删除表的重复记录)
    Oracle 12C 新特性之 恢复表
    Oracle 12C 新特性之 sqlplus查看History命令
    Oracle 12C 新特性之 PDB热克隆(本地克隆、远端异机克隆)
    Oracle 12C 新特性之 db默认字符集AL32UTF8、PDB支持不同字符集
    Oracle 12C 新特性之表分区部分索引(Partial Indexes)
  • 原文地址:https://www.cnblogs.com/yitiaokuailedexiaojingyu/p/14611657.html
Copyright © 2020-2023  润新知