The current version of pyecarts is 1.9.0.
components package overview
The components package is located in the top-level directory of the pyecarts package and is used to define the HTML components of pyecarts. The package structure is as follows:
├─components # HTML component package │ │ image.py # Define Image component class Image │ │ table.py # Define Table component class Table │ │ __init__.py # Refactor the namespace and promote the component class namespace to the components package namespace
At present, the HTML component classes Table and Image are incompatible with the composite chart class Page.
Image class
pyecharts/components/Image. The PY module only defines the Image component class Image.
The Image class inherits from the base class ChartMixin and is used to draw images.
The signature of the Image class is class Image(page_title: str = CurrentConfig.PAGE_TITLE, js_host: str = "").
The construction method parameters of Image class are as follows:
- js_host: the URL of the JavaScript library. String, default is' '.
- page_title: HTML page title. String. The default value is the global variable currentconfig page_title.
The properties of the Image class are as follows:
- js_host: the URL of the JavaScript library. String. The default value is the global variable currentconfig ONLINE_ HOST. The attribute value is the constructor parameter js_host and global variable currentconfig ONLINE_ The result of a or operation performed by host.
- page_title: HTML page title. character string. The value is the construction method parameter page_title value.
- js_functions: Customize JavaScript statements. Object of type OrderedSet. The default value is OrderedSet().
- js_dependencies: define JavaScript dependency libraries. Object of type OrderedSet. The default value is OrderedSet ("ecarts").
- title_opts: image component Title configuration. The object type is ComponentTitleOpts, and the default value is ComponentTitleOpts(). Title configuration includes title, subtitle and title_style,subtitle_style and other four configuration items.
- html_ Content: < img > HTML inserted in the tag. String, default is' '. be careful! The rendering method in the template is < img {{chart. html_content} / >.
- _ component_type: component type. String, the default value is "image".
- chart_id: component id. String, the default value is UUID uuid4(). hex.
The method of Image class is as follows:
- add(self, src: str, style_opts: Optional[dict] = None): add image information.
- src: the source address of the image. The type is string.
- style_opts: image style, i.e. < img > tag CSS style. The type is dictionary. The default value is None.
- set_global_opts(title_opts: Union[ComponentTitleOpts, dict, None] = None):_ The opts parameter value is set to the title of the image object_ Opts property value.
- Render: call the render function in the engine module of the render package to render the HTML document. The default rendering template is components html.
- render_embed: call render in the engine module of the render package_ The embed function outputs an HTML string. The default rendering template is components html.
- render_notebook: call render in the engine module of the render package_ The notebook function embeds the output into the notebook. The default rendering template is nb_components.html.
Image component template
macro part source code:
{% 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 source code:
{% 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>
Simple Image component Image case
from pyecharts.components import Image
image = 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":"title",
"subtitle":"Subtitle",
"title_style":"style='color:red'",
"subtitle_style":"style='color:green'"
})
image.render()
pyecharts/components/image.py module source code
import uuid
from jinja2 import Environment
from ..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, Union
class Image(ChartMixin):
def __init__(self, page_title: str = CurrentConfig.PAGE_TITLE, js_host: str = ""):
self.page_title = page_title
self.js_host = js_host or CurrentConfig.ONLINE_HOST
self.js_dependencies: OrderedSet = OrderedSet()
self.title_opts: ComponentTitleOpts = ComponentTitleOpts()
self.html_content: str = ""
self._component_type: str = "image"
self.chart_id: str = uuid.uuid4().hex
def 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_args
return self
def set_global_opts(self, title_opts: Union[ComponentTitleOpts, dict, None] = None):
self.title_opts = title_opts
return self
def 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_id
self.chart_id = uuid.uuid4().hex
return engine.render_notebook(self, "nb_components.html", "nb_components.html")