每日日报2021.5.31

今天完成内容：

学习web

 疫情可视化数据爬取

// 国外数据
var foreignData = null;
// 国内数据
var chinaData = null;
$.when($.ajax({
    url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
    dataType: "jsonp",
    success: function (data) {
        foreignData = JSON.parse(data.data);
    }
}), $.ajax({
    url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5",
    dataType: "jsonp",
    success: function (data) {
        chinaData = JSON.parse(data.data);
    }
})).then(function () {
    // 更新标题
    title();
    // 注入总览数据
    brief();
    // 世界疫情地图
    map();
    // 海外疫情趋势
    tendency();
    // 昨日新增确诊国家Top10
    top10();
})
// 标题
function title() {
    $(".brief .brief_header p").text("更新时间 - " + foreignData.globalStatis.lastUpdateTime)
}
// 注入总览数据
function brief() {
    // 拼接字符串
    var htmlStr = `
            <li class="allConfirm">
                <div class="number">${foreignData.globalStatis.confirm}</div>
                <div class="item">累计确诊</div>
                <div class="change"><span>昨日</span><b>+71180</b></div>
            </li>
            <li class="nowConfirm">
                <div class="number">${foreignData.globalStatis.nowConfirm}</div>
                <div class="item">现有确诊</div>
                <div class="change"><span>昨日</span><b>+28919</b></div>
            </li>
            <li class="deadNum">
                <div class="number">${foreignData.globalStatis.dead}</div>
                <div class="item">死亡人数</div>
                <div class="change"><span>昨日</span><b>+3752</b></div>
            </li>
            <li class="cureNum">
                <div class="number">${foreignData.globalStatis.heal}</div>
                <div class="item">治愈人数</div>
                <div class="czhange"><span>昨日</span><b>+38509</b></div>
            </li>
        `;
    // 设置字符串为HTML内容
    $(".brief_body").html(htmlStr);
}
// 世界疫情地图
function map() {
    // 创建变量保存目标数据
    var virusDatas = [];
    // 遍历数据，获取目标信息
    $.each(foreignData.foreignList, function (i, v) {
        virusDatas[i] = {};
        virusDatas[i].name = v.name;
        virusDatas[i].value = v.confirm;
    })
    // 加入中国数据插入到最后位置
    virusDatas.push({
        name: "中国",
        value: chinaData.chinaTotal.confirm
    });
    // 绘制图表
    // 1、初始化echarts实例
    var myChart = echarts.init(document.querySelector(".brief .map_info"));
    // 2、设置配置项
    var option = {
        // 设置提示信息
        tooltip: {
            // 设置提示信息触发源
            trigger: 'item',
            // 设置提示信息格式
            formatter: function (params) {
                return params.name + " : " + (params.value ? params.value : 0);
            }
        },
        // 视觉映射组件
        visualMap: {
            // 设置映射类型：piecewise分段型、continuous连续性
            type: 'piecewise',
            pieces: [
                { max: 0, label: '0', color: '#eee' },
                { min: 1, max: 499, label: '1-499', color: '#fff7ba' },
                { min: 500, max: 4999, label: '500-4999', color: '#ffc24b' },
                { min: 5000, max: 9999, label: '5000-9999', color: '#ff7c20' },
                { min: 10000, max: 100000, label: '1万-10万', color: '#fe5e3b' },
                { min: 100000, max: 500000, label: '10万-50万', color: '#e2482b' },
                { min: 500000, label: '50万以上', color: '#b93e26' },
            ],
            itemHeight: 10,
            itemWidth: 10,
            inverse: true,
        },
        // 系列列表
        series: [{
            // 数据名称
            name: '',
            // 设置数据
            data: virusDatas,
            // 绘制的图表类型
            type: 'map',
            // 指定地图名称
            mapType: 'world',
            // 地区名称映射
            nameMap: nameMap,
            // 图表所绘制区域样式
            itemStyle: {
                emphasis: {
                    areaColor: '#c9ffff',
                    label: {
                        show: false
                    }
                }
            },
            // 设置位置：保持地图高宽比的情况下把地图放在容器的正中间
            layoutCenter: ['center', 'center'],
            // 地图缩放
            layoutSize: "180%",
        }]
    };
    myChart.setOption(option);
    $(".brief .map_tab span").eq(0).click(function () { fn("confirm") });
    $(".brief .map_tab span").eq(1).click(function () { fn("nowConfirm") });
    function fn(valueName) {
        $.each(foreignData.foreignList, function (i, v) {
            virusDatas[i].value = v[valueName];
        })
        virusDatas[virusDatas.length - 1].value = chinaData.chinaTotal[valueName];
        option.series[0].data = virusDatas;
        myChart.setOption(option);
    }
    $(".map_tab span").click(function () {
        $(this).addClass("cur").siblings().removeClass("cur");
    })
}
// 海外疫情趋势
function tendency() {
    // 获取历史数据
    var globalDailyHistory = foreignData.globalDailyHistory;
    // 设置容器分别保存日期、疫情数值数据
    var num = [], date = [];
    globalDailyHistory.reverse();
    globalDailyHistory.shift()
    $.each(globalDailyHistory, function (i, v) {
        // 保证数据数量为27，获取间隔3天的数据记录
        if (num.length < 27 && i % 3 == 0) {
            num.push(v.all.newAddConfirm);
            date.push(v.date);
        }
    })
    // 1、初始化echarts实例
    var myChart = echarts.init(document.querySelector(".tendency .map_info"));
    // 2、设置配置项
    var option = {
        // 设置标题
        title: {
            text: "海外新增确诊趋势"
        },
        // 图例组件
        legend: {
            // 图例组件前图标类型
            icon: "rect",
            // 设置图例大小
            itemWidth: 12,
            itemHeight: 12,
            right: 20,
            top: 20,
            // 设置图例展示方式：horizontal水平
            orient: 'horizontal',
            // 设置图例文字样式
            textStyle: {
                padding: [3, 0, 0, 0]
            }
        },
        // 设置X轴配置
        xAxis: {
            // 设置X轴类型：category类目轴
            type: 'category',
            data: date.reverse(),
            // 坐标轴刻度标签的相关设置
            axisLabel: {
                rotate: 45,
                interval: 0,
                color: "#ccc",
                fontSize: 10
            },
            // 坐标轴刻度相关设置
            axisTick: {
                length: 0
            }
        },
        // 设置X轴配置
        yAxis: {
            type: 'value',
            min: 0,
            max: 120000,
            axisLabel: {
                formatter: function (param) {
                    return param.toString();
                }
            },
            // 坐标轴刻度相关设置
            axisTick: {
                length: 0
            },
            // 坐标轴轴线相关设置
            axisLine: {
                show: false
            }
        },
        series: [{
            name: "新增确诊",
            type: 'line',
            data: num.reverse(),
            // 是否平滑曲线显示
            smooth: true,
            // 线条样式
            lineStyle: {
                color: "#ff3d18"
            }
        }],
        tooltip: {
            trigger: "item",
            formatter: function (param) {
                return param.seriesName + "<br>" + param.marker + " " + param.name + " - " + param.value;
            }
        }
    };
    $(".tendency .map_tab span").eq(0).click(function () {
        // 重新过滤数据：
        var num = [];
        var date = [];
        $.each(globalDailyHistory, function (i, v) {
            if (num.length < 27 && i % 3 == 0) {
                num.push(v.all.newAddConfirm);
                date.push(v.date);
            }
        })
        // 根据新数据修改option配置项
        option.series = [{
            name: "新增确诊",
            data: num.reverse(),
            type: 'line',
            smooth: true,
            lineStyle: {
                color: "#ff3d18"
            }
        }]
        option.yAxis.max = 120000;
        option.yAxis.splitNumber = 7;
        option.yAxis.axisLabel.formatter = function (value, index) {
            return value.toString();
        }
        // 重新绘制图表
        myChart.clear();
        myChart.setOption(option, true);
    })
    $(".tendency .map_tab span").eq(1).click(function () {
        // 重新过滤数据
        // 累计确诊 = 现有确诊 + 治愈人数 + 死亡人数
        var num1 = [];
        // 现有确诊 = confirm
        var num2 = [];
        var date = [];
        $.each(globalDailyHistory, function (i, v) {
            if (num1.length < 27 && i % 3 == 0) {
                num1.push(v.all.confirm + v.all.heal + v.all.dead);
                num2.push(v.all.confirm);
                date.push(v.date);
            }
        })
        option.series = [
            {
                name: "累计确诊",
                type: 'line',
                data: num1.reverse(),
                smooth: true,
                lineStyle: {
                    color: "#c1021b"
                }
            },
            {
                name: "现有确诊",
                type: 'line',
                data: num2.reverse(),
                smooth: true,
                lineStyle: {
                    color: "#264654"
                }
            },
        ]
        option.yAxis.max = 3500000;
        option.yAxis.splitNumber = 8;
        option.yAxis.axisLabel.formatter = function (value) {
            return value.toString();
        }
        // 清除图表
        myChart.clear();
        // 重新渲染图表
        myChart.setOption(option)
    })
    $(".tendency .map_tab span").eq(2).click(function () {
        var num1 = [];
        var num2 = [];
        var date = [];
        $.each(globalDailyHistory, function (i, v) {
            if (num1.length < 27 && i % 3 == 0) {
                num1.push(v.all.dead);
                num2.push(v.all.heal);
                date.push(v.date);
            }
        })
        option.series = [
            {
                name: "死亡数",
                type: 'line',
                data: num1.reverse(),
                smooth: true,
                lineStyle: {
                    color: "#ff3d18"
                }
            },
            {
                name: "治愈数",
                type: 'line',
                data: num2.reverse(),
                smooth: true,
                lineStyle: {
                    color: "#264654"
                }
            },
        ]
        option.yAxis.max = 600000;
        option.yAxis.splitNumber = 7;
        option.yAxis.axisLabel.formatter = function (value) {
            return value.toString();
        }
        // 清除图表
        myChart.clear();
        // 重新渲染图表
        myChart.setOption(option)
    })
    $(".tendency .map_tab span").eq(3).click(function () {
        var num1 = [];
        var num2 = [];
        var date = [];
        $.each(globalDailyHistory, function (i, v) {
            if (num1.length < 27 && i % 3 == 0) {
                num1.push(v.all.deadRate);
                num2.push(v.all.healRate);
                date.push(v.date);
            }
        })
        option.series = [
            {
                name: "病死率",
                type: 'line',
                data: num1.reverse(),
                smooth: true,
                lineStyle: {
                    color: "#ff3d18"
                }
            },
            {
                name: "治愈率",
                type: 'line',
                data: num2.reverse(),
                smooth: true,
                lineStyle: {
                    color: "#264654"
                }
            },
        ]
        option.yAxis.max = 35;
        option.yAxis.splitNumber = 7;
        // 设置Y轴刻度文本是百分比
        option.yAxis.axisLabel.formatter = function (value) {
            return value + "%";
        }
        // 清除图表
        myChart.clear();
        // 重新渲染图表
        myChart.setOption(option)
    })
    myChart.setOption(option);
}
// 昨日新增确诊国家Top10
function top10() {
    var num = [];
    var nation = [];
    $.each(foreignData.countryAddConfirmRankList, function (i, v) {
        num.push(v.addConfirm);
        nation.push(v.nation);
    })
    // 1、初始化echarts实例
    var myChart = echarts.init(document.querySelector(".addTop10 .map_info"));
    // 2、设置配置项
    var option = {
        title: {
            text: "默认文本"
        },
        xAxis: {
            type: 'category',
            data: nation,
            axisLabel: {
                interval: 0,
                rotate: 45,
                color: "#333",
                fontSize: 10
            },
            axisTick: {
                length: 0
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: function (value) {
                    return value.toString();
                }
            }
        },
        series: [{
            // 柱状图
            type: 'bar',
            data: num,
            barWidth: 18,
            itemStyle: {
                // 鼠标经过时样式
                emphasis: {
                    color: "#ffe04d"
                }
            }
        }],
    };
    myChart.setOption(option);
}

看视频

遇到问题：

无

明日目标：

学习web端的开发

学习css