pyecharts源码解读（7）渲染包render之display模块：构造HTML、Javascript代码

最新推荐文章于 2025-03-20 11:50:21 发布

原创最新推荐文章于 2025-03-20 11:50:21 发布 · 3.1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#pyecharts #render #display #html #JavaScript

Pyecharts 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了PyEcharts 1.9.0版本中的渲染机制，详细解释了render包的结构及其核心模块display.py的功能。通过示例展示了如何使用HTML和Javascript类在notebook环境中嵌入图表。

当前pyecharts版本为1.9.0

概述

`render`包结构

render包位于pyecharts包顶级目录中，用于渲染图表。render包结构如下：

├─render # 渲染设置包
│  │  display.py # 定义HTML、JavaScript显示类，用于支持在notebook中嵌入输出结果
│  │  engine.py # 定义渲染相关类、函数
│  │  snapshot.py # 定义渲染图片函数
│  │  __init__.py # 暴露渲染图片函数
│  │
│  ├─templates # 定义渲染模板
│  │      components.html
│  │      macro
│  │      nb_components.html
│  │      nb_jupyter_globe.html
│  │      nb_jupyter_lab.html
│  │      nb_jupyter_lab_tab.html
│  │      nb_jupyter_notebook.html
│  │      nb_jupyter_notebook_tab.html
│  │      nb_nteract.html
│  │      simple_chart.html
│  │      simple_globe.html
│  │      simple_page.html
│  │      simple_tab.html

`display`模块

display模块，路径为pyecharts/render/display.py，作用为构造HTML和JavaScript的显示类，用于支持在notebook中嵌入输出结果。
display模块包含HTML和Javascript这两个类，这两个类主要用于pyecharts/render/engine.py，用于notebook渲染输出。该模块的设计几乎照搬IPython.display模块的HTML和Javascript类的设计。

`HTML`类

HTML类的构造函数参数为data，类型为字符串，即HTML字符串。__html__和_repr_html_方法等价，返回HTML字符串。

`Javascript`类

Javascript类的构造函数有三个参数：

data ：JavaScript语句字符串。
css：CSS文件的路径。类型为字符串或序列。
lib：JavaScript文件的路径。类型为字符串或序列。

_repr_javascript_方法用于将构造函数接收的参数格式化为JavaScript语句，创建相关元素。

案例：`HTML`类的应用

from pyecharts.render.display import HTML

s="<a href='foo'>adf</a>"
h=HTML(s)
print(h.data)
print(h.__html__())
print(h._repr_html_())
h

在notebook中的输出为：
在这里插入图片描述

案例：`Javascript`类的应用

from pyecharts.render.display import Javascript

data = "var a=10;"
lib = "jquery.min.js"
css = "main.css"

js = Javascript(data=data,lib=lib,css=css)
print(js._repr_javascript_())

输出为：

var link = document.createElement("link");
    link.ref = "stylesheet";
    link.type = "text/css";
    link.href = "main.css";
    document.head.appendChild(link);
new Promise(function(resolve, reject) {
    var script = document.createElement("script");
    script.onload = resolve;
    script.onerror = reject;
    script.src = "jquery.min.js";
    document.head.appendChild(script);
}).then(() => {
var a=10;
});

`pyecharts/render/display.py`模块源码

class HTML:
    def __init__(self, data: Optional[str] = None):
        self.data = data

    def _repr_html_(self):
        return self.data

    def __html__(self):
        return self._repr_html_()


_lib_t1 = """new Promise(function(resolve, reject) {
    var script = document.createElement("script");
    script.onload = resolve;
    script.onerror = reject;
    script.src = "%s";
    document.head.appendChild(script);
}).then(() => {
"""

_lib_t2 = """
});"""

_css_t = """var link = document.createElement("link");
    link.ref = "stylesheet";
    link.type = "text/css";
    link.href = "%s";
    document.head.appendChild(link);
"""


class Javascript:
    def __init__(
        self,
        data: Optional[str] = None,
        lib: Optional[Union[str, Sequence]] = None,
        css: Optional[Union[str, Sequence]] = None,
    ):
        if isinstance(lib, str):
            lib = [lib]
        elif lib is None:
            lib = []
        if isinstance(css, str):
            css = [css]
        elif css is None:
            css = []
        self.lib = lib
        self.css = css
        self.data = data or ""

    def _repr_javascript_(self):
        r = ""
        for c in self.css:
            r += _css_t % c
        for d in self.lib:
            r += _lib_t1 % d
        r += self.data
        r += _lib_t2 * len(self.lib)
        return r