pyecharts源码解读（18）HTML组件包components之图像组件Image
当前pyecharts的版本为1.9.0。
components包概述
components包位于pyecharts包顶级目录中，用于定义pyecharts的HTML组件。包结构如下：
├─components # HTML组件包
│ │ image.py # 定义图像组件类Image
│ │ table.py # 定义表格组件类Table
│ │ __init__.py # 重构命名空间，将组件类命名空间提升至components包命名空间
目前HTML组件类Table 和Image 与复合图表类Page不兼容。
Image类
pyecharts/components/image.py模块只定义了图像组件类Image。
Image类继承自基类ChartMixin，作用为绘制图像。
Image类的签名为class Image(page_title: str = CurrentConfig.PAGE_TITLE, js_host: str = "")。
Image类的构造方法参数如下：
js_host：JavaScript库的URL。字符串，默认值为""。page_title：HTML页面标题。字符串，默认值为全局变量CurrentConfig.PAGE_TITLE。
Image类的属性如下：
js_host：JavaScript库的URL。字符串，默认值为全局变量CurrentConfig.ONLINE_HOST。属性值为构造方法参数js_host与全局变量CurrentConfig.ONLINE_HOST进行或操作的结果。page_title：HTML页面标题。字符串。值为构造方法参数page_title值。js_functions：自定义JavaScript语句。类型为OrderedSet对象。默认值为OrderedSet()。js_dependencies：定义JavaScript依赖库。类型为OrderedSet对象。默认值为OrderedSet("echarts")。title_opts：图像组件标题配置。类型为ComponentTitleOpts对象，默认值为ComponentTitleOpts()。标题配置包括title、subtitle、title_style、subtitle_style等4个配置项。html_content：""。注意！模板中的渲染方式{ chart.html_content }}/>
_component_type：组件类型。字符串，默认值为"image"。chart_id：组件id。字符串，默认值为uuid.uuid4().hex。
Image类的方法如下：
add(self, src: str, style_opts: Optional[dict] = None)：添加图像信息。src：图像的源地址。类型为字符串。style_opts：图像样式，即None。
set_global_opts(title_opts: Union[ComponentTitleOpts, dict, None] = None)：将title_opts参数值设置为图像对象的title_opts属性值。render：调用render包engine模块中的render函数渲染HTML文档。默认渲染模板为components.html。render_embed：调用render包engine模块中的render_embed函数输出HTML字符串。默认渲染模板为components.html。render_notebook：调用render包engine模块中的render_notebook函数将输出嵌入到notebook中。默认渲染模板为nb_components.html。
图像组件模板
macro部分源码：
{% elif chart._component_type == "image" %}<div id="{{ chart.chart_id }}" class="chart-container" style=""><p class="title" {{ chart.title_opts.title_style }}> {{ chart.title_opts.title }}</p><p class="subtitle" {{ chart.title_opts.subtitle_style }}> {{ chart.title_opts.subtitle }}</p><img {{ chart.html_content }}/></div>
{% endif %}
components.html源码：
{% import 'macro' as macro %}
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>{{ chart.page_title }}</title>
</head>
<body>{{ macro.gen_components_content(chart) }}</body>
</html>
简易图像组件Image案例
from pyecharts.components import Imageimage = Image()img_src = ("https://user-images.githubusercontent.com/19553554/""71825144-2d568180-30d6-11ea-8ee0-63c849cfd934.png"
)image.add(src = img_src,style_opts = {"width": "200px", "height": "200px", "style": "margin-top: 20px"},
)image.set_global_opts({"title":"标题", "subtitle":"副标题","title_style":"style='color:red'","subtitle_style":"style='color:green'"})image.render()
pyecharts/components/image.py模块源码
import uuidfrom jinja2 import Environmentfrom ..charts.mixins import ChartMixin
from ..commons.utils import OrderedSet
from ..globals import CurrentConfig
from ..options import ComponentTitleOpts
from ..render import engine
from ..types import Optional, Unionclass Image(ChartMixin):def __init__(self, page_title: str = CurrentConfig.PAGE_TITLE, js_host: str = ""):self.page_title = page_titleself.js_host = js_host or CurrentConfig.ONLINE_HOSTself.js_dependencies: OrderedSet = OrderedSet()self.title_opts: ComponentTitleOpts = ComponentTitleOpts()self.html_content: str = ""self._component_type: str = "image"self.chart_id: str = uuid.uuid4().hexdef add(self, src: str, style_opts: Optional[dict] = None):html_tag_args = ""html_tag_args += 'src="{}" '.format(src)if style_opts:for k, v in style_opts.items():html_tag_args += '{}="{}" '.format(k, v)self.html_content = html_tag_argsreturn selfdef set_global_opts(self, title_opts: Union[ComponentTitleOpts, dict, None] = None):self.title_opts = title_optsreturn selfdef render(self,path: str = "render.html",template_name: str = "components.html",env: Optional[Environment] = None,**kwargs,) -> str:return engine.render(self, path, template_name, env, **kwargs)def render_embed(self,template_name: str = "components.html",env: Optional[Environment] = None,**kwargs,) -> str:return engine.render_embed(self, template_name, env, **kwargs)def render_notebook(self):# only notebook env need to re-generate chart_idself.chart_id = uuid.uuid4().hexreturn engine.render_notebook(self, "nb_components.html", "nb_components.html")本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！