Django2学习笔记--添加pyecharts可视化图_django上面怎么用pyecharts绘制图像

作者：小小林熬夜学编程 | 2024-02-29 10:05:43

踩

django上面怎么用pyecharts绘制图像

简介

服务器上部署pyecharts可视化图，官方文档记录的很详细，这里记录简单写一下

步骤

pyecharts前后端分离部署在django上，官方文档：https://pyecharts.org/#/zh-cn/web_django?id=django-%e5%89%8d%e5%90%8e%e7%ab%af%e5%88%86%e7%a6%bb
这里根据官方文档简化一做下
Step 1：新建一个 Django 项目

$ django-admin startproject pyecharts_django_demo
1

Step 2：在 pyecharts_django_demo/views.py 中编写 Django 和 pyecharts 代码渲染图表
这里我就不创建应用了，直接在项目下新建views.py演示

sunhailindeMacBook-Pro:pyecharts_django_demo/pyecharts_django_demo sunhailin$ ls
__pycache__   __init__.py   settings.py  urls.py  views.py  wsgi.py
1
2

bar_base()内可以把处理好的列表数据传入，做自己需要的可视化图

import json
from random import randrange

from django.shortcuts import render
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()))

# 这是某个需要可视化图的页面
def index(request):
    context = {}
    context['abc'] = '这是某个需要可视化图的页面'
    return render(request, 'index.html', context)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

在这里插入图片描述

Step 3：在 pyecharts_django_demo/urls.py 中配置路由
这里实际是生成一个json文件链接，到时候前端直接调用里面的数据，用echarts静态文件渲染就可以出图了
运行之后，可以去访问看一下，http://127.0.0.1:8000/bar

from django.contrib import admin
from django.urls import path
from.import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('bar/', views.ChartView.as_view(), name='demo'),
    path('', views.index, name='index'),
]
1
2
3
4
5
6
7
8
9

Step 4：编写画图 HTML 代码
先在根目录文件夹下新建 templates 文件夹，新建一个 index.html

sunhailindeMacBook-Pro:pyecharts_django_demo sunhailin$ ls
__pycache__   db.sqlite3   manage.py  pyecharts_django_demo  templates
1
2

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>
	{{abc}}
    <div id="bar" style="width:500px; height:300px;">
	    <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>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

在这里插入图片描述
Step 5：更改 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',
    'rest_framework',
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Step 6：运行项目

$ python manage.py runserver
1

使用浏览器打开 http://127.0.0.1:8000/ 即可访问服务
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/164985