【小白适用】Django+Echarts+Mysql

最新推荐文章于 2024-08-09 20:19:59 发布

忘川_7

最新推荐文章于 2024-08-09 20:19:59 发布

阅读量3.1k

点赞数 7

文章标签： django mysql echarts

本文链接：https://blog.csdn.net/qq_43564015/article/details/125602754

版权

Django+Echarts+Mysql项目Demo!

一、Django框架
- 1、创建Django项目
- 2、文件结构
二、链接mysql
- 1.引入库
- 2.读入数据
三、使用echarts可视化展示

提示：以下是本篇文章正文内容，案例仅供参考

一、Django框架

1、创建Django项目

1、选择Django，创建项目
2、输入本地地址
3、选择配置python编译器
4、选择More Settings，配置app！！！（现在配置省很多事情噢）
emmm

2、文件结构

在这里插入图片描述

二、链接mysql

1.引入库

settings.py

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'ed',		#数据库名称
        'USER':'root',		#用户名
        'PASSWORD':'**',	#密码
        'HOST':'localhost',	
        'PORT':'3306',
    }
}

2.读入数据

models.py

from django.db import models


class MajorCount(models.Model):
    major = models.CharField(max_length=255, blank=True, null=True)
    m_count = models.CharField(max_length=255, blank=True, null=True)

    class Meta:
        managed = False
        db_table = 'major_count'


class SchoolCount(models.Model):
    school = models.CharField(max_length=255, blank=True, null=True)
    s_count = models.CharField(max_length=255, blank=True, null=True)

    class Meta:
        managed = False
        db_table = 'school_count'

这里放入一个特别特别特别省事儿的方法（tip:数据库中数据存在噢

python manage.py inspectdb > models.py

数据库截图放在下面啦：
在这里插入图片描述

三、使用echarts可视化展示

1、设置静态文件目录（即 static 目录）

（1）地址设置

settings.py

#添加到最后
STATICFILES_DIRS=(os.path.join(BASE_DIR,'static'),)

（2）js文件下载

echarts.min.js: link
下载完毕放到static/js中

（3）css设置

index.css

#chart{
    height: 500px;
    width: 500px;
}

把该文件放到static/css中

（4）static目录结构

在这里插入图片描述

2、可视化页面(templates文件夹）

（1）index.html页面测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个django展示页面</title>
    <link rel="stylesheet" href="../static/css/index.css">
    <script src="../static/js/echarts.min.js"></script>
</head>
<body>
<h1>学生成绩简单可视化</h1>
<div id="chart"></div>

<script>

    var mychart = echarts.init(document.getElementById('chart'));

    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };

    mychart.setOption(option);

</script>
</body>
</html>

看一下你的页面是不是下面这样：
在这里插入图片描述
如果是上面这样，恭喜你！下一步！

（2）将数据库中的数据传到前端页面

views.py

from django.shortcuts import render
from .models import Person
def index(request):
    objs = Person.objects.all()
    return render(request,'index.html',locals())

(3)引用数据库中的信息

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个django展示页面</title>
    <link rel="stylesheet" href="../static/css/index.css">
    <script src="../static/js/echarts.min.js"></script>
</head>
<body>
<h1>学生成绩简单可视化</h1>
<div id="chart"></div>

<script>
    var mychart = echarts.init(document.getElementById('chart'));
    var series_data = [];
    var xAxis_data = [];
    {% for stu in objs %}
        series_data.push({{ stu.score }})
        {#注意这里的双引号#}
        xAxis_data.push("{{ stu.name}}")
    {% endfor %}

    {#可视化展示选项#}
    var option = {
        xAxis: {
            type: 'category',
            data: xAxis_data
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: series_data,
            type: 'line'
        }]
    };
    mychart.setOption(option);
</script>
</body>
</html>

(4) 配置路径

urls.py

from django.contrib import admin
from django.urls import path
from app import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',views.index)
]