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

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

1. 在 settings.py 文件中配置数据库连接信息：

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

2. 创建一个名为 `echarts` 的 Django app，并在 models.py 中定义一个模型来表示你的数据：

from django.db import models

class Data(models.Model):
    name = models.CharField(max_length=100)
    value = models.IntegerField()

3. 在 views.py 中编写一个视图来获取数据并将其传递给模板：

from django.shortcuts import render
from .models import Data

def chart(request):
    data = Data.objects.all()
    return render(request, 'chart.html', {'data': data})

4. 编写一个模板 `chart.html`，使用 echarts 将数据可视化：

{% extends 'base.html' %}

{% block content %}
<div id="chart" style="width:100%;height:400px;"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<script type="text/javascript">
var data = [
    {% for item in data %}
        {name: '{{ item.name }}', value: {{ item.value }}},
    {% endfor %}
];

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

chart.setOption({
    title: {
        text: '数据可视化'
    },
    tooltip: {},
    xAxis: {
        data: data.map(function (item) { return item.name; })
    },
    yAxis: {},
    series: [{
        name: '数值',
        type: 'bar',
        data: data.map(function (item) { return item.value; })
    }]
});
</script>
{% endblock %}

5. 最后，在 urls.py 中定义一个 URL 模式来匹配视图：

from django.urls import path
from .views import chart

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

这样，当你在浏览器中访问 `http://localhost:8000/chart/` 时，你将看到一个使用 echarts 可视化数据的页面。