pnebl9fp6/数据分析和可视化/新冠疫情/templates/foreign.html

{% extends 'base1.html' %}
{% block title %}国外疫情{% endblock %}

{%block page%}

<!-- 国内疫情 -->
                <div class="tabs_list gailan">
                    <!-- gl_tips -->
                    <p class="gl_tips">截止<span id="nowtime">2020-02-02 11:52</span>全国数据统计</p>
                    <!-- detail4 -->
                    <div class="detail4">
                        <div class="list4">
                            <p class="color1">较昨日+<span class="add_num1">110</span></p>
                            <p class="num num1 color1">0</p>
                            <div class="text">确诊病例</div>
                        </div>
                        <div class="list4">
                            <p class="color2">较昨日<span class="add_num2">110</span></p>
                            <p class="num num2 color2">0</p>
                            <div class="text">现存确诊</div>
                        </div>
                        <div class="list4">
                            <p class="color3">较昨日+<span class="add_num3">110</span></p>
                            <p class="num num3 color3">0</p>
                            <div class="text">死亡人数</div>
                        </div>
                        <div class="list4">
                            <p class="color4">较昨日+<span class="add_num4">110</span></p>
                            <p class="num num4 color4">0</p>
                            <div class="text">治愈人数</div>
                        </div>
                        <div class="list4">
                            <p class="color5">较昨日+<span class="add_num5">110</span></p>
                            <p class="num num5 color5">0</p>
                            <div class="text">疑似病例</div>
                        </div>
                    </div>

                    <!-- map -->
                    <div class="map t_common">
                        <div class="map_tit tit_common">
                            <!-- <span class="tit_icon"></span> -->
                            <span class="tit_con">&nbsp;&nbsp;全国累计确诊</span>
                        </div>
                        <div class="map_con" id="map_echarts" style="width:100%;height:300px;">
                        </div>
                    </div>
                    <div class="map t_common">
                        <div class="map_tit tit_common">
                            <span class="tit_con">当前确诊人数最多的5个省份</span>
                            <div class="map_con" id="top5chart" style="width:100%;height:300px;"></div>
                        </div>
                    </div>
                    <div id="echarts1" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div>

                    <div class="map t_common">
                        <div class="map_tit tit_common">
                            <span class="tit_con">全国无症状感染者分布</span>
                            <div class="map_con" id="asymptomaticLoc" style="width:100%;height:300px;"></div>
                        </div>
                    </div>
                    <div id="echarts2" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div>

                    <!-- table -->
                    <!-- 全国表格 -->
                    <div class="china table_t t_common">
                        <div class="tit_common">
                            <!-- <span class="tit_icon"></span> -->
                            <span class="tit_con">&nbsp;&nbsp;全国数据统计</span>
                        </div>
                    </div>
                    <div class="china table_pro">
                        <div class="title">
                            <span class="t_area">地区</span>
                            <span class="t_confirm">确诊</span>
                            <span class="t_dead">死亡</span>
                            <span class="t_heal">治愈</span>
                        </div>
                        <ul class="content">
                        </ul>
                    </div>

                    <!-- 全球表格 -->
                    <div class="world table_t t_common">
                        <div class="tit_common">
                            <!-- <span class="tit_icon"></span> -->
                            <span class="tit_con">&nbsp;&nbsp;海外数据统计</span>
                        </div>
                    </div>
                    <div class="world table_pro">
                        <div class="title">
                            <span class="t_area">地区</span>
                            <span class="t_confirm">确诊</span>
                            <span class="t_dead">死亡</span>
                            <span class="t_heal">治愈</span>
                        </div>
                        <ul class="content">

                        </ul>
                    </div>


                </div>
<!-- 国外疫情 -->
                <div class="tabs_list dongtai">
                    <div class="main">
                        <ul class="cbp_tmtimeline">
                            <!-- 这里是最新动态 -->
                        </ul>
                    </div>
                </div>
<!-- 防护知识 -->
                <div class="tabs_list fhzs">
                </div>


{% endblock%}

{% block mainscript %}
<script>

//在国内，国外疫情，防护知识间切换

console.log("+++++++++++++++++++++++++++++");
var ospan = document.querySelectorAll('.middle_con .wrap .tabs .tabs_wrap span');
console.log(ospan.length);
var num_op = 0;
var tabs_list = document.querySelectorAll('.middle_con .wrap .tabs_content .tabs_list');
console.log(tabs_list.length);
tabs_list[0].style.display = 'block';
for (var i = 0; i < ospan.length; i++) {
    ospan[i].index = i;
    //一级标题：滑入事件
    ospan[i].onclick = function () {
        //一级标题：style变化
        ospan[num_op].className = '';
        this.className = 'sty';
        //二级内容：block变化
        tabs_list[num_op].style.display = '';
        tabs_list[this.index].style.display = 'block';
        num_op = this.index;
        window.location.href="/foreign";
    }
};


//绘制全国疫情地图
        var dataList=[]
        var myChart = echarts.init(document.getElementById('map_echarts'));
        option = {
            tooltip: {
                    formatter:function(params,ticket, callback){
                        return params.seriesName+'<br />'+params.name+'：'+params.value
                    }//数据格式化
                },
                visualMap: {
                    min: 0,
                    max: 100000,
                    left: 10,
                    bottom: 40,
                    itemWidth: 5, //图元的宽
                    itemHeight: 5, //图元的高
                    itemGap: 5, //两个图元之间的间隔距离
                    textStyle: {
                        fontSize: 9, //图元字体大小
                    },
                    pieces: [{
                        gt: 10000,
                        label: "> 10000",
                        color: "#7f1100"
                    }, {
                        gte: 1000,
                        lte: 10000,
                        label: "1000 - 10000",
                        color: "#ff5428"
                    }, {
                        gte: 500,
                        lt: 1000,
                        label: "500 - 1000",
                        color: "#ff8c71"
                    }, {
                        gt: 100,
                        lt: 500,
                        label: "100 - 500",
                        color: "#ffd768"
                    }, {
                        gt: 0,
                        lt: 100,
                        label: "0 - 100",
                        color: "rgb(253,235,207)"
                    }],
                    show: true
                },
            geo: {
                map: 'china',
                roam: false,//不开启缩放和平移
                zoom:1.23,//视角缩放比例
                label: {
                    normal: {
                        show: true,
                        fontSize:'10',
                        color: 'rgba(0,0,0,0.7)'
                    }
                },
                itemStyle: {
                    normal:{
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis:{
                        areaColor: '#F3B329',//鼠标选择区域颜色
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            series : [
                {
                    name: '确诊人数',
                    type: 'map',
                    geoIndex: 0,
                    data:dataList
                }
            ]
        };
//绘制前5个确诊人数最多的省份
var top5chart=echarts.init(document.getElementById("top5chart"));
top5option={
    title:{
        text:'确诊人数最多5个省份',
        subtext:'',
        left:'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:[],
            emphasis:{
                itemStyle:{
                    shadowBlur:10,
                    shadowOffsetX:0,
                    shadowColor:'rgba(0,0,0,0.5)'
                }
            }
        }
    ],
};
//绘制全国无症状感染者分布
var asymptomatic=echarts.init(document.getElementById("asymptomaticLoc"));
sympoption={
    title:{
        text:"无症状感染者分布",
        left:'center',
    },
    xAxis:{
        type:'category',
        data:[]
    },
    yAxis:{
        type:'value',
    },
    series:[{
        data:[],
        type:'bar',
        showBackground:true,
        backgroundStyle:{
            color:'rgb(220,220,0.8)'
        }
    }]

};
$.ajax({
    cache:false,
    type:'POST',
    async:false,
    url:'/chinaSummary',
    error:function(request){
        alert('false');
    },
    success:function(results){
        $("#nowtime").html(results.updateTime);
        $(".num1").html(results.confirmed); //确诊病例
        $(".add_num1").html(results.confirmedRelative); //新增确诊病例
        $(".num2").html(results.curConfirm); //疑似病例
        $(".add_num2").html(results.curConfirmRelative); //新增疑似病例
        $(".num3").html(results.died); //死亡人数
        $(".add_num3").html(results.diedRelative); //新增死亡人数
        $(".num4").html(results.cured); //治愈人数
        $(".add_num4").html(results.curedRelative); //新增治愈人数
        $(".num5").html(results.suspect); //治愈人数
        $(".add_num5").html(results.suspectRelative); //新增治愈人数
        top5option.title.subtext=results.updateTime;
        cityName=results.area;
        proconfirmed=results.proconfirmed;
        for(i=0;i<cityName.length;i++){
            option.series[0].data.push({name:cityName[i],value:proconfirmed[i]});
        }
        top5province=results.top5province;
        top5confirmed=results.top5confirmed;
        for(i=0;i<top5province.length;i++){
            top5option.series[0].data.push({name:top5province[i],value:top5confirmed[i]});
            top5option.legend.data.push(top5province[i]);
        }
        asymptomaticNum=results.asymptomacNum;
        asymptomaticArea=results.asymptomaticArea;
        for(i=0;i<asymptomaticNum.length;i++){
            sympoption.xAxis.data.push(asymptomaticArea[i]);
            sympoption.series[0].data.push(asymptomaticNum[i]);
        }

        myChart.setOption(option);
        top5chart.setOption(top5option);
        asymptomatic.setOption(sympoption);
    }



});


</script>


{% endblock %}