使用pycharts结合django框架在html页面中嵌入图表的相关问题_如何把pyecharts图嵌入html

由于要将主成分分析的结果做成图表并在网页上进行可视化展示，所以考虑到了python和echarts的结合：pyecharts
在views.py中完成图表生成的函数编写

def show_index(self):
    bar = (
        Bar()
        .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.render("F:\\Project-Python\\python-test\\demo\\templates\\demo\\show_index.html")
    return HttpResponse(bar.render_embed())
1
2
3
4
5
6
7
8
9
10

生成图表如下：

而如何才能在html页面内嵌入这个图表呢？

<iframe> 标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档
这个标签里面有个src属性，规定在 iframe 中显示的文档的 URL。

我们编写了一个html代码：在这个div标签下，我先把<iframe>标签注释掉
效果如下：暂时没有图表

当取消注释，图表的可视化就成功了，并且嵌入了网页：

重点来了！！！！
一个下午都在关于嵌入页面的url的名字的bug中度过，所以着重记录。

学习django的都知道，在urls.py文件中，要编写path函数来进行匹配，若匹配不中，则会返回404页面提示没有这个URL资源。

我的URL模式如下：

urlpatterns = [
    path('', views.index, name='index'),
    path('nav_data/', views.bi_data, name='bi_data'),
    path('nav_data/show_index/', views.show_index, name='show_index')
]
1
2
3
4
5

同时也要关注到<iframe>标签内的 src 目前是show_index:

<iframe frameborder=0 src="show_index" width="100%" height="450"></iframe>
1

注意到：path(‘nav_data/show_index/’, views.show_index, name=‘show_index’)
其中nav_data为想要嵌入页面，而path函数的第一个参数，需要将链接的上级目录配置为想要嵌入的网页的url

而如果要得到嵌入图表的html页面，则要输入这样的URL才能正确显示：

目前不知这个原因为何，也在urlpatterns中修改了一下午才修改出来。

还有一个比较有意思的事情：
如果<iframe>标签下将src=“show_index”标签修改，与path函数下的“nav_data/show_index”不一致的时候，那么网页也会出现访问错误

出现404访问错误：URL不匹配

这个也较为奇怪，目前我也不知道原因是啥，若有了解的大佬可以探讨探讨哈哈哈哈