django前后端分离
Step 0: 新建一个 Django 项目
django-admin startproject pyecharts_django_demo
创建一个应用程序
python manage.py startapp demo
在 pyecharts_django_demo/settings.py 中注册应用程序
# pyecharts_django_demo/settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'demo', # <--- app 名称
'rest_framework',
]
在 pyecharts_django_demo/urls.py 中新增 'demo.urls'
from django.contrib import admin
from django.urls import path
from django.conf.urls import url, include
urlpatterns = [
path('admin/', admin.site.urls),
url(r'^demo/', include('demo.urls'))
]
编辑 demo/urls.py 文件(没有就新建一个)
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^bar/$', views.ChartView.as_view(), name='demo'),
url(r'^index/$', views.IndexView.as_view(), name='demo'),
]
Step 2 编写画图 HTML 代码
先在根目录文件夹下新建 templates 文件夹，新建一个 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Awesome-pyecharts</title>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
<div id="bar" style="width:1000px; height:600px;"></div>
<script>
var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
$(
function () {
fetchData(chart);
}
);
function fetchData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:8000/demo/bar",
dataType: 'json',
success: function (result) {
chart.setOption(result.data);
}
});
}
</script>
</body>
</html>
Step 3: 编写 Django 和 pyecharts 代码渲染图表
注: 目前由于 json 数据类型的问题，无法将 pyecharts 中的 JSCode 类型的数据转换成 json 数据格式返回到前端页面中使用。因此在使用前后端分离的情况下尽量避免使用 JSCode 进行画图。
将下列代码保存到 demo/views.py 中
import json
from random import randrange
from django.http import HttpResponse
from rest_framework.views import APIView
from pyecharts.charts import Bar
from pyecharts import options as opts
# Create your views here.
def response_as_json(data):
json_str = json.dumps(data)
response = HttpResponse(
json_str,
content_type="application/json",
)
response["Access-Control-Allow-Origin"] = "*"
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:
c = (
Bar()
.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
.add_yaxis("商家A", [randrange(0, 100) for _ in range(6)])
.add_yaxis("商家B", [randrange(0, 100) for _ in range(6)])
.set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
.dump_options_with_quotes()
)
return c
class ChartView(APIView):
def get(self, request, *args, **kwargs):
return JsonResponse(json.loads(bar_base()))
class IndexView(APIView):
def get(self, request, *args, **kwargs):
return HttpResponse(content=open("./templates/index.html").read())
Step 4: 运行项目
项目运行时的文件夹应该在与manage.py同一文件目录下。
python manage.py runserver
使用浏览器打开http://127.0.0.1:8000/demo/index 即可访问服务
如果出现错误
next(ticker)
File "E:\anaconda\lib\site-packages\django\utils\autoreload.py", line 375, in tick
for filepath, mtime in self.snapshot_files():
File "E:\anaconda\lib\site-packages\django\utils\autoreload.py", line 391, in snapshot_files
for file in self.watched_files():
yield from iter_all_python_module_files()
File "E:\anaconda\lib\site-packages\django\utils\autoreload.py", line 116, in iter_all_python_module_files
return iter_modules_and_files(modules, frozenset(_error_files))
File "E:\anaconda\lib\site-packages\django\utils\autoreload.py", line 152, in iter_modules_and_files
if not path.exists():
File "E:\anaconda\lib\pathlib.py", line 1400, in exists
self.stat()
File "E:\anaconda\lib\pathlib.py", line 1197, in stat
return self._accessor.stat(self)
OSError: [WinError 123] 文件名、目录名或卷标语法不正确。: '<frozen importlib._bootstrap>'
ModuleNotFoundError: No module named 'rest_framework'```
应该用pip下载
pip install djangorestframework
网友评论