在 Django 中使用 pyecharts

本文介绍如何在Django项目中使用PyEcharts库生成并展示词云图表,包括配置步骤、代码示例及页面跳转实现,同时分享了在同一个页面展示多个图表的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

pyecharts 官方文档
https://pyecharts.org/#/

1.Django 与 pyecharts

1.1 官网的在 Django 中使用 pyecharts教程 :

https://pyecharts.org/#/zh-cn/web_django

其中配置pyecharts_django_demo/urls.py中,修改如下,可以不用再demo/下创建urls.py(当然这也可能是新版本的标准)

from django.conf.urls import include, url
from django.contrib import admin
from demo.views import index

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', index)
]

这样打开 http://127.0.0.1:8000/index/ , 即可在浏览器中看到如下界面
在这里插入图片描述
绘制词云
按照网上教程操作一直报错,原来是官方导包的方式改了

from pyecharts import options as opts
from pyecharts.charts import Page, WordCloud
from pyecharts.globals import SymbolType


words = [
    ("Sam S Club", 10000),
    ("Macys", 6181),
    ("Amy Schumer", 4386),
    ("Jurassic World", 4055),
    ("Charter Communications", 2467),
    ("Chick Fil A", 2244),
    ("Planet Fitness", 1868),
    ("Pitch Perfect", 1484),
    ("Express", 1112),
    ("Home", 865),
    ("Johnny Depp", 847),
    ("Lena Dunham", 582),
    ("Lewis Hamilton", 555),
    ("KXAN", 550),
    ("Mary Ellen Mark", 462),
    ("Farrah Abraham", 366),
    ("Rita Ora", 360),
    ("Serena Williams", 282),
    ("NCAA baseball tournament", 273),
    ("Point Break", 265),
]


def wordcloud_base() -> WordCloud:
    c = (
        WordCloud()
        .add("", words, word_size_range=[20, 100])
        .set_global_opts(title_opts=opts.TitleOpts(title="WordCloud-基本示例"))
    )
    return c

解释:上面的函数wordcloud_base()后面的-> WordCloud是指这个函数返回值为一个 WordCloud类的对象 (有待修改),这是python中的 注解 . 还有一种是
def wordcloud_base(s: 'str')-> WordCloud: 括号中的是希望传入的参数类型.
如果我们想在Django中显示词云的话,只需对上面demo做修改,
(1) views.py中添加

def wordcloud(request):
    words = [
    ("Sam S Club", 10000),
    ("Macys", 6181),
    ("Amy Schumer", 4386),
    ("Jurassic World", 4055),
    ("Charter Communications", 2467),
    ("Chick Fil A", 2244),
    ("Planet Fitness", 1868),
    ("Pitch Perfect", 1484),
    ("Express", 1112),
    ("Home", 865),
    ("Johnny Depp", 847),
    ("Lena Dunham", 582),
    ("Lewis Hamilton", 555),
    ("KXAN", 550),
    ("Mary Ellen Mark", 462),
    ("Farrah Abraham", 366),
    ("Rita Ora", 360),
    ("Serena Williams", 282),
    ("NCAA baseball tournament", 273),
    ("Point Break", 265),
    ]

    c = (
        WordCloud()
        .add("", words, word_size_range=[20, 100])
        .set_global_opts(title_opts=opts.TitleOpts(title="WordCloud-基本示例"))
    )
    return HttpResponse(c.render_embed())

(2) 然后在urls.py中添加

from django.conf.urls import include, url
from django.contrib import admin
from demo.views import index,wordcloud

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    # url(r'demo/', include('demo.urls')),  # <---
    url(r'^index/', index),
    url(r'^wordcloud/', wordcloud)
]

(3)浏览器中打开 http://127.0.0.1:8000/wordcloud/ 即可看到如下
在这里插入图片描述
对于官方这个demo,使用的哪个模板有点搞不清楚,于是借鉴下面博客的内容,加以改进,自己制定一个前端页面

http://www.cnblogs.com/wumingxiaoyao/p/8508060.html

推荐方式

def wordcloud(request):
    words = [
    ("Sam S Club", 10000),
    ("Macys", 6181),
    ("Amy Schumer", 4386),
    ("Jurassic World", 4055),
    ("Charter Communications", 2467),
    ("Chick Fil A", 2244),
    ("Planet Fitness", 1868),
    ("Pitch Perfect", 1484),
    ("Express", 1112),
    ("Home", 865),
    ("Johnny Depp", 847),
    ("Lena Dunham", 582),
    ("Lewis Hamilton", 555),
    ("KXAN", 550),
    ("Mary Ellen Mark", 462),
    ("Farrah Abraham", 366),
    ("Rita Ora", 360),
    ("Serena Williams", 282),
    ("NCAA baseball tournament", 273),
    ("Point Break", 265),
    ]

    c = (
        WordCloud()
        .add("", words, word_size_range=[20, 100])
        .set_global_opts(title_opts=opts.TitleOpts(title="WordCloud-基本示例"))
    )
    # return HttpResponse(c.render_embed())
    data = {'data': c.render_embed()}
    return render(request,"simple_chart2.html",data)

1.2 Django中实现页面跳转

现在有两个html文件,分别为simple_chart.htmlsimple_chart2.html ,我们在simple_chart2.html中加一个链接实现点击之后跳转到simple_chart.html,

  • simple_chart.html在urls.py中对应index
  • simple_chart2.html在urls.py中对应wordcloud

在simple_chart2.html中添加如下链接

<a href="{% url 'index' %}">static_page_B</a>

注意,urls.py中配置url必须加上name参数才行,否则会反解析错误

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    # url(r'demo/', include('demo.urls')),  # <---
    url(r'^index/', index,name='index'),
    url(r'^wordcloud/', wordcloud,name='wordcloud')
]

1.3 一个页面内多个图表

实现这个功能要充分理解views.py中函数的返回值,也就是render()的三个参数
return render(request, "simple_chart2.html", data)
最后的data(context)是一个字典,里面包含了要在simple_chart2.html 界面渲染的数据,simple_chart2.html 内容如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>词云</title>
  
<body>
    {{ data1|safe }}
    {{ data2|safe }}
     <a href="{% url 'index' %}">static_page_B</a>
</body>
</html>

其中data1data2是在views.py中生成的

    data = {}
    data['data1'] = c.render_embed()
    data['data2'] = c2.render_embed()
    return render(request, "simple_chart2.html", data)

2.生成词云所需的元组

import numpy as np
import pandas as pd
from pandas import Series,DataFrame
from pyecharts import options as opts
from pyecharts.charts import Page, WordCloud
from pyecharts.globals import SymbolType
data = {'词语':['续航好','速度快','发热小'],'词频':[100,500,120]}
df = DataFrame(data)
word_frequence = [(x[0],x[1]) for x in df.values]
# word_frequence
def wordcloud_base() -> WordCloud:
    c = (
        WordCloud()
        .add("", word_frequence, word_size_range=[20, 100])
        .set_global_opts(title_opts=opts.TitleOpts(title="WordCloud-基本示例"))
    )
    return c

wordcloud_base().render()  #  生成的HTML存在了 C:\\Users\\asus\\render.html

在这里插入图片描述

### Django 中集成 Pyecharts 实现数据可视化 为了在 Django 框架中集成和使用 Pyecharts 进行数据可视化,可以通过以下方式实现: #### 安装依赖库 首先,在项目环境中安装必要的 Python 库。确保已经安装了 `pyecharts` 和其他可能需要的包。 ```bash pip install pyecharts django ``` #### 设置视图函数 定义一个 Django 视图来生成图表并将其嵌入 HTML 页面中。这里展示了一个简单的例子,用于创建柱状图并将结果返回给前端[^1]。 ```python # views.py from django.shortcuts import render from pyecharts.charts import Bar from pyecharts import options as opts def bar_chart(request): # 创建柱状图实例 bar = ( Bar() .add_xaxis(["A", "B", "C", "D", "E"]) .add_yaxis("Series", [10, 20, 30, 40, 50]) .set_global_opts( title_opts=opts.TitleOpts(title="My Bar Chart") ) ) # 将图表转换成 JSON 字符串形式以便于传递给模板 context = { 'bar_chart': bar.dump_options_with_quotes(), } return render(request, 'chart_template.html', context) ``` 上述代码片段展示了如何构建一个基本的柱形图,并通过上下文字典中的键 `'bar_chart'` 向模板发送该图表的数据表示。 #### 修改 URL 路由配置 更新项目的路由设置以指向新创建的视图方法。 ```python # urls.py from django.urls import path from .views import bar_chart urlpatterns = [ ... path('bar/', bar_chart), ] ``` #### 编写前端页面 最后一步是在相应的 HTML 文件里加载 JavaScript 并初始化 ECharts 图表容器。注意要引入 echarts.js 或者在线 CDN 版本。 ```html <!-- templates/chart_template.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bar Chart</title> <script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script> <style type="text/css"> #main { width: 600px; height: 400px;} </style> </head> <body> <div id="main"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); myChart.setOption({{ bar_chart|safe }}); </script> </body> </html> ``` 这段 HTML 代码设置了绘图区域大小并通过 JavaScript 初始化图表对象,利用 Jinja2 的安全过滤器将来自后端的数据直接注入到客户端脚本中。 这样就完成了整个流程——从服务器端准备数据直到浏览器上显示图形化信息的过程。此过程不仅限于柱状图;几乎所有的 Pyecharts 支持的图表类型都可以按照类似的模式进行处理[^3]。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值