背景
后端：Django，前端：HTML，主要利用庫pyecharts，然后實現前后端分離加載圖表
參考官網文檔的Django案例寫下，參考網址：https://pyecharts.org/#/zh-cn/web_django
這里我重新創建一個Django項目
創建完項目如圖
裝pyecharts庫
在terminal輸入以下字符
pip3 install pyecharts
這里我已經裝過了
測試一下是否正常
在terminal輸入以下字符
python3 manage.py runserver
terminal
瀏覽器
新建一個app，名為adamBlog(建議別修改，跟我一樣)
在terminal輸入
python3 manage.py startapp adamBlog
在Django項目的settings.py文件中把app注冊
項目的urls.py文件下增加以下內容
"""ajax_django_pyecharts URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/3.0/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.urls import re_path
from adamBlog import views
urlpatterns = [
path('admin/', admin.site.urls),
re_path(r'^my_first_home/$', views.home_page),
re_path(r'^bar/$', views.ChartView.as_view()),
]
找到剛剛創建的app->views.py
輸入以下內容
from django.shortcuts import render
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_demo() -> 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_demo()))
def home_page(request):
return render(request,'my_home.html',{})
找到templates文件夾，如果沒有創建一個(位置在項目的根目錄)
在templates目錄下創建一個html文件，名為my_home.html
內容如下
<html>
<head>
<meta charset="UTF-8">
<title>echarts-ajax</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/bar",
dataType: 'json',
success: function (result) {
chart.setOption(result.data);
}
});
}
</script>
</body>
</html>
至此就完成工作，我們再啟動Django的服務。
在terminal輸入以下字符
python3 manage.py runserver
進入網站 http://127.0.0.1:8000/my_first_home/ ，效果如下
