Django2学习笔记--添加pyecharts可视化图

最新推荐文章于 2023-07-05 14:38:49 发布

tzkj_wdz

最新推荐文章于 2023-07-05 14:38:49 发布

阅读量644

点赞数 1

分类专栏： django学习笔记数据可视化pyecharts

本文链接：https://blog.csdn.net/weixin_44890419/article/details/110534712

版权

django学习笔记同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

数据可视化pyecharts

9 篇文章 2 订阅

订阅专栏

简介

服务器上部署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

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

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)

在这里插入图片描述

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'),
]

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

sunhailindeMacBook-Pro:pyecharts_django_demo sunhailin$ ls
__pycache__   db.sqlite3   manage.py  pyecharts_django_demo  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>
	{{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>

在这里插入图片描述
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',
            ],
        },
    },
]

Step 6：运行项目

$ python manage.py runserver

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

tzkj_wdz

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Django2学习笔记--添加pyecharts可视化图

简介服务器上部署pyecharts可视化图，官方文档记录的很详细，这里记录简单写一下步骤1、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
复制链接

扫一扫

专栏目录