国内疫情数据可视化(Django+echarts+HTML)

本系统是可视化系统的开发,使用Django开发web应用,使用Echarts绘制基本图表,使用前台页面的布局。

 

搭建一个Django的项目,该项目具有登录校验功能,一开始进入的是登录页面,用户输入用户名和密码,提交数据后与数据库中的user_info表做比对,如果用户名或者密码错误,则重新回到登录页面,并提示用户。如果用户名和密码正确,则进入系统主页面,主页面展示图表。

 一.

1.导入数据

在mysql中创建一个将数据库,将相关数据导入到该数据库中。数据包含5个表,分别为: 用户信息表user_info,用于登录校验。(表的注释中有字段说明) 国内疫情数据表covid_data(未包含港澳台)。(表的注释中有字段说明) 国内春节期间人口迁徙数据表migrate_data。(表的注释中有字段说明) 新闻信息表news_info。(表的注释中有字段说明) 是还有一个是国内行政区划代码表area_china(辅助用表),包含了各个地区的名称、编码、经纬度

 2.搭建Django项目

使用PyCharm搭建一个Django的项目,并完成相关的项目配置。Django版本号为3.2.13

配置修改: 新建一个 static文件夹,用于存放静态文件。 新建一个views.py文件,用于编写请求的处理方法。 修改setting.py文件。 编辑urls.py文件,做请求分发处理。 编辑views.py文件,定义请求处理的具体方法。

3.启动项目

项目搭建成功后,就可以启动项目了。打开PyCharm自带的CMD命令行控制台,输入命令:python manage.py runserver,当出现如下界面时,即为启动成功。 部署地址默认为 http://127.0.0.1:8000,不需要自行设置,也可以自行设置。

4.设计主页模板

在templates文件夹下新建一个html文件,用于展示可视化图表。 对html文件进行一定的排版布局,尽量使图表展示在同一页面中。

当前设计就是每一个div容器中放置一个图表。

 5.新增请求分发

在urls.py文件中,新增一个请求的分发处理。

 6.定义请求处理方法

在views.py文件中,定义一个main()函数,用于处理请求。 该函数主要是实现页面的跳转,并携带数据给前端页面,用于绘制图表。

 7.后端数据获取和处理

编辑views.py模块下的main()函数,实现从mysql数据库中获取数据,并做适当的处理,然后将数据返回到前端页面中绘图。

 8.前端数据获取和绘图

在前端页面中编写js代码,获取后端数据,使用echarts实现图表的绘制,每一个div中绘制一个图表。 绘制的第一个图表的展示页面如下图。 注意:绘图前需要引入绘图所需的js。

 

 9.Python后台返回多个数据

Python后台的views.py模块,返回多个数据的示例代码如下

 二.最后各文件代码示例

1.前端框架和绘图代码,DataView.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据可视化大屏</title>
{#    <link rel="stylesheet" type="text/css" href="../static/CSS/ViewCSS.css">#}
    <script type="text/javascript" src="../static/echarts2.js"></script>
    <script type="text/javascript" src="../static/echarts-wordcloud.js"></script>
    <script type="text/javascript" src="../static/china.js"></script>
    <style>

body {
    font-family: Arial, Helvetica, sans-serif;
}
.left{
    height: 660px;
    width: 440px;
    position:absolute;
    left: 8px;
    background-color: rgba(255, 255, 255, 0);
}
.middle{
    height:660px;
    width:585px;
    position: absolute;
    left: 447.5px;
    /*background-color: greenyellow;*/
    background-color: rgba(255, 255, 255, 0);
}

.right{
    height: 660px;
    width: 440px;
    position: absolute;
    right: 6.5px;
    /*background-color: aquamarine;*/
    background-color: rgba(255, 255, 255, 0);
}
.left_1{
    height: 220px;
    width: 440px;
    position: absolute;
    top: 0px;
    /*background-color: Aquamarine;*/
    background-color: rgba(255, 255, 255, 0);
}
.left_2{
    height: 220px;
    width: 440px;
    position: absolute;
    top: 220px;
    /*background-color: LightPink ;*/
    background-color: rgba(255, 255, 255, 0);
}
.left_3{
    height: 220px;
    width: 440px;
    position: absolute;
    bottom: 0px;
    /*background-color: LemonChiffon ;*/
    background-color: rgba(255, 255, 255, 0);
}
.middle_1{
    height: 330px;
    width: 585px;
    position: absolute;
    top: 0px;
    /*background-color: palevioletred ;*/
    background-color: rgba(255, 255, 255, 0);
}
.middle_2{
    height: 330px;
    width: 585px;
    position: absolute;
    bottom: 0px;
    /*background-color: lavender;*/
    background-color: rgba(255, 255, 255, 0);
}
.right_1{
    height: 220px;
    width: 440px;
    position: absolute;
    top: 0px;
    /*background-color: Plum ;*/
    background-color: rgba(255, 255, 255, 0);
}
.right_2{
    height: 220px;
    width: 440px;
    position: absolute;
    top: 220px;
    /*background-color: LightSkyBlue ;*/
    background-color: rgba(255, 255, 255, 0);
}
.right_3{
    height: 220px;
    width: 440px;
    position: absolute;
    bottom: 0px;
    /*background-color: PaleGreen ;*/
    background-color: rgba(255, 255, 255, 0);
}

    </style>
</head>
<body>
{#background:url('../static/Images/RR.png');#}
    <div style="height: 700px; width: 1465px;background:url('../static/Images/R-C.jpg'); ">
        <div class="header" style="height: 40px;width: 100%;text-align:center;">
            <h1>国内疫情数据综合数据可视化平台</h1>
        </div>
        <div class="left">
            <div class="left_1" id="a1">
            </div>
            <div class="left_2" id="a2">
            </div>
            <div class="left_3" id="a3">
            </div>
        </div>
        <div class="middle">
            <div class="middle_1" id="b1">
            </div>
            <div class="middle_2" id="b2">
            </div>
        </div>
        <div class="right">
            <div class="right_1" id="c1">
            </div>
            <div class="right_2" id="c2">
            </div>
            <div class="right_3" id="c3">
            </div>
        </div>
    </div>
<script>
    //死亡率(仪表盘)的绘制
    var chart_a1 = echarts.init(document.getElementById('a1'));
    var option_a1 = {
        title:{
            text:"国内新冠疫情死亡率",
            left:"center",
            textStyle:{
                color:'#0c0000',
            },
        },
        tooltip:{
            trigger:'item'
        },

        legend:{
            textStyle:{
                color:'#0c0000',
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Django Echarts是一个基于Python的数据可视化库,可用于在Django Web应用程序中绘制各种交互式图表。使用Django Echarts,用户可以轻松将复杂数据转换为易于理解的图表,从而更好地分析和展示数据。 下面是如何导入并使用Django Echarts的步骤: 步骤1:安装Django Echarts 要使用Django Echarts,首先需要在Python环境中安装echarts-python包。可以使用以下命令进行安装: pip install echarts-python 步骤2:添加Django Echarts到您的Django应用程序 将Django Echarts添加到Django应用程序中非常简单。只需在settings.py文件中的INSTALLED_APPS列表中添加'echarts'即可: INSTALLED_APPS = [ ... 'echarts', ] 步骤3:编写视图和模板 在Django视图中,将数据转换为Django Echarts可以使用的JSON格式。例如,可以编写以下代码来生成一个柱状图: from django.shortcuts import render import json from echarts import Echart, Legend, Bar, Axis def echarts(request): data = [ ['Java', 'C++', 'PHP', 'Python', 'JavaScript', 'Ruby'], ['1', '23', '12', '43', '55', '36'] ] chart = Echart('编程语言流行度') chart.use(Bar('数据')) chart.use(Legend(['数据'])) chart.use(Axis('category', 'bottom', data=data[0])) chart.use(Axis('value', 'left', name='个数')) echarts_data = json.dumps(chart.json) return render(request, 'echarts.html', {'data': echarts_data}) 在模板中,使用Django Echarts的helper函数echart()来呈现图表。例如,在HTML中可以编写以下代码来呈现刚才生成的柱状图: {% extends "base.html" %} {% load echarts_tags %} {% block content %} <h2>编程语言流行度柱状图</h2> {% echart data %} {% endblock %} 以上就是使用Django Echarts进行数据可视化的详细步骤。通过学习和实践,用户可以更好地掌握这个工具,并在自己的项目中应用它。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值