Django静态展示Pyecharts图表数据

grfstc

已于 2022-05-17 11:36:34 修改

阅读量522

点赞数 1

分类专栏： Python 文章标签： python django echarts

于 2022-05-17 11:31:47 首次发布

本文链接：https://blog.youkuaiyun.com/grfstc/article/details/124815946

版权

Python 专栏收录该内容

25 篇文章

订阅专栏

之前动态展示的例子发现其实index.html模板中用的还是echarts渲染的，view.py视图下使用pyecharts生成json。index.html中的JavaScript去请求json数据，请求响应结果为success后通过setOption进行解析data字段下的数据绘制图表。

安装环境和动态展示示例参考如下：

Django动态展示Pyecharts图表数据_grfstc的博客-优快云博客

本静态展示示例使用的是Pyecharts的render方法进行渲染。

1. 新建一个 Django 项目

命令行中输入以下命令

django-admin startproject pyecharts_django_demo

创建一个应用程序

python manage.py startapp demo

效果如下：

创建完之后，在 Pycharm 中打开该项目，当然你也可以直接在 Pycharm 中创建

同时在pyecharts_django_demo/settings.py中注册应用程序INSTALLED_APPS中添加应用程序demo

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'demo',
]

并配置模板路径

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

在pyecharts_django_demo/urls.py中新增demo.urls

from django.contrib import admin
from django.urls import path, include


urlpatterns = [
    path('admin/', admin.site.urls),
    path('demo/', include('demo.urls')),
]

2. 新建项目 urls 文件

新建demo/urls.py文件，配置路由：

from django.urls import path

from . import views

urlpatterns = [
    path('index4/', views.index4, name='demoIndex'),
]

3. 编辑视图函数

demo/views.py如下：

from django.shortcuts import render
from django.http import HttpResponse
 
 
from pyecharts import options as opts
from pyecharts.charts import Bar, Map
from pyecharts.faker import Faker
 
 
# Create your views here.
 
def index4(request):
    bar_plot = (
        Bar(init_opts=opts.InitOpts(theme=ThemeType.ESSOS))      # 设置主题
        .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
        .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
        .add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
        .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
    )
    bar_plot = bar_plot.render_embed()
    world_map = (
        Map(init_opts=opts.InitOpts(theme=ThemeType.ESSOS))      # 设置主题
        .add("", [list(z) for z in zip(Faker.country, Faker.values())], "world",is_map_symbol_show=False,is_roam=False)
        .set_series_opts(label_opts=opts.LabelOpts(is_show=False))
        .set_global_opts(
        title_opts=opts.TitleOpts(title="Map-世界地图"),
        visualmap_opts=opts.VisualMapOpts(max_=200))
    )
    world_map = world_map.render_embed()

    context = {'bar_plot_html':bar_plot,'world_map_html':world_map}
    return render(request,'index4.html',context=context)

4. 配置模板文件

在项目根目录下创建templates目录，创建templates/index4.html文件，内容如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>pyecharts加Django的小例子</title>
        <!-- CSS only -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    </head>
    <body>
        <div class="container">
            <h1 style="color: crimson;">你好吗？</h1>
            {{ bar_plot_html | safe }}
        </div>
        <br>
        <div class="container">
            {{ world_map_html | safe }}
        </div>
    </body>
</html>

“| safe” 过滤器关闭自动转义，详情可以查看关于Django的render函数的参数和模板语言转义处理_grfstc的博客-优快云博客文章中的Django模板语言转义处理

5. 运行服务

python manang.py runserver

打开http://127.0.0.1:8000/demo/index4/