pyecharts - 自定义模板并在模板中引入css文件

=== pyecharts版本为v1,web框架为flask 1.1===

问题

可以自定义报表生成格式,例如:添加文字说明等。而不是生成的文件只有报表代码。
问题分析:

1. 可以自定义报表模板
2. 为了美观还需要引入外部css

项目结构

├── pyecharts-master
    ├── app
    │   ├── automl
    │   │   ├── render
    │   │   ├── static
    │   │   │   ├── jquery.min.js
    │   │   │   ├── echart.js
    │   │   │   ├── bootstrap
    │   │   ├── demo
    │   │   │   ├── views.py
    ├── pycharts      --和git上目录结构一致
    │   ├── reder
     │   │   ├── temlpates		--官方模板在这里
    │   ├── globals.py
 

自定义模板

在官方文档中,pycharts可以生成render.html,文件中内容为报表代码。查看源码render代码如下:
path: 生成的文件名
template_name：模板名

    def render(
        self,
        path: str = "render.html",
        template_name: str = "simple_chart.html",
        env: Optional[Environment] = None,
    ) -> str:
        self._prepare_render()
        RenderEngine(env).render_chart_to_file(
            chart=self, path=path, template_name=template_name
        )
        return os.path.abspath(path)

dug发现在 globals.py文件值中定义了在哪些文件夹中寻找模板,代码如下:

GLOBAL_ENV = Environment(
        keep_trailing_newline=True,
        trim_blocks=True,
        lstrip_blocks=True,
        loader=FileSystemLoader(
             (os.path.join(
                 os.path.abspath(os.path.dirname(__file__)), "render", "templates"
             ))

        ),

从代码中可以发现,默认从globals.py同级目录下的render/templates中寻找模板。为了项目的耦合性.我希望在app/automl/render中自定义模板。代码如下:

 loader=FileSystemLoader(
             (os.path.join(
                 os.path.abspath(os.path.dirname(__file__)), "render", "templates"
             ), os.path.join(
                 os.path.abspath(os.path.dirname(os.path.dirname(__file__))), "app/automl", "render"
             ))
        )

os.path.dirname(os.path.dirname(file))获取项目根目录,方便配置。copy simple_chart.html到app/automl/reder中并重命名为my_simple_chart.html。运行可以生成报表,可以在my_simple_chart.html增加你想要的效果。

c.render(path=filename,template_name="my_simple_chart.html")

加载css文件

可以自定义模板后,我想写份说明文档,为了美观我在项目中引入bootstarp,但在添加引用才发现echarts只能添加js,不能添加css。pyecharts使用js如下:

pyecharts如何使用js

添加js

base.py 是所以报表的父类,它定义了js_dependencies,默认添加echarts.js。

self.js_dependencies: utils.OrderedSet = utils.OrderedSet("echarts")

你可以在代码中添加自己的依赖:

 chart.js_dependencies.add("jquery.min.js")
 chart.js_dependencies.add("bootstrap/js/bootstrap.min.js")

在模板中使用js

官方模板simple_chart.html代码如下:

{% import 'macro' as macro %}



    
    
    {{ macro.render_chart_dependencies(chart) }}


    {{ macro.render_chart_content(chart) }}

macro中代码如下:

{%- macro render_chart_dependencies(c) -%}
    {% for dep in c.dependencies %}
        
    {% endfor %}
{%- endmacro %}

{%- macro render_chart_css(c) -%}
    {% for dep in c.css_libs %}
        
    {% endfor %}
{%- endmacro %}

从中发现maco不仅提供了输出js的方法,还提供了输出css的方法。只是charts中没有css_libs属性,我们需要为它新增属性即可。

新增pycharts模板中使用css的方法

在base.py中新增属性

 self.css_libs = set()

在代码中增加css依赖

chart.css_lib.add("bootstrap/css/bootstrap.min.css")

在页面中引入css

{{ macro.render_chart_css(chart) }}