国内疫情数据可视化（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复制

	<!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