django连接数据库做echart,我现在页面打开只能看到json数据,我想要页面出现echarts图,我应该怎么做
时间: 2023-05-24 15:06:31 浏览: 199
Echarts连接数据库实例
要在Django中使用Echarts来展示数据,需要在前端页面中引入Echarts库,并在模板中使用JavaScript语言调用Echarts库来生成图表。
以下是大致步骤:
1. 在前端页面中引入Echarts库,可以下载Echarts文件并放置在静态文件夹中,如/static/echarts.min.js
2. 在Django的视图函数中,获取数据并将其以JSON格式传递给前端页面。可以使用Django自带的JsonResponse函数。
3. 在前端页面中使用JavaScript调用Echarts库,生成图表。具体方法请参考Echarts官方文档,例如:https://echarts.apache.org/zh/option.html#title
以下是一个简单的示例代码:
在views.py中:
```python
from django.shortcuts import render
from django.http import JsonResponse
import json
def echarts_view(request):
# 获取数据
data = {'name': '小明', 'age': 18, 'score': {'数学': 90, '语文': 80, '英语': 70}}
# 将数据转换为JSON格式并返回到前端页面
return JsonResponse(json.dumps(data), safe=False)
```
在echarts.html模板中:
```html
{% extends 'base.html' %}
{% block content %}
<h1>Echarts示例</h1>
<div id="chart" style="height: 400px;"></div>
<!-- 引入Echarts库 -->
<script src="{% static 'echarts.min.js' %}"></script>
<script>
// 发送Ajax请求,获取数据
$.ajax({
url: '/echarts/',
type: "GET",
dataType: "json",
success: function (data) {
var chartData = {
title: { text: data.name + '的成绩单' },
tooltip: {},
xAxis: { type: 'category', data: ['数学','语文','英语'] },
yAxis: { type: 'value' },
series: [{
name: '成绩',
type: 'bar',
data: [data.score.数学, data.score.语文, data.score.英语]
}]
};
// 使用Echarts库生成图表
var chart = echarts.init(document.getElementById('chart'));
chart.setOption(chartData);
}
});
</script>
{% endblock %}
```
在urls.py中添加路由:
```python
from django.urls import path
from .views import echarts_view
urlpatterns = [
path('echarts/', echarts_view, name='echarts'),
]
```
这个示例会在页面中生成一个柱状图,展示小明的三门课程成绩。你可以根据实际情况修改视图函数的数据获取方式及前端页面中图表的配置项。
阅读全文