django连接数据库做echarts可视化页面案例

以下是一个简单的示例，使用Django连接MySQL数据库并使用echarts可视化数据。

1. 安装所需软件包

首先，我们需要安装Django和PyMySQL软件包。可以使用以下命令来安装它们：

pip install Django
pip install PyMySQL

2. 创建Django项目和应用

使用以下命令创建Django项目和应用：

django-admin startproject myproject
cd myproject
python manage.py startapp myapp

3. 配置数据库连接

在“myproject/settings.py”文件中，配置数据库连接。在“DATABASES”字典中添加以下代码：

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'your_database_name',
        'USER': 'your_database_username',
        'PASSWORD': 'your_database_password',
        'HOST': 'localhost',
        'PORT': '',
    }
}

4. 创建数据模型

在“myapp/models.py”文件中创建一个数据模型，用于存储要可视化的数据。以下是一个简单的示例：

from django.db import models

class Sales(models.Model):
    region = models.CharField(max_length=100)
    product = models.CharField(max_length=100)
    sales = models.IntegerField()

    def __str__(self):
        return self.region

5. 创建数据表

使用以下命令创建数据表：

python manage.py makemigrations myapp
python manage.py migrate

6. 批量导入数据

使用以下命令批量导入数据：

import csv
from myapp.models import Sales

with open('sales_data.csv', 'r') as f:
    reader = csv.reader(f)
    next(reader)  # skip the header row
    for row in reader:
        _, created = Sales.objects.get_or_create(
            region=row[0],
            product=row[1],
            sales=int(row[2])
        )

7. 创建视图函数

在“myapp/views.py”文件中创建一个视图函数，用于从数据库中获取数据，然后返回它们作为JSON格式数据。以下是一个简单的示例：

from django.http import JsonResponse
from myapp.models import Sales

def sales_data(request):
    sales = Sales.objects.all()
    data = {
        'regions': [],
        'products': [],
        'sales': []
    }
    for sale in sales:
        data['regions'].append(sale.region)
        data['products'].append(sale.product)
        data['sales'].append(sale.sales)
    return JsonResponse(data)

8. 配置URL

在“myproject/urls.py”文件中配置URL，将其指向刚刚创建的视图函数。以下是一个简单的示例：

from django.urls import path
from myapp.views import sales_data

urlpatterns = [
    path('sales_data/', sales_data, name='sales_data'),
]

9. 创建HTML模板

在“myapp/templates/myapp”文件夹中创建一个HTML模板，“index.html”，用于显示echarts可视化数据。以下是一个简单的示例：

{% extends 'base.html' %}

{% block content %}
    <div id="chart"></div>
{% endblock %}

{% block script %}
    <script type="text/javascript">
        $.ajax({
            url: '{% url "sales_data" %}',
            dataType: 'json',
            success: function (data) {
                const chart = echarts.init(document.getElementById('chart'));
                const option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: data['products']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: 'Sales',
                            type: 'bar',
                            data: data['sales']
                        }
                    ]
                };
                chart.setOption(option);
            },
            error: function () {
                alert('Unable to fetch data.');
            },
        });
    </script>
{% endblock %}

10. 运行Django项目

使用以下命令启动Django项目：

python manage.py runserver

访问“http://localhost:8000/myapp/”即可看到echarts可视化页面。