问小白 wenxiaobai
资讯
历史
科技
环境与自然
成长
游戏
财经
文学与艺术
美食
健康
家居
文化
情感
汽车
三农
军事
旅行
运动
教育
生活
星座命理

基于Django+MySQL+ECharts的可视化大屏开发实战

创作时间:
作者:
@小白创作中心

基于Django+MySQL+ECharts的可视化大屏开发实战

引用
CSDN
1.
https://blog.csdn.net/m0_63190901/article/details/130285529

Big-screen项目说明

这是一个基于Django、MySQL和ECharts的可视化大屏项目。后端采用Django框架，前端使用HTML、CSS和JavaScript，图表控件使用ECharts。项目运行效果如下：

数据来源及处理

数据来源于国家统计局，保存为CSV文件并导入MySQL数据库。在导入前需要对CSV文件进行预处理，删除不必要的行，并在MySQL Workbench中使用Table Data Import Wizard导入。

Django框架

项目、应用的创建及运行

从命令行创建Django项目和应用：

$ django-admin startproject myweb
$ python manage.py startapp myapp

创建后，项目结构如下：

[root@localhost demo]# tree myweb/
myweb/
├── manage.py
├── myweb
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── myapp
    ├── admin.py
    ├── apps.py
    ├── __init__.py
    ├── migrations
    │   └── __init__.py
    ├── models.py
    ├── tests.py
    └── views.py

运行开发服务器：

$ python manage.py runserver 端口号（默认8000）

连接数据库

在myweb/settings.py中配置数据库连接：

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'mydemo', # 数据库的名字，提前在mysql创建
        'USER': 'root',
        'PASSWORD': '', # 这里填上你的密码
        'HOST': 'localhost',
        'PORT': '3306',
    }
}

模板层

在项目根目录下创建templates目录，并在settings.py中配置：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

其他核心功能

创建static目录存放CSS、图片、JS等静态文件，并在settings.py中配置：

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

核心功能代码分析

统计信息展示及管理

信息展示

大屏右下角的图表展示了各年份-月份的失业率调查情况，右上角使用ECharts绘制饼图。如果只需要前端页面，可以直接使用静态数据：

<body>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option;
        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '0%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 15,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 20,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 5.6, name: '全国城镇调查失业率(%)', itemStyle: { color: '#4682B4' } },
                        { value: 5.4, name: '全国本地户籍人口城镇调查失业率(%)', itemStyle: { color: '#F4A460' } },
                        { value: 18.1, name: '全国16-24岁人口城镇调查失业率(%)', itemStyle: { color: '#FF8C00' } },
                        { value: 4.8, name: '全国25-59岁人口城镇调查失业率(%)', itemStyle: { color: '#FFF5EE' } },
                        { value: 5.7, name: '31个大城市城镇调查失业率(%)', itemStyle: { color: '#AFEEEE' } }
                    ]
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>
信息后台管理

右下角图表的"加载更多"功能会跳转到信息统计管理页面。数据从数据库获取，需要在models.py中定义模型类：

from django.db import models

class UPR(models.Model):
    '''自定义表对应的Model类'''
    id = models.AutoField(primary_key=True)
    time = models.CharField(max_length=45)
    uprate_1 = models.CharField(max_length=45)
    uprate_2 = models.CharField(max_length=45)
    uprate_3 = models.CharField(max_length=45)

    def __str__(self):
        return "%d:%s:%s:%s:%s" % (self.id, self.time, self.uprate_1, self.uprate_2, self.uprate_3)

    class Meta:
        db_table = "unemployment"

Ajax异步请求

Ajax是一种通过JavaScript异步发起请求、局部更新页面的技术。具体流程包括：

  1. 前端页面分区：在HTML中为每个模块划分区域
  2. 初始化ECharts实例：将初始化工作写在JS文件中
  3. 使用Ajax传递数据：通过$.get()方法请求数据

示例代码：

<script language="javascript" src="static/js/myec.js?version=1.0.2"></script>

$.get(url, [data], [callback])

在视图层编写getData()函数并配置路由，通过Ajax异步发送请求，并使用setTimeOut()设置刷新时间。

总结

项目地址：https://github.com/goldikfish/Bigscreen.git

这是一个临时作业项目，用的技术都比较简单，整体效果略显简陋。后续可以考虑使用华为云DLV或Astro轻应用等低代码工具，让项目更具现实意义。

实现方案总结：

  1. 确定数据来源和格式，存储到MySQL数据库
  2. 在Django项目中创建应用并定义模型类
  3. 创建视图函数处理前端请求，返回JSON格式数据
  4. 前端使用ECharts组件读取数据并更新图表
  5. 使用Ajax实现前后端异步交互
  6. 使用JavaScript处理DOM操作实现动态效果
热门推荐
© 2023 北京元石科技有限公司 ◎ 京公网安备 11010802042949号