战疫 | 疫情数据分析展示（2）

目录

项目介绍

后端数据的更改

前端数据渲染

项目预览

项目地址

python制作动态疫情地图

在之前我发过两篇疫情地图展示的文章

• 利用python画河南疫情图

• 战疫 | pyecharts画全国各地区疫情图

接着我就遇到了萝卜大佬做的疫情大屏展示

• 疫情大屏优化-ECharts 地图下钻功能实现

我也萌生了做大屏展示的想法，如何实现呢？我做了以下尝试，将之前pyecharts做的地图直接插入到大屏展示模板中，但是由于布局不容易调整，找了做前端的同学，但是布局调整还是差强人意。索性就“抄袭”萝卜大佬的模板。web框架和后端数据来源不变。

项目介绍

前端展示模板的使用

项目文件树形结构如下，主要有

epidemic1 ├── epidemic1 │   ├── settings.py │   ├── urls.py │   ├── wsgi.py │   ├── __init__.py ├── epidemic_map │   ├── admin.py │   ├── apps.py │   ├── migrations │   ├── models.py │   ├── tests.py │   ├── urls.py   //定义路由 │   ├── views.py  //定义视图和后台数据处理 │   ├── __init__.py ├── manage.py ├── static //存放静态文件目录（css,js,图片，字体） │   ├── css │   │   └── comon0.css │   ├── font │   │   └── DS-DIGIT.TTF │   ├── images │   │   ├── bg.jpg │   │   ├── head_bg.png │   │   └── line(1).png │   ├── js │   │   ├── area_echarts1.js//Echarts渲染javascript │   │   ├── china.js │   │   ├── echarts.min.js //Echarts的JavaScript文件 │   │   ├── index.html  //背景模板 │   │   └── jquery.js │   └── picture │       ├── jt.png │       ├── lbx.png │       ├── loading.gif │       ├── map.png │       └── weather.png ├── templates  //存放前端模板 │   └── templates_map │       └── bigdata.html └── __pycache__     └── manage.cpython-37.pyc

关注公众号，回复大屏模板，即可获得20套精美大屏展示前端模板，本次项目使用为第20套模板。

将大屏展示模板引入到项目中，更改相应的文价目录，将 static中的文件按照Django框架的格式存放，如果你的IDE为pycharm，项目中各个文件的引用关系也会自动改变。

后端数据的更改

Talk is cheap. Show me the code

根据地图展示需要获取，各省的数据处理如下：

def drewi():    '''    获得全国各省数据    :return: 各省数据    '''    html = getepodemicdata()    city_data1 = []    city_name=[]    for value in dict.values():        if value != '西藏自治区':            regular = '(\{\\\"provinceName"\:\\\"' + value + '\\\"\,\\\"provinceShortName\\\".+?\{\\\"provinceName\\\")'        else:            regular = '(\{\\\"provinceName"\:\\\"' + value + '\\\"\,\\\"provinceShortName\\\".+?\\}\\]\\}\\]\\})'        data_json = re.findall(re.compile(regular), str(html))        city_data = re.findall(re.compile(r'(\d+)'), str(data_json))        city_data1.append(city_data[0])    map_chart_list = []    for i in range(len(dict1.values())):        map_chart_dict = {}        map_chart_dict['name'] = list(dict1.values())[i]        map_chart_dict['value'] = city_data1[i]        map_chart_list.append(map_chart_dict)    return map_chart_list

各地市数据

def drawmap():    '''    获得各省内各市的疫情数据，由于Echarts和pyechart传入的地市名称不一致，Echarts传入的是市名比如：‘郑州’，而pyecharts传入的为‘郑州市’所以地图名不用再做之前的处理。    :return: 各市级数据    '''    get_all_city_map_data={}
    html =  getepodemicdata()    for province in list(dict.keys()):        city_data=[]        city_name = []        if dict[province] != '西藏自治区':            regular = '(\{\\\"provinceName"\:\\\"' + dict[province] + '\\\"\,\\\"provinceShortName\\\".+?\{\\\"provinceName\\\")'        else:            regular = '(\{\\\"provinceName"\:\\\"' +  dict[province] + '\\\"\,\\\"provinceShortName\\\".+?\\}\\]\\}\\]\\})'        data_json = re.findall(re.compile(regular), str(html))
        city_data = re.findall(re.compile(r'(\d+)'), str(data_json))        city_data = city_data[12:len(city_data):6] #截取市名        # print(city_data)        city = re.findall(re.compile(r'([\u4E00-\u9FA5]+)'), str(data_json))        if province=='beijing'or province=='liaoning' or province=='henan' or province=='guangdong' or province=='shanxi' or province=='shanxi':            city_name=city[5:len(city)]        elif province=='shanghai'or province=='gansu':            city_name = city[6:len(city)]        elif province=='tianjin' or province=='chongqing' or province=='hebei' or province =='shanxi1' or province=='jilin' or province=='heilongjiang' or province=='jiangsu' or province=='zhejiang' or province=='anhui' or province=='jiangxi' or province=='shandong' or province=='hubei' or province=='hunan' or province=='hainan' or province=='sichuan' or province=='guizhou' or province=='yunan'  or province=='qinghai' or province=='neimeng' or province=='guangxi' or province=='xizang' or province=='ningxia' or province=='xinjiang':            city_name = city[2:len(city)]            # print(city_name)        get_city_map_data=[]        for i in range(len(city_name)):            map_chart_dict = {}            try:                map_chart_dict['name'] = city_name[i]                map_chart_dict['value'] = city_data[i]                get_city_map_data.append(map_chart_dict)            except:                print(city_data,city_name)        get_all_city_map_data[dict1[province]]=get_city_map_data    return get_all_city_map_data

各省每天新增疫情和累计疫情

def get_everyday_data(request):    '''    获得各省每天新增疫情和累计疫情，做趋势图用    :param request:     :return: JSON数据    '''    allcity_everyday_data={}    for province in list(jsonurl.keys()):        res = requests.get(jsonurl[province]).json()        everyday_data = []        everyday_dead=[]        everyday_cure=[]        everyday_add=[]        total_data=[]        total_dead=[]        total_cure=[]
        one_province_data={}        for everyday in res['data']:            everyday_data.append(everyday['dateId'])            everyday_dead.append(everyday['deadIncr'])            everyday_cure.append(everyday['curedIncr'])            everyday_add.append(everyday['confirmedIncr'])            total_data.append(everyday['confirmedCount'])            total_dead.append(everyday['deadCount'])            total_cure.append(everyday['curedCount'])            one_province_data['everyday_data']=everyday_data            one_province_data['everyday_dead']=everyday_dead            one_province_data['everyday_cure']=everyday_cure            one_province_data['everyday_add']=everyday_add            one_province_data['total_data']=total_data            one_province_data['total_dead']=total_dead            one_province_data['total_cure']=total_cure        allcity_everyday_data[dict1[province]]=one_province_data    # print(allcity_everyday_data)    return JsonResponse({'allcity_everyday_data':allcity_everyday_data })

前端数据渲染

前端数据使用JavaScript数据进行渲染，首先通过Ajax获取Json数据，代码如下

$.ajax({            url: '/get_map_data',            type: 'get',            dataTpye: 'json',            success: function (res) {                local_var = res;                mymap(res);//地图渲染函数                indexchart5(res['country_every_data']);//右边趋势图                indexchart2(res['country_every_data']);//左边趋势图            },            error:function (res) {                console.log('erro');            }        });

地图渲染代码如下

function mymap(data) {            var MapContainer = document.getElementById('map_1');            var mapChart = echarts.init(MapContainer);            // 34个省、市、自治区的名字拼音映射数组            var option = {                title: {                    text: '全国疫情地图',                    left: 'center',                    textStyle: {                        color: '#fff',                        fontSize:'16'                    }                },                tooltip: {                    trigger: 'item',formatter:'{a}<br/> {b} :{c}<br/>点击查看详情',                },                visualMap: [                    {                        show: true,                          //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在                        type: 'piecewise',                  // 定义为分段型 visualMap                     //对于连续型数据，自动平均切分成几段。默认为5段                        color:'#ffffff',                        pieces: [                           //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式                            {min: 10001, label: '>10000', color: '#811C24'},                     // 不指定 max，表示 max 为无限大（Infinity）。                            {min: 1000, max: 10000, label: '1000-10000', color: '#811C24'},                            {min: 500, max: 999, label: '500-999', color: '#CB2A2F'},                            {min: 100, max: 499, label: '100-499', color: '#E55A4E'},                            {min:10,max:99, label: '10-99', color: '#F59E83'},                            {min:1,max:9, label: '1-9', color: '#FDEBCF'}, // 表示 value 等于 123 的情况。                            {value: 0 ,label:'0',color: "#FFFFFF"}                        // 不指定 min，表示 min 为无限大（-Infinity）。                        ],                        left: '25%',                        bottom:'0%',                        textStyle:{                            color:'#ffffff'                        }                    }                ],                series: [{                        name: '现存确诊人数',                        type: 'map',                        aspectScale: 0.75,                        zoom: 1.2,                        mapType: 'china',                        roam: false,                        label: {                            show: true,                            normal: {                                show: true,//显示省份标签                                textStyle:{color:"#000000"}//省份标签字体颜色                            },                            emphasis: {//对应的鼠标悬浮效果                                show: false,                                textStyle:{color:"#800080"}                            }                        },                        itemStyle: {                            normal: {                                borderWidth: .5,//区域边框宽度                                borderColor: '#002097',//区域边框颜色                                areaColor:"#ffffff",//区域颜色                            },                            emphasis: {                                borderWidth: .5,                                borderColor: '#4b0082',                                areaColor:"#feff5b",                            }                        },                        data: data['country']                    },                ]            };            mapChart.setOption(option);
            window.addEventListener("resize",function(){            mapChart.resize();        });                         }            })            }

项目预览

项目地址

Django框架写的大屏展示项目

关注"鸡术有限"公众号回复“bigscreen”获取

萝卜大佬的Flask框架写的大屏展示项目

关注“萝卜大杂烩”公众号回复“bigdata”