2023面试高手

这个屌丝很懒，什么也没留下！

热门标签

Pyecharts库及其与Django的结合使用_django pyecharts

作者：2023面试高手 | 2024-02-29 10:14:12

踩

django pyecharts

在上一周发表的echarts和Django的结合使用中，有粉丝提出想要学习下pyecharts，我特地花了点时间研究了下，写出此篇文章，希望喜欢的能够给我点点赞~
这篇文章不会提到太多的语法，也不会把每个图形都讲一遍，还是那句话，作为初学者，我们先要模仿着写。官方文档对图形使用的解析已经很清楚了，我只抓取我感觉比较重要的讲一些。
代码仓库地址还是原来的那个地址，示例资源和静态资源文件都已经集成到这个项目里了。
https://gitcode.net/sabian2/myechartdemo

简介

Echarts 是一个由百度开源的数据可视化，凭借着良好的交互性，精巧的图表设计，得到了众多开发者的认可。而 Python 是一门富有表达力的语言，很适合用于数据处理。当数据分析遇上数据可视化时，pyecharts 诞生了。

中文文档地址

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

示例资源地址

https://github.com/pyecharts/pyecharts-gallery

静态资源地址

https://github.com/pyecharts/pyecharts-assets

基本的格式

pyecharts的核心和echarts一样，就是配置，echarts在js脚本中进行配置，而pyecharts在Python代码进行相关的配置，再生成对应的网页文件。
如同官方文档描述的那样，pyecharts的配置有普通的调用方式，也有链式调用方式
在这里插入图片描述

重要的配置项-- InitOpts：初始化配置项

初始化配置项一般放入图表类型中进行配置
比如上方图片的Bar之中

    Bar(init_opts=opts.InitOpts(page_title='测试页面'))
1

参数还有width：宽度、height：高度、theme：主题、js_host：js文件位置等，其中js_host用于在非互联网环境使用，将cdn上的echarts js资源位置定位为本地，或者其他服务器。
静态资源地址中的项目文档会有如何在本地部署静态资源服务器的方法。此处我用的django项目，所以我把js_host设置到我的static文件夹，并将静态资源地址中assest文件夹下的文件都拷贝到里面。
一般会将这个设置改为在全局配置globals中设置另一个属性ONLINE_HOST，更为方便。

一个基本的简单示例

Django中可以有多种方式使用这个pyecharts来渲染页面。首先，这里讲一个简单的例子
在这里插入图片描述

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.faker import Faker
from pyecharts import globals
globals.CurrentConfig.ONLINE_HOST='/static/'


def test1(request):
    c = (
        Bar(init_opts=opts.InitOpts(page_title='测试页面'))
            .add_xaxis(Faker.choose())
            .add_yaxis("商家A", Faker.values())
            .add_yaxis("商家B", Faker.values())
            .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
            .render("templates/bar_base.html")
    )
    return render(request,'bar_base.html',locals())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

视图代码来源于示例资源中的bar_base.py
这里是一种先由pyecharts生成文件，再通过render函数渲染给用户的方法。
代码中将host配置放在视图函数外，可以减少重复配置。
在上一篇echarts的文档中有个colors调色盘的设计，这里只需要加上如下格式的配置，即可选用颜色，注意这个链要连接在render之前。

            .set_colors([一个颜色的列表])
1

.set_global_opts里的配置项很多，像图例、视觉映射、提示框都能在里面配置。

在这里插入图片描述
图片右侧就是配置项的基本细节，在使用的时候就是一个赋值的过程。
你可以在配置后面加逗号，写别的配置

也可以在下面另起一行设置，效果是一样的。

第二种处理方式

在Django中我们没必要去生成一个文件再渲染这个文件。pyecharts提供了一个render_embed函数，直接生成html文件内容。
以示例资源中的heatmap_base.py 做示例
在这里插入图片描述

def test2(request):
    from pyecharts.charts import HeatMap
    from pyecharts.faker import Faker

    value = [[i, j, random.randint(0, 50)] for i in range(24) for j in range(7)]
    c = (
        HeatMap()
            .add_xaxis(Faker.clock)
            .add_yaxis("series0", Faker.week, value)
            .set_global_opts(
	            title_opts=opts.TitleOpts(title="HeatMap-基本示例"),
	            visualmap_opts=opts.VisualMapOpts(),
        )
    )
    return HttpResponse(c.render_embed())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

视图函数去掉了render链条，而是在返回时用render_embed渲染，返回一个HttpResponse，这就省略了生成文件的步骤。

自定义页面结构方式

这种方式才是大家最应该关注的，我们的页面很少是光秃秃的图表，图表经常被其他信息包围。
主要参照官方文档的前后端分离方式，并改写为简单的视图函数形式
https://pyecharts.org/#/zh-cn/web_django?id=django-%e5%89%8d%e5%90%8e%e7%ab%af%e5%88%86%e7%a6%bb
官方的示例在复现的过程中感觉是有不一样的地方的，所以请仔细观察

index.html

测试中本地的jquery一直提示找不到，莫名其妙的bug，所以还是用了原来的cdn。这里和echarts的使用一样，在页面中有一个元素，然后在js脚本中用echarts初始化这个元素。然后做一些配置。官方文档示例中用的是Bar，所以可能取得的数据是result.data,实际运用过程中配置信息就是result本身
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>自定义结构</title>

</head>
<body>
    <div id="pic" style="width:1000px; height:600px;"></div>

    <script type="text/javascript" src="/static/echarts.min.js"></script>
{#    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>#}

{#    <script type="text/javascript" src="/static/jquery.min.js"></script>#}
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>

    <script>
        var chart = echarts.init(document.getElementById('pic'), 'white', {renderer: 'canvas'});
        fetchData(chart);
        function fetchData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:8000/myapp/test3",
                dataType: 'json',
                success: function (result) {
                    console.log(result)
                    chart.setOption(result);
                }
            });
        }
    </script>
</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

数据视图test3

这个视图函数是作为前后端分离的方式向前端返回数据的，他将配置信息直接转换成json格式进行推送。
c的定义中有个关键函数dump_options_with_quotes是这个功能的关键，他将配置信息c从一个对象变为了一个json样式的字符串。

def test3(request):
    from pyecharts.charts import HeatMap
    from pyecharts.faker import Faker

    value = [[i, j, random.randint(0, 50)] for i in range(24) for j in range(7)]
    c = (
        HeatMap()
            .add_xaxis(Faker.clock)
            .add_yaxis("series0", Faker.week, value)
            .set_global_opts(
            title_opts=opts.TitleOpts(title="HeatMap-基本示例"),
            visualmap_opts=opts.VisualMapOpts(),
            )
            .dump_options_with_quotes()

    )
    print(c)
    return JsonResponse(json.loads(c))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

图形视图test4

我用的是上一个示例中的热力图，这个视图函数很简单，就是渲染返回页面。此时我们就实现了自定义页面结构，在指定div的其他地方可以放置我们自己需要的元素，来丰富我们网页的显示。
在这里插入图片描述

def test4(request):

    return render(request,'index.html',locals())
1
2
3

官方文档的阅读指南

带大家领读一下pyecharts的官方文档

图表API

在这里插入图片描述
图表API的函数基本上是在链式调用中的点后面运用。

全局变量

全局变量主要做一些配置，比如前面配置ONLINE_HOST的过程，一般是导入globals进行设置值，其中一个PAGE_TITLE的值设置出来没有效果。
在这里插入图片描述

图表类型和他们的API

在这里插入图片描述
参考本文最先的示例，图表类型就是链路上的第一个参数，括号里面会有写初始化配置
他的api就是下面的链路
add就是增加数据的，数据格式根据他的注释拟合

如果组件还带有配置功能，组件本身的配置一般放入add中一并设置
在这里插入图片描述
像河流图这种带数据项的，就要在add加data时构造出item来

在这里插入图片描述

全局配置项

在简单示例中已经展示了这个的用法，全局配置中可以配置多种参数，文档中的参数可以用来参考
在这里插入图片描述

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