Pyecharts之折线图(Line)

from snapshot_selenium import snapshot as driver

from pyecharts import options as opts
from pyecharts.charts import Line
from pyecharts.render import make_snapshot

from pyecharts.globals import CurrentConfig,NotebookType

CurrentConfig.NOTEBOOK_TYPE=NotebookType.JUPYTER_LAB

一.基本概念

def add_yaxis(
# 系列名称，用于 tooltip 的显示，legend 的图例筛选。
series_name: str,

# 系列数据
y_axis: Sequence,

# 是否选中图例
is_selected: bool = True,

# 是否连接空数据，空数据使用 `None` 填充
is_connect_nones: bool = False,

# 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
xaxis_index: Optional[Numeric] = None,

# 使用的 y 轴的 index，在单个图表实例中存在多个 y 轴的时候有用。
yaxis_index: Optional[Numeric] = None,

# 系列 label 颜色
color: Optional[str] = None,

# 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
is_symbol_show: bool = True,

# 标记的图形。
# ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 
# 'diamond', 'pin', 'arrow', 'none'
# 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
symbol: Optional[str] = None,

# 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，
# 例如 [20, 10] 表示标记宽为 20，高为 10。
symbol_size: Union[Numeric, Sequence] = 4,

# 数据堆叠，同个类目轴上系列配置相同的　stack　值可以堆叠放置。
stack: Optional[str] = None,

# 是否平滑曲线
is_smooth: bool = False,

# 是否显示成阶梯图
is_step: bool = False,

# 是否开启 hover 在拐点标志上的提示动画效果。
is_hover_animation: bool = True,

# 折线图所有图形的 zlevel 值。
# zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。
# zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
z_level: types.Numeric = 0,

# 折线图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
# z 相比 zlevel 优先级更低，而且不会创建新的 Canvas。
z: types.Numeric = 0,

# 标记点配置项，参考 `series_options.MarkPointOpts`
markpoint_opts: Union[opts.MarkPointOpts, dict, None] = None,

# 标记线配置项，参考 `series_options.MarkLineOpts`
markline_opts: Union[opts.MarkLineOpts, dict, None] = None,

# 提示框组件配置项，参考 `series_options.TooltipOpts`
tooltip_opts: Union[opts.TooltipOpts, dict, None] = None,

# 标签配置项，参考 `series_options.LabelOpts`
label_opts: Union[opts.LabelOpts, dict] = opts.LabelOpts(),

# 线样式配置项，参考 `series_options.LineStyleOpts`
linestyle_opts: Union[opts.LineStyleOpts, dict] = opts.LineStyleOpts(),

# 填充区域配置项，参考 `series_options.AreaStyleOpts`
areastyle_opts: Union[opts.AreaStyleOpts, dict] = opts.AreaStyleOpts(),

# 图元样式配置项，参考 `series_options.ItemStyleOpts`
itemstyle_opts: Union[opts.ItemStyleOpts, dict, None] = None,

)

二.代码示例

import pyecharts.options as opts
from pyecharts.charts import Line
from pyecharts.faker import Faker

l = (
    Line()
    .add_xaxis(Faker.choose())
    .add_yaxis("商家A", Faker.values())
    .add_yaxis("商家B", Faker.values())
    .set_global_opts(title_opts=opts.TitleOpts(title="Line-基本示例"))
    #.render("line_base.html")
)

#make_snapshot(driver,l.render("gauge.html"),"w.png")

l.load_javascript()
l.render_notebook()

from pyecharts.charts import Bar

c = (
        Bar()
        .add_xaxis(Faker.days_attrs)
        .add_yaxis("商家A", Faker.days_values)
        .set_global_opts(
            title_opts=opts.TitleOpts(title="Bar-DataZoom（slider-水平）"),
            datazoom_opts=[opts.DataZoomOpts()],
        )
    )

c.load_javascript()
c.render_notebook()

三.表格

from pyecharts.components import Table
from pyecharts.options import ComponentTitleOpts


table = Table()

headers = ["City name", "Area", "Population", "Annual Rainfall"]
rows = [
    ["Brisbane", 5905, 1857594, 1146.4],
    ["Adelaide", 1295, 1158259, 600.5],
    ["Darwin", 112, 120900, 1714.7],
    ["Hobart", 1357, 205556, 619.5],
    ["Sydney", 2058, 4336374, 1214.8],
    ["Melbourne", 1566, 3806092, 646.9],
    ["Perth", 5386, 1554769, 869.4],
]
table.add(headers, rows)
table.set_global_opts(
    title_opts=ComponentTitleOpts(title="Table-基本示例", subtitle="我是副标题支持换行哦")
)
#table.render("table_base.html")

<pyecharts.components.table.Table at 0x1f35f360408>

table.load_javascript()
table.render_notebook()

        <style>
        .fl-table {
            margin: 20px;
            border-radius: 5px;
            font-size: 12px;
            border: none;
            border-collapse: collapse;
            max-width: 100%;
            white-space: nowrap;
            word-break: keep-all;
        }

        .fl-table th {
            text-align: left;
            font-size: 20px;
        }

        .fl-table tr {
            display: table-row;
            vertical-align: inherit;
            border-color: inherit;
        }

        .fl-table tr:hover td {
            background: #00d1b2;
            color: #F8F8F8;
        }

        .fl-table td, .fl-table th {
            border-style: none;
            border-top: 1px solid #dbdbdb;
            border-left: 1px solid #dbdbdb;
            border-bottom: 3px solid #dbdbdb;
            border-right: 1px solid #dbdbdb;
            padding: .5em .55em;
            font-size: 15px;
        }

        .fl-table td {
            border-style: none;
            font-size: 15px;
            vertical-align: center;
            border-bottom: 1px solid #dbdbdb;
            border-left: 1px solid #dbdbdb;
            border-right: 1px solid #dbdbdb;
            height: 30px;
        }

        .fl-table tr:nth-child(even) {
            background: #F8F8F8;
        }
    </style>
    <div id="7a8fe745ebbf46bc856b1a3dcd228372" class="chart-container" style="">
        <p class="title" style="font-size: 18px; font-weight:bold;" > Table-基本示例</p>
        <p class="subtitle" style="font-size: 12px;" > 我是副标题支持换行哦</p>
        <table class="fl-table">
<tr>
    <th>City name</th>
    <th>Area</th>
    <th>Population</th>
    <th>Annual Rainfall</th>
</tr>
<tr>
    <td>Brisbane</td>
    <td>5905</td>
    <td>1857594</td>
    <td>1146.4</td>
</tr>
<tr>
    <td>Adelaide</td>
    <td>1295</td>
    <td>1158259</td>
    <td>600.5</td>
</tr>
<tr>
    <td>Darwin</td>
    <td>112</td>
    <td>120900</td>
    <td>1714.7</td>
</tr>
<tr>
    <td>Hobart</td>
    <td>1357</td>
    <td>205556</td>
    <td>619.5</td>
</tr>
<tr>
    <td>Sydney</td>
    <td>2058</td>
    <td>4336374</td>
    <td>1214.8</td>
</tr>
<tr>
    <td>Melbourne</td>
    <td>1566</td>
    <td>3806092</td>
    <td>646.9</td>
</tr>
<tr>
    <td>Perth</td>
    <td>5386</td>
    <td>1554769</td>
    <td>869.4</td>
</tr>