前端搜索人名后端数据库django连接画出折线图用echarts
【以下回答由 GPT 生成】
首先，你需要按照以下步骤解决这个问题：
from django.db import models
class PersonData(models.Model):
name = models.CharField(max_length=100)
data = models.IntegerField()
python manage.py makemigrations
python manage.py migrate
from django.shortcuts import render
from django.http import JsonResponse
from .models import PersonData
def search(request):
name = request.GET.get('name')
if name:
data = PersonData.objects.filter(name__icontains=name).values('name', 'data')
return JsonResponse(list(data), safe=False)
else:
return JsonResponse([], safe=False)
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
<script>
function search() {
var name = document.getElementById('searchInput').value;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/search?name=' + name, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
renderChart(data);
}
};
xhr.send();
}
function renderChart(data) {
var chart = echarts.init(document.getElementById('chartContainer'));
var xAxisData = [];
var seriesData = [];
for (var i = 0; i < data.length; i++) {
xAxisData.push(data[i].name);
seriesData.push(data[i].data);
}
var option = {
xAxis: {
type: 'category',
data: xAxisData
},
yAxis: {
type: 'value'
},
series: [{
name: 'Data',
type: 'line',
data: seriesData
}]
};
chart.setOption(option);
}
</script>
<input type="text" id="searchInput">
<button onclick="search()">Search</button>
<div id="chartContainer" style="width: 800px; height: 400px;"></div>
这样，当用户在搜索框中输入人名并点击搜索按钮时，前端会发送Ajax请求到后端的Django视图函数，函数会根据输入的人名从数据库中获取相应的数据，并将数据转换成JSON格式返回给前端。前端页面会将这些数据传递给Echarts来生成折线图。
希望这个解决方案对你有帮助！如果你对任何步骤或代码有疑问，请随时提出。
【相关推荐】