Django项目的配置文件APP配置
INSTALLED_APPS = [
‘django.contrib.admin‘, # 管理员站点
‘django.contrib.auth‘, # 认证授权系统
‘django.contrib.contenttypes‘, # 内容类型框架
‘django.contrib.sessions‘, # 会话框架
‘django.contrib.messages‘, # 消息框架
‘django.contrib.staticfiles‘, # 管理静态文件的框架
‘myapp‘,
‘django_echarts‘, # 注册Django rest framework
‘rest_framework‘, # 在这里需要注册Django rest framework
]
Django项目的URL配置
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path(‘admin/‘, admin.site.urls),
path(‘‘, include(‘myapp.urls‘))
]
APP路由配置
from django.urls import path
from . import views
urlpatterns = [
path(‘‘, views.index, name=‘index‘),
path(‘show/‘, views.ChartView.as_view(), name=‘show‘)
]
APP视图代码
from django.shortcuts import HttpResponse
from django.shortcuts import render
from pyecharts.charts import Bar
from pyecharts import options
from rest_framework.views import APIView
from random import randrange
import json
import os
def index(request):
return render(request, ‘main.html‘)
def response_as_json(data):
json_str = json.dumps(data)
response = HttpResponse(
json_str,
content_type=‘application/json‘
)
response[‘Access-Control-Allow-Region‘] = ‘*‘
return response
def json_response(data, code=200):
data = {
‘code‘: code,
‘msg‘: ‘success‘,
‘data‘: data,
}
return response_as_json(data)
def json_error(error_string=‘error‘, code=500, **kwargs):
data = {
‘code‘: code,
‘msg‘: error_string,
‘data‘: {}
}
data.update(kwargs)
return response_as_json(data)
JsonResponse = json_response
JsonError = json_error
def bar_base() -> Bar:
bar = (
Bar()
.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
.add_yaxis(‘商家A‘, [randrange(0, 100) for _ in range(6)])
.set_global_opts(title_opts=options.TitleOpts(title=‘这是标题‘, subtitle=‘这是副标题‘))
.dump_options_with_quotes()
)
return bar
class ChartView(APIView):
def get(self, request, *args, **kwargs):
return JsonResponse(json.loads(bar_base()))
模板页实现
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
{% load static %}
<link rel="stylesheet" href="{% static ‘bootstrap-3.3.7-dist/css/bootstrap.min.css‘ %}" type="text/css"/>
<script src="{% static ‘echarts-4.5.0/echarts.common.min.js‘ %}"></script>
<script src="{% static ‘jquery/jquery.min.js‘ %}"></script>
<script src="{% static ‘bootstrap-3.3.7-dist/js/bootstrap.min.js‘ %}"></script>
<title>Index</title>
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
刷新界面实现
{% extends ‘index.html‘ %}
{% block content %}
<div id="bar" style="width: 800px; height: 600px"></div>
{{ data | safe }}
<script>
var myChart = echarts.init(document.getElementById(‘bar‘), ‘white‘, {renderer: ‘cavnvas‘});
$(
function () {
fetchData();
window.setInterval(fetchData, 2000)
}
);
function fetchData() {
$.ajax({
type: ‘GET‘,
url: ‘/show/‘,
dataType: ‘json‘,
success: function (result) {
myChart.setOption(result.data)
},
error: function (result) {
console.log(result)
}
})
}
</script>
{% endblock %}
原文地址：https://www.cnblogs.com/kris-wang/p/12208193.html
时间： 2024-11-22 21:14:40