from pyecharts.charts import *
from pyecharts.components import Tablefrom pyecharts import options as opts
from pyecharts.commons.utils import JsCodeimport randomimport datetimeimport math
import numpy as np
from pyecharts.globals import CurrentConfig
CurrentConfig.ONLINE_HOST = \"https://cdn.kesci.com/lib/pyecharts_assets/\"内置主题
x_data = ['Apple', 'Huawei', 'Xiaomi', 'Oppo', 'Vivo', 'Meizu']y_data_1 = [123, 153, 89, 107, 98, 23]y_data_2 = [231, 321, 135, 341, 245, 167]'''所有内置主题'''
theme_list = ['chalk', 'dark', 'essos',
'infographic', 'light',
'macarons',
'purple-passion', 'roma', 'romantic', 'shine', 'vintage', 'walden', 'westeros', 'white',
'wonderland']
from pyecharts.globals import ThemeTypepage = Page()for t in theme_list: bar = ( Bar(
init_opts=opts.InitOpts(theme=t) )
.add_xaxis(x_data) .add_yaxis('', y_data_1) .add_yaxis('', y_data_2)
.set_global_opts(title_opts=opts.TitleOpts(\"Theme-{}\".format(t))) )
page.add(bar)
page.render_notebook()配置项
配置项概述
分为全局配置项和系列配置项两个部分;
☁ 为防⽌混淆,每个cell中只包含⼀项功能实现; 每个配置项均附上了官⽅的代码注释;
初始化配置项
'''InitOpts—初始化配置项'''class InitOpts(
# 图表画布宽度,css 长度单位。 width: str = \"900px\
# 图表画布⾼度,css 长度单位。 height: str = \"500px\
# 图表 ID,图表唯⼀标识,⽤于在多图表时区分。 chart_id: Optional[str] = None, # 渲染风格,可选 \"canvas\ # # 参考 `全局变量` 章节
renderer: str = RenderType.CANVAS, # ⽹页标题
page_title: str = \"Awesome-pyecharts\ # 图表主题
theme: str = \"white\
# 图表背景颜⾊
bg_color: Optional[str] = None,
# 远程 js host,如不设置默认为 https://assets.pyecharts.org/assets/ # 参考 `全局变量` 章节 js_host: str = \"\
# 画图动画初始化配置,参考 `global_options.AnimationOpts` animation_opts: Union[AnimationOpts, dict] = AnimationOpts(), )
)
x_data = ['Apple', 'Huawei', 'Xiaomi', 'Oppo', 'Vivo', 'Meizu']y_data_1 = [123, 153, 89, 107, 98, 23]y_data_2 = [231, 321, 135, 341, 245, 167]'''设置画布⼤⼩'''bar = (
Bar(init_opts=opts.InitOpts( width='600px', height='400px',
theme='romantic', # defualt=white# bg_color='white' ) )
.add_xaxis(x_data)
.add_yaxis('', y_data_1) .add_yaxis('', y_data_2))
bar.render_notebook()
标题配置
'''标题配置'''
class TitleOpts(
# 主标题⽂本,⽀持使⽤ \\n 换⾏。 title: Optional[str] = None, # 主标题跳转 URL 链接
title_link: Optional[str] = None,
# 主标题跳转链接⽅式 # 默认值是: blank
# 可选参数: 'self', 'blank'
# 'self' 当前窗⼝打开; 'blank' 新窗⼝打开 title_target: Optional[str] = None, # 副标题⽂本,⽀持使⽤ \\n 换⾏。 subtitle: Optional[str] = None, # 副标题跳转 URL 链接
subtitle_link: Optional[str] = None, # 副标题跳转链接⽅式 # 默认值是: blank
# 可选参数: 'self', 'blank'
# 'self' 当前窗⼝打开; 'blank' 新窗⼝打开 subtitle_target: Optional[str] = None,
# title 组件离容器左侧的距离。
# left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器⾼宽的百分⽐, # 也可以是 'left', 'center', 'right'。
# 如果 left 的值为'left', 'center', 'right',组件会根据相应的位置⾃动对齐。 pos_left: Optional[str] = None,
# title 组件离容器右侧的距离。
# right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器⾼宽的百分⽐。 pos_right: Optional[str] = None,
# title 组件离容器上侧的距离。
# top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器⾼宽的百分⽐, # 也可以是 'top', 'middle', 'bottom'。
# 如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置⾃动对齐。 pos_top: Optional[str] = None,
# title 组件离容器下侧的距离。
# bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器⾼宽的百分⽐。 pos_bottom: Optional[str] = None,
# 标题内边距,单位px,默认各⽅向内边距为5,接受数组分别设定上右下左边距。 # // 设置内边距为 5 # padding: 5
# // 设置上下的内边距为 5,左右的内边距为 10 # padding: [5, 10]
# // 分别设置四个⽅向的内边距 # padding: [ # 5, // 上 # 10, // 右 # 5, // 下 # 10, // 左 # ]
padding: Union[Sequence, Numeric] = 5, # 主副标题之间的间距。 item_gap: Numeric = 10,
# 主标题字体样式配置项,参考 `series_options.TextStyleOpts` title_textstyle_opts: Union[TextStyleOpts, dict, None] = None,
# 副标题字体样式配置项,参考 `series_options.TextStyleOpts` subtitle_textstyle_opts: Union[TextStyleOpts, dict, None] = None, )
x_data = ['Apple', 'Huawei', 'Xiaomi', 'Oppo', 'Vivo', 'Meizu']y_data_1 = [123, 153, 89, 107, 98, 23]y_data_2 = [231, 321, 135, 341, 245, 167]'''主标题与副标题'''bar = ( Bar()
.add_xaxis(x_data)
.add_yaxis('', y_data_1) .add_yaxis('', y_data_2) .set_global_opts(
title_opts=opts.TitleOpts( title='主标题',
title_link='https://www.google.com', title_textstyle_opts=opts.TextStyleOpts( color='red' ),
subtitle='副标题', pos_left='center', pos_top='10%',
subtitle_textstyle_opts=opts.TextStyleOpts( color='green' ) ) ))
bar.render_notebook()
图例类型
class LegendOpts(
# 图例的类型。可选值:
# 'plain':普通图例。缺省就是普通图例。
# 'scroll':可滚动翻页的图例。当图例数量较多时可以使⽤。 type_: Optional[str] = None,
# 图例选择的模式,控制是否可以通过点击图例改变系列的显⽰状态。默认开启图例选择,可以设成 false 关闭 # 除此之外也可以设成 'single' 或者 'multiple' 使⽤单选或者多选模式。 selected_mode: Union[str, bool, None] = None, # 是否显⽰图例组件 is_show: bool = True,
# 图例组件离容器左侧的距离。
# left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器⾼宽的百分⽐, # 也可以是 'left', 'center', 'right'。
# 如果 left 的值为'left', 'center', 'right',组件会根据相应的位置⾃动对齐。 pos_left: Union[str, Numeric, None] = None,
# 图例组件离容器右侧的距离。
# right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器⾼宽的百分⽐。 pos_right: Union[str, Numeric, None] = None,
# 图例组件离容器上侧的距离。
# top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器⾼宽的百分⽐, # 也可以是 'top', 'middle', 'bottom'。
# 如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置⾃动对齐。 pos_top: Union[str, Numeric, None] = None,
# 图例组件离容器下侧的距离。
# bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器⾼宽的百分⽐。 pos_bottom: Union[str, Numeric, None] = None, # 图例列表的布局朝向。可选:'horizontal', 'vertical' orient: Optional[str] = None,
# 图例标记和⽂本的对齐。默认⾃动(auto) # 根据组件的位置和 orient 决定
# 当组件的 left 值为 'right' 以及纵向布局(orient 为 'vertical')的时候为右对齐,即为 'right'。 # 可选参数: `auto`, `left`, `right` align: Optional[str] = None,
# 图例内边距,单位px,默认各⽅向内边距为5 padding: int = 5,
# 图例每项之间的间隔。横向布局时为⽔平间隔,纵向布局时为纵向间隔。 # 默认间隔为 10 item_gap: int = 10,
# 图例标记的图形宽度。默认宽度为 25 item_width: int = 25,
# 图例标记的图形⾼度。默认⾼度为 14 item_height: int = 14,
item_height: int = 14,
# 图例关闭时的颜⾊。默认是 #ccc inactive_color: Optional[str] = None,
# 图例组件字体样式,参考 `series_options.TextStyleOpts` textstyle_opts: Union[TextStyleOpts, dict, None] = None,
# 图例项的 icon。
# ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' # 可以通过 'image://url' 设置为图⽚,其中 URL 为图⽚的链接,或者 dataURI。 # 可以通过 'path://' 将图标设置为任意的⽮量路径。 legend_icon: Optional[str] = None, )
x_data = ['Apple', 'Huawei', 'Xiaomi', 'Oppo', 'Vivo', 'Meizu']y_data_1 = [123, 153, 89, 107, 98, 23]y_data_2 = [231, 321, 135, 341, 245, 167]'''图例开关'''bar = ( Bar()
.add_xaxis(x_data)
.add_yaxis('class', y_data_1) .add_yaxis('class 1', y_data_2) .set_global_opts(
legend_opts=opts.LegendOpts( is_show=True, pos_left='right', pos_top='80px', orient='vertical', align='left', item_gap=40,
textstyle_opts=opts.TextStyleOpts( color='rgb(231, 72, 73)' ),
legend_icon='circle' ) ))
bar.render_notebook()
坐标轴配置项
'''AxisOpts-坐标轴配置项'''class AxisOpts(
# 坐标轴类型。可选:
# 'value': 数值轴,适⽤于连续数据。
# 'category': 类⽬轴,适⽤于离散的类⽬数据,为该类型时必须通过 data 设置类⽬数据。
# 'time': 时间轴,适⽤于连续的时序数据,与数值轴相⽐时间轴带有时间的格式化,在刻度计算上也有所不同, # 例如会根据跨度的范围来决定使⽤⽉,星期,⽇还是⼩时范围的刻度。 # 'log' 对数轴。适⽤于对数数据。 type_: Optional[str] = None, # 坐标轴名称。
name: Optional[str] = None, # 是否显⽰ x 轴。 is_show: bool = True,
# 只在数值轴中(type: 'value')有效。
# 是否是脱离 0 值⽐例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中⽐较有⽤。 # 在设置 min 和 max 之后该配置项⽆效。 is_scale: bool = False, # 是否反向坐标轴。
is_inverse: bool = False,
# 坐标轴名称显⽰位置。可选: # 'start', 'middle' 或者 'center','end' name_location: str = \"end\ # 坐标轴名称与轴线之间的距离。 name_gap: Numeric = 15,
# 坐标轴名字旋转,⾓度值。
name_rotate: Optional[Numeric] = None,
# 强制设置坐标轴分割间隔。
# 因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能⽆法达到想要的效果, # 这时候可以使⽤ interval 配合 min、max 强制设定刻度划分,⼀般不建议使⽤。
# ⽆法在类⽬轴中使⽤。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。 interval: Optional[Numeric] = None,
# x 轴所在的 grid 的索引,默认位于第⼀个 grid。 grid_index: Numeric = 0, # x 轴的位置。可选: # 'top', 'bottom'
# 默认 grid 中的第⼀个 x 轴在 grid 的下⽅('bottom'),第⼆个 x 轴视第⼀个 x 轴的位置放在另⼀侧。
# 默认 grid 中的第⼀个 x 轴在 grid 的下⽅('bottom'),第⼆个 x 轴视第⼀个 x 轴的位置放在另⼀侧。 position: Optional[str] = None,
# Y 轴相对于默认位置的偏移,在相同的 position 上有多个 Y 轴的时候有⽤。 offset: Numeric = 0,
# 坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显⽰的段数会在这个基础上根据分割后坐标轴刻度显⽰的易读程度作调整。 # 默认值是 5
split_number: Numeric = 5,
# 坐标轴两边留⽩策略,类⽬轴和⾮类⽬轴的设置和表现不⼀样。
# 类⽬轴中 boundaryGap 可以配置为 true 和 false。默认为 true,这时候刻度只是作为分隔线, # 标签和数据点都会在两个刻度之间的带(band)中间。
# ⾮类⽬轴,包括时间,数值,对数轴,boundaryGap是⼀个两个值的数组,分别表⽰数据最⼩值和最⼤值的延伸范围 # 可以直接设置数值或者相对的百分⽐,在设置 min 和 max 后⽆效。 ⽰例:boundaryGap: ['20%', '20%'] boundary_gap: Union[str, bool, None] = None,
# 坐标轴刻度最⼩值。
# 可以设置成特殊值 'dataMin',此时取数据在该轴上的最⼩值作为最⼩刻度。 # 不设置时会⾃动计算最⼩值保证坐标轴刻度的均匀分布。
# 在类⽬轴中,也可以设置为类⽬的序数(如类⽬轴 data: ['类A', '类B', '类C'] 中,序数 2 表⽰ '类C'。 # 也可以设置为负数,如 -3)。
min_: Union[Numeric, str, None] = None,
# 坐标轴刻度最⼤值。
# 可以设置成特殊值 'dataMax',此时取数据在该轴上的最⼤值作为最⼤刻度。 # 不设置时会⾃动计算最⼤值保证坐标轴刻度的均匀分布。
# 在类⽬轴中,也可以设置为类⽬的序数(如类⽬轴 data: ['类A', '类B', '类C'] 中,序数 2 表⽰ '类C'。 # 也可以设置为负数,如 -3)。
max_: Union[Numeric, str, None] = None,
# ⾃动计算的坐标轴最⼩间隔⼤⼩。
# 例如可以设置成1保证坐标轴分割刻度显⽰成整数。 # 默认值是 0
min_interval: Numeric = 0,
# ⾃动计算的坐标轴最⼤间隔⼤⼩。
# 例如,在时间轴((type: 'time'))可以设置成 3600 * 24 * 1000 保证坐标轴分割刻度最⼤为⼀天。 max_interval: Optional[Numeric] = None,
# 坐标轴刻度线配置项,参考 `global_options.AxisLineOpts` axisline_opts: Union[AxisLineOpts, dict, None] = None, # 坐标轴刻度配置项,参考 `global_options.AxisTickOpts` axistick_opts: Union[AxisTickOpts, dict, None] = None, # 坐标轴标签配置项,参考 `series_options.LabelOpts` axislabel_opts: Union[LabelOpts, dict, None] = None,
# 坐标轴指⽰器配置项,参考 `global_options.AxisPointerOpts` axispointer_opts: Union[AxisPointerOpts, dict, None] = None, # 坐标轴名称的⽂字样式,参考 `series_options.TextStyleOpts` name_textstyle_opts: Union[TextStyleOpts, dict, None] = None, # 分割区域配置项,参考 `series_options.SplitAreaOpts` splitarea_opts: Union[SplitAreaOpts, dict, None] = None, # 分割线配置项,参考 `series_options.SplitLineOpts`
splitline_opts: Union[SplitLineOpts, dict] = SplitLineOpts(), )
x_data = [random.randint(0, 100) for _ in range(20)]y_data = [random.randint(0, 100) for _ in range(20)]'''x轴设为数值类型'''scatter = ( Scatter()
.add_xaxis(x_data) .add_yaxis('', y_data) .set_global_opts(
xaxis_opts=opts.AxisOpts( type_='value',
# is_inverse=True, name='销量/个', name_rotate=45,
),
yaxis_opts=opts.AxisOpts( name='销售/万元',# min_=-150, max_=150,
name_location='end', name_gap=20,# offset=50,
max_interval=20,
axisline_opts=opts.AxisLineOpts( is_show=True, symbol='arrow' ) )
) ))
scatter.render_notebook()
视觉映射配置项
VisualMapOpts-视觉映射配置项class VisualMapOpts(
# 是否显⽰视觉映射配置 is_show: bool = True,
# 映射过渡类型,可选,\"color\ type_: str = \"color\
# 指定 visualMapPiecewise 组件的最⼩值。 min_: Union[int, float] = 0,
# 指定 visualMapPiecewise 组件的最⼤值。 max_: Union[int, float] = 100, # 两端的⽂本,如['High', 'Low']。 range_text: Union[list, tuple] = None, # visualMap 组件过渡颜⾊
range_color: Union[Sequence[str]] = None, # visualMap 组件过渡 symbol ⼤⼩
range_size: Union[Sequence[int]] = None,
# visualMap 图元以及其附属物(如⽂字标签)的透明度。 range_opacity: Optional[Numeric] = None,
# 如何放置 visualMap 组件,⽔平('horizontal')或者竖直('vertical')。 orient: str = \"vertical\
# visualMap 组件离容器左侧的距离。
# left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器⾼宽的百分⽐, # 也可以是 'left', 'center', 'right'。
# 如果 left 的值为'left', 'center', 'right',组件会根据相应的位置⾃动对齐。 pos_left: Optional[str] = None,
# visualMap 组件离容器右侧的距离。
# right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器⾼宽的百分⽐。 pos_right: Optional[str] = None,
# visualMap 组件离容器上侧的距离。
# top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器⾼宽的百分⽐, # 也可以是 'top', 'middle', 'bottom'。
# 如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置⾃动对齐。 pos_top: Optional[str] = None,
# visualMap 组件离容器下侧的距离。
# bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器⾼宽的百分⽐。 pos_bottom: Optional[str] = None,
# 对于连续型数据,⾃动平均切分成⼏段。默认为5段。连续数据的范围需要 max 和 min 来指定 split_number: int = 5,
# 指定取哪个系列的数据,默认取所有系列。
series_index: Union[Numeric, Sequence, None] = None, # 组件映射维度
dimension: Optional[Numeric] = None,
# 是否显⽰拖拽⽤的⼿柄(⼿柄能拖拽调整选中范围)。 is_calculable: bool = True, # 是否为分段型
is_piecewise: bool = False, # 是否反转 visualMap 组件 is_inverse: bool = False,
# ⾃定义的每⼀段的范围,以及每⼀段的⽂字,以及每⼀段的特别的样式。例如: # pieces: [
# {\"min\": 1500}, // 不指定 max,表⽰ max 为⽆限⼤(Infinity)。 # {\"min\": 900, \"max\": 1500}, # {\"min\": 310, \"max\": 1000}, # {\"min\": 200, \"max\": 300},
# {\"min\": 10, \"max\": 200, \"label\": '10 到 200(⾃定义label)'},
# {\"value\": 123, \"label\": '123(⾃定义特殊颜⾊)', \"color\": 'grey'}, //表⽰ value 等于 123 的情况 # {\"max\": 5} // 不指定 min,表⽰ min 为⽆限⼤(-Infinity)。 # ]
pieces: Optional[Sequence] = None,
# 定义 在选中范围外 的视觉元素。(⽤户可以和 visualMap 组件交互,⽤⿏标或触摸选择范围) # 可选的视觉元素有: # symbol: 图元的图形类别。
# symbol: 图元的图形类别。 # symbolSize: 图元的⼤⼩。 # color: 图元的颜⾊。
# colorAlpha: 图元的颜⾊的透明度。
# opacity: 图元以及其附属物(如⽂字标签)的透明度。 # colorLightness: 颜⾊的明暗度,参见 HSL。 # colorSaturation: 颜⾊的饱和度,参见 HSL。 # colorHue: 颜⾊的⾊调,参见 HSL。
out_of_range: Optional[Sequence] = None, # 图形的宽度,即长条的宽度。 item_width: int = 0,
# 图形的⾼度,即长条的⾼度。 item_height: int = 0,
# visualMap 组件的背景⾊。
background_color: Optional[str] = None, # visualMap 组件的边框颜⾊。 border_color: Optional[str] = None, # visualMap 边框线宽,单位px。 border_width: int = 0,
# ⽂字样式配置项,参考 `series_options.TextStyleOpts` textstyle_opts: Union[TextStyleOpts, dict, None] = None, )
data = [[i, j, random.randint(0, 100)] for i in range(24) for j in range(7)]hour_list = [str(i) for i in range(24)]
week_list = ['周⽇', '周⼀', '周⼆', '周三', '周四', '周五', '周六']'''⾃定义颜⾊分段'''heat = (
HeatMap()
.add_xaxis(hour_list)
.add_yaxis('', week_list, data) .set_global_opts(
visualmap_opts=opts.VisualMapOpts( is_show=True,
is_piecewise=True, pieces = [ {'max':20},
{'min':20, 'max':50}, {'min':50, 'max':99},
{'value':100, 'color':'red'} ] ) ))
heat.render_notebook()
x_data = [random.randint(0, 100) for _ in range(20)]y_data = [random.randint(0, 100) for _ in range(20)]scatter = ( Scatter()
.add_xaxis(x_data) .add_yaxis('', y_data) .set_global_opts(
xaxis_opts=opts.AxisOpts( type_='value',
# is_inverse=True, name='销量/个', name_rotate=45,
),
yaxis_opts=opts.AxisOpts( name='销售/万元',# min_=-150, max_=150,
name_location='end', name_gap=20,# offset=50,
max_interval=20,
axisline_opts=opts.AxisLineOpts( is_show=True, symbol='arrow' ) ),
visualmap_opts=opts.VisualMapOpts( is_show=True, type_='size',
range_size=[0, 50], orient='vertical', is_piecewise=True, split_number=4, pos_right='right',
pos_right='right', pos_top='top', ) ))
scatter.render_notebook()
坐标轴缩放
'''坐标轴缩放'''
class DataZoomOpts(
# 是否显⽰ 组件。如果设置为 false,不会显⽰,但是数据过滤的功能还存在。 is_show: bool = True,
# 组件类型,可选 \"slider\ type_: str = \"slider\
# 拖动时,是否实时更新系列的视图。如果设置为 false,则只在拖拽结束的时候更新。 is_realtime: bool = True,
# 数据窗⼝范围的起始百分⽐。范围是:0 ~ 100。表⽰ 0% ~ 100%。 range_start: Numeric = 20,
# 数据窗⼝范围的结束百分⽐。范围是:0 ~ 100 range_end: Numeric = 80,
# 数据窗⼝范围的起始数值。如果设置了 start 则 startValue 失效。 start_value: Union[int, str, None] = None,
# 数据窗⼝范围的结束数值。如果设置了 end 则 endValue 失效。 end_value: Union[int, str, None] = None,
# 布局⽅式是横还是竖。不仅是布局⽅式,对于直⾓坐标系⽽⾔,也决定了,缺省情况控制横向数轴还是纵向数轴 # 可选值为:'horizontal', 'vertical' orient: str = \"horizontal\
# 设置 dataZoom-inside 组件控制的 x 轴(即 xAxis,是直⾓坐标系中的概念,参见 grid)。
# 不指定时,当 dataZoom-inside.orient 为 'horizontal'时,默认控制和 dataZoom 平⾏的第⼀个 xAxis # 如果是 number 表⽰控制⼀个轴,如果是 Array 表⽰控制多个轴。 xaxis_index: Union[int, Sequence[int], None] = None,
# 设置 dataZoom-inside 组件控制的 y 轴(即 yAxis,是直⾓坐标系中的概念,参见 grid)。
# 不指定时,当 dataZoom-inside.orient 为 'horizontal'时,默认控制和 dataZoom 平⾏的第⼀个 yAxis # 如果是 number 表⽰控制⼀个轴,如果是 Array 表⽰控制多个轴。 yaxis_index: Union[int, Sequence[int], None] = None,
# 是否锁定选择区域(或叫做数据窗⼝)的⼤⼩。
# 如果设置为 true 则锁定选择区域的⼤⼩,也就是说,只能平移,不能缩放。 is_zoom_lock: bool = False,
# dataZoom-slider 组件离容器左侧的距离。
# left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器⾼宽的百分⽐, # 也可以是 'left', 'center', 'right'。
# 如果 left 的值为 'left', 'center', 'right',组件会根据相应的位置⾃动对齐。 pos_left: Optional[str] = None,
# dataZoom-slider 组件离容器上侧的距离。
# top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器⾼宽的百分⽐, # 也可以是 'top', 'middle', 'bottom'。
# 如果 top 的值为 'top', 'middle', 'bottom',组件会根据相应的位置⾃动对齐。 pos_top: Optional[str] = None,
# dataZoom-slider 组件离容器右侧的距离。
# right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器⾼宽的百分⽐。 # 默认⾃适应。
pos_right: Optional[str] = None,
# dataZoom-slider组件离容器下侧的距离。
# bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器⾼宽的百分⽐。 # 默认⾃适应。
pos_bottom: Optional[str] = None, )
x_data = list(range(1990,2020))
y_data_1 = [random.randint(0, 100) for _ in x_data]y_data_2 = [random.randint(0, 100) for _ in x_data]'''设置起始百分⽐'''bar = ( Bar()
.add_xaxis(x_data)
.add_yaxis('', y_data_1) .add_yaxis('', y_data_2) .set_global_opts(
datazoom_opts=opts.DataZoomOpts( range_start=50, range_end=80, type_='slider',
)
) ))
bar.render_notebook()
x_data = list(range(1990,2020))
y_data_1 = [random.randint(0, 100) for _ in x_data]y_data_2 = [random.randint(0, 100) for _ in x_data]'''设置起始百分⽐'''bar = ( Bar()
.add_xaxis(x_data)
.add_yaxis('', y_data_1) .add_yaxis('', y_data_2) .set_global_opts(
datazoom_opts=opts.DataZoomOpts( orient='vertical' ) ))
bar.render_notebook()
图元样式配置项
'''图元样式配置项'''class ItemStyleOpts( # 图形的颜⾊。
# 颜⾊可以使⽤ RGB 表⽰,⽐如 'rgb(128, 128, 128)',如果想要加上 alpha 通道表⽰不透明度, # 可以使⽤ RGBA,⽐如 'rgba(128, 128, 128, 0.5)',也可以使⽤⼗六进制格式,⽐如 '#ccc'。 # 除了纯⾊之外颜⾊也⽀持渐变⾊和纹理填充 #
# 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分⽐, # 如果 globalCoord 为 `true`,则该四个值是绝对的像素位置 # color: {
# type: 'linear', # x: 0, # y: 0, # x2: 0, # y2: 1,
# colorStops: [{
# offset: 0, color: 'red' // 0% 处的颜⾊ # }, {
# offset: 1, color: 'blue' // 100% 处的颜⾊ # }],
# global: false // 缺省为 false # } #
# 径向渐变,前三个参数分别是圆⼼ x, y 和半径,取值同线性渐变 # color: {
# type: 'radial', # x: 0.5, # y: 0.5, # r: 0.5,
# colorStops: [{
# offset: 0, color: 'red' // 0% 处的颜⾊ # }, {
# offset: 1, color: 'blue' // 100% 处的颜⾊ # }],
# global: false // 缺省为 false # } #
# 纹理填充 # color: {
# image: imageDom, // ⽀持为 HTMLImageElement, HTMLCanvasElement,不⽀持路径字符串 # repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat' # }
color: Optional[str] = None, # 阴线 图形的颜⾊。
color0: Optional[str] = None,
# 图形的描边颜⾊。⽀持的颜⾊格式同 color,不⽀持回调函数。 border_color: Optional[str] = None, # 阴线 图形的描边颜⾊。
border_color0: Optional[str] = None,
# 图形透明度。⽀持从 0 到 1 的数字,为 0 时不绘制该图形。 opacity: Optional[Numeric] = None, )
x_data = ['Apple', 'Huawei', 'Xiaomi', 'Oppo', 'Vivo', 'Meizu']y_data = [123, 153, 89, 107, 98, 23]'''设置全局透明度'''bar = ( Bar()
.add_xaxis(x_data) .add_yaxis('', y_data)
.add_yaxis('', y_data) .set_series_opts(
itemstyle_opts=opts.ItemStyleOpts( color='rgb(223, 72, 73)', opacity=0.8,
border_color='rgb(40, 40, 40)' ) ))
bar.render_notebook()
字体设置
'''字体设置'''
class TextStyleOpts( # ⽂字颜⾊。
color: Optional[str] = None, # ⽂字字体的风格
# 可选:'normal','italic','oblique' font_style: Optional[str] = None, # 主标题⽂字字体的粗细,可选: # 'normal','bold','bolder','lighter' font_weight: Optional[str] = None,
# ⽂字的字体系列
# 还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ... font_family: Optional[str] = None, # ⽂字的字体⼤⼩
font_size: Optional[Numeric] = None, # ⽂字⽔平对齐⽅式,默认⾃动 align: Optional[str] = None, # ⽂字垂直对齐⽅式,默认⾃动 vertical_align: Optional[str] = None, # ⾏⾼
line_height: Optional[str] = None,
# ⽂字块背景⾊。可以是直接的颜⾊值,例如:'#123234', 'red', 'rgba(0,23,11,0.3)' background_color: Optional[str] = None, # ⽂字块边框颜⾊
border_color: Optional[str] = None, # ⽂字块边框宽度
border_width: Optional[Numeric] = None,
# ⽂字块的圆⾓
border_radius: Union[Numeric, Sequence, None] = None, # ⽂字块的内边距
# 例如 padding: [3, 4, 5, 6]:表⽰ [上, 右, 下, 左] 的边距 # 例如 padding: 4:表⽰ padding: [4, 4, 4, 4] # 例如 padding: [3, 4]:表⽰ padding: [3, 4, 3, 4]
padding: Union[Numeric, Sequence, None] = None, # ⽂字块的背景阴影颜⾊
shadow_color: Optional[str] = None, # ⽂字块的背景阴影长度
shadow_blur: Optional[Numeric] = None, # ⽂字块的宽度
width: Optional[str] = None, # ⽂字块的⾼度
height: Optional[str] = None,
# 在 rich ⾥⾯,可以⾃定义富⽂本样式。利⽤富⽂本样式,可以在标签中做出⾮常丰富的效果
# 具体配置可以参考⼀下 https://www.echartsjs.com/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE rich: Optional[dict] = None, )
x_data = ['Apple', 'Huawei', 'Xiaomi', 'Oppo', 'Vivo', 'Meizu']y_data_1 = [123, 153, 89, 107, 98, 23]y_data_2 = [231, 321, 135, 341, 245, 167]
bar = ( Bar()
.add_xaxis(x_data)
.add_yaxis('', y_data_1) .add_yaxis('', y_data_2) .set_global_opts(
title_opts=opts.TitleOpts( title='主标题',
title='主标题',
title_textstyle_opts=opts.TextStyleOpts( color='red', # 颜⾊
font_style='italic', # 风格 font_weight='lighter', # 粗细 font_size=30, # ⼤⼩ ), ) ))
bar.render_notebook()
rich_text = {
\"a\": {\"color\": \"#999\ \"abg\": {
\"backgroundColor\": \"#e3e3e3\ \"width\": \"100%\ \"align\": \"right\ \"height\": 22,
\"borderRadius\": [4, 4, 0, 0], }, \"hr\": {
\"borderColor\": \"#aaa\ \"width\": \"100%\ \"borderWidth\": 0.5, \"height\": 0, },
\"b\": {\"fontSize\": 16, \"lineHeight\": 33}, \"per\": {
\"color\": \"#eee\
\"backgroundColor\": \"#334455\ \"padding\": [2, 4], \"borderRadius\": 2, },}
cate = ['Apple', 'Huawei', 'Xiaomi', 'Oppo', 'Vivo', 'Meizu']data = [123, 153, 89, 107, 98, 23]
'''富⽂本'''pie = ( Pie()
.add('销售额', [list(z) for z in zip(cate, data)], label_opts=opts.LabelOpts(position='outsiede',
formatter=\"{a|{a}}{abg|}\\n{hr|}\\n {b|{b}: }{c} {per|{d}%} \ rich=rich_text)))
pie.render_notebook()
标签配置项
'''标签配置项'''class LabelOpts( # 是否显⽰标签。 is_show: bool = True,
# 标签的位置。可选
# 'top','left','right','bottom','inside','insideLeft','insideRight' # 'insideTop','insideBottom', 'insideTopLeft','insideBottomLeft' # 'insideTopRight','insideBottomRight' position: Union[str, Sequence] = \"top\
# ⽂字的颜⾊。
# 如果设置为 'auto',则为视觉映射得到的颜⾊,如系列⾊。 color: Optional[str] = None, # ⽂字的字体⼤⼩
font_size: Numeric = 12, # ⽂字字体的风格,可选: # 'normal','italic','oblique' font_style: Optional[str] = None, # ⽂字字体的粗细,可选:
# 'normal','bold','bolder','lighter' font_weight: Optional[str] = None,
# ⽂字的字体系列
# 还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ... font_family: Optional[str] = None,
# 标签旋转。从 -90 度到 90 度。正值是逆时针。 rotate: Optional[Numeric] = None, # 刻度标签与轴线之间的距离。 margin: Optional[Numeric] = 8,
# 坐标轴刻度标签的显⽰间隔,在类⽬轴中有效。
# 坐标轴刻度标签的显⽰间隔,在类⽬轴中有效。 # 默认会采⽤标签不重叠的策略间隔显⽰标签。 # 可以设置成 0 强制显⽰所有标签。
# 如果设置为 1,表⽰『隔⼀个标签显⽰⼀个标签』,如果值为 2,表⽰隔两个标签显⽰⼀个标签,以此类推。 # 可以⽤数值表⽰间隔的数据,也可以通过回调函数控制。回调函数格式如下: # (index:number, value: string) => boolean
# 第⼀个参数是类⽬的 index,第⼆个值是类⽬名称,如果跳过则返回 false。 interval: Union[Numeric, str, None]= None, # ⽂字⽔平对齐⽅式,默认⾃动。可选: # 'left','center','right'
horizontal_align: Optional[str] = None, # ⽂字垂直对齐⽅式,默认⾃动。可选: # 'top','middle','bottom'
vertical_align: Optional[str] = None,
# 标签内容格式器,⽀持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均⽀持⽤ \\n 换⾏。 # 模板变量有 {a}, {b},{c},{d},{e},分别表⽰系列名,数据名,数据值等。
# 在 trigger 为 'axis' 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后⾯加索引的⽅式表⽰系列的索引。 # 不同图表类型下的 {a},{b},{c},{d} 含义不⼀样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为: # 折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类⽬值),{c}(数值), {d}(⽆) # 散点图(⽓泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(⽆) # 地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(⽆)
# 饼图、仪表盘、漏⽃图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分⽐) # ⽰例:formatter: '{b}: {@score}' #
# 回调函数,回调函数格式:
# (params: Object|Array) => string
# 参数 params 是 formatter 需要的单个数据集。格式如下: # {
# componentType: 'series', # // 系列类型
# seriesType: string,
# // 系列在传⼊的 option.series 中的 index # seriesIndex: number, # // 系列名称
# seriesName: string, # // 数据名,类⽬名 # name: string,
# // 数据在传⼊的 data 数组中的 index # dataIndex: number, # // 传⼊的原始数据项 # data: Object, # // 传⼊的数据值
# value: number|Array, # // 数据图形的颜⾊ # color: string, # }
formatter: Optional[str] = None,
# 在 rich ⾥⾯,可以⾃定义富⽂本样式。利⽤富⽂本样式,可以在标签中做出⾮常丰富的效果
# 具体配置可以参考⼀下 https://www.echartsjs.com/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE rich: Optional[dict] = None, )
x_data = ['Apple', 'Huawei', 'Xiaomi', 'Oppo', 'Vivo', 'Meizu']y_data_1 = [123, 153, 89, 107, 98, 23]y_data_2 = [231, 321, 135, 341, 245, 167]# 标题样式配置bar = ( Bar()
.add_xaxis(x_data)
.add_yaxis('', y_data_1) .add_yaxis('', y_data_2) .set_series_opts(
label_opts=opts.LabelOpts( is_show=True, font_size=18,
position='inside', # 标签的位置 rotate=90 # 旋转 -90 到 90 ) ))
bar.render_notebook()
线样式配置项
'''线样式配置项'''
class LineStyleOpts( # 是否显⽰
is_show: bool = True, # 线宽。
width: Numeric = 1,
# 图形透明度。⽀持从 0 到 1 的数字,为 0 时不绘制该图形。
# 图形透明度。⽀持从 0 到 1 的数字,为 0 时不绘制该图形。 opacity: Numeric = 1,
# 线的弯曲度,0 表⽰完全不弯曲 curve: Numeric = 0, # 线的类型。可选:
# 'solid', 'dashed', 'dotted' type_: str = \"solid\
# 线的颜⾊。
# 颜⾊可以使⽤ RGB 表⽰,⽐如 'rgb(128, 128, 128)',如果想要加上 alpha 通道表⽰不透明度, # 可以使⽤ RGBA,⽐如 'rgba(128, 128, 128, 0.5)',也可以使⽤⼗六进制格式,⽐如 '#ccc'。 # 除了纯⾊之外颜⾊也⽀持渐变⾊和纹理填充 #
# 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分⽐, # 如果 globalCoord 为 `true`,则该四个值是绝对的像素位置 # color: {
# type: 'linear', # x: 0, # y: 0, # x2: 0, # y2: 1,
# colorStops: [{
# offset: 0, color: 'red' // 0% 处的颜⾊ # }, {
# offset: 1, color: 'blue' // 100% 处的颜⾊ # }],
# global: false // 缺省为 false # } #
# 径向渐变,前三个参数分别是圆⼼ x, y 和半径,取值同线性渐变 # color: {
# type: 'radial', # x: 0.5, # y: 0.5, # r: 0.5,
# colorStops: [{
# offset: 0, color: 'red' // 0% 处的颜⾊ # }, {
# offset: 1, color: 'blue' // 100% 处的颜⾊ # }],
# global: false // 缺省为 false # } #
# 纹理填充 # color: {
# image: imageDom, // ⽀持为 HTMLImageElement, HTMLCanvasElement,不⽀持路径字符串 # repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat' # }
color: Union[str, Sequence, None] = None, )
x_data = ['Apple', 'Huawei', 'Xiaomi', 'Oppo', 'Vivo', 'Meizu']y_data_1 = [123, 153, 89, 107, 98, 23]y_data_2 = [231, 321, 135, 341, 245, 167]y_data_3 = [223, 453, 189, 207, 221, 123]'''粗细'''line = ( Line()
.add_xaxis(x_data) .add_yaxis( 'width1', y_data_1,
linestyle_opts=opts.LineStyleOpts(width=5) )
.add_yaxis( 'width2', y_data_2,
linestyle_opts=opts.LineStyleOpts(width=1) )
.add_yaxis( 'dashed', y_data_3,
linestyle_opts=opts.LineStyleOpts( type_='dashed' # solid, dotted ) ))
line.render_notebook()
分割线配置项
'''分割线配置项'''
class SplitLineOpts( # 是否显⽰分割线
is_show: bool = False,
# 线风格配置项,参考 `series_options.SplitLineOpts`
# 线风格配置项,参考 `series_options.SplitLineOpts` linestyle_opts: LineStyleOpts = LineStyleOpts() )
x_data = ['Apple', 'Huawei', 'Xiaomi', 'Oppo', 'Vivo', 'Meizu']y_data = [123, 153, 89, 107, 98, 23]line = ( Line()
.add_xaxis(x_data) .add_yaxis('', y_data) .set_global_opts(
xaxis_opts=opts.AxisOpts(
splitline_opts = opts.SplitLineOpts( is_show=True ) ),
# yaxis_opts=opts.AxisOpts(
# splitline_opts = opts.SplitLineOpts(# is_show=True# )# ) ))
line.render_notebook()
涟漪特效配置项
'''涟漪特效配置项'''class EffectOpts( # 是否显⽰特效。 is_show: bool = True,
# 波纹的绘制⽅式,可选 'stroke' 和 'fill',Scatter 类型有效。 brush_type: str = \"stroke\
# 动画中波纹的最⼤缩放⽐例,Scatter 类型有效。 scale: Numeric = 2.5,
# 动画的周期,秒数,Scatter 类型有效。 period: Numeric = 4, # 特效标记的颜⾊
color: Optional[str] = None,
# 特效图形的标记。
# ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', # 'diamond', 'pin', 'arrow', 'none'
# 可以通过 'image://url' 设置为图⽚,其中 URL 为图⽚的链接,或者 dataURI。 symbol: Optional[str] = None,
# 特效标记的⼤⼩,可以设置成诸如 10 这样单⼀的数字,也可以⽤数组分开表⽰⾼和宽, # 例如 [20, 10] 表⽰标记宽为 20,⾼为 10。 symbol_size: Optional[Numeric] = None,
# 特效尾迹的长度。取从 0 到 1 的值,数值越⼤尾迹越长。Geo 图设置 Lines 类型时有效。 trail_length: Optional[Numeric] = None, )
x_data = ['Apple', 'Huawei', 'Xiaomi', 'Oppo', 'Vivo', 'Meizu']y_data_1 = [123, 153, 89, 107, 98, 23]y_data_2 = [231, 321, 135, 341, 245, 167]effectscatter = ( EffectScatter()
.add_xaxis(x_data) .add_yaxis( 'stroke', y_data_1,
effect_opts=opts.EffectOpts( brush_type='stroke', ) )
.add_yaxis( 'fill',
y_data_2,
effect_opts=opts.EffectOpts( brush_type='fill', scale=10, period=10, ) ))
effectscatter.render_notebook()
data = [['北京', '上海'], ['武汉', '深圳'], ['拉萨', '北京'], ['深圳', '上海']]geo = ( Geo()
.add_schema(maptype='china') .add(
.add( '', data,
type_='lines',
effect_opts=opts.EffectOpts( symbol='diamond', # 形状 symbol_size=10 # ⼤⼩ ) ))
geo.render_notebook()
标记点数据项
'''标记点数据项'''
class MarkPointItem( # 标注名称。
name: Optional[str] = None,
# 特殊的标注类型,⽤于标注最⼤值最⼩值等。可选: # 'min' 最⼤值。 # 'max' 最⼤值。 # 'average' 平均值。
type_: Optional[str] = None,
# 在使⽤ type 时有效,⽤于指定在哪个维度上指定最⼤值最⼩值,可以是 # 0(xAxis, radiusAxis),
# 1(yAxis, angleAxis),默认使⽤第⼀个数值轴所在的维度。 value_index: Optional[Numeric] = None,
# 在使⽤ type 时有效,⽤于指定在哪个维度上指定最⼤值最⼩值。这可以是维度的直接名称, # 例如折线图时可以是 x、angle 等、candlestick 图时可以是 open、close 等维度名称。 value_dim: Optional[str] = None,
# 标注的坐标。坐标格式视系列的坐标系⽽定,可以是直⾓坐标系上的 x, y, # 也可以是极坐标系上的 radius, angle。例如 [121, 2323]、['aa', 998]。 coord: Optional[Sequence] = None, # 相对容器的屏幕 x 坐标,单位像素。 x: Optional[Numeric] = None, # 相对容器的屏幕 y 坐标,单位像素。 y: Optional[Numeric] = None, # 标注值,可以不设。
value: Optional[Numeric] = None,
# 标记的图形。
# 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] = None, # 标记点样式配置项,参考 `series_options.ItemStyleOpts` itemstyle_opts: Union[ItemStyleOpts, dict, None] = None, )
x_data = ['Apple', 'Huawei', 'Xiaomi', 'Oppo', 'Vivo', 'Meizu']y_data_1 = [123, 153, 89, 107, 98, 23]
bar = ( Bar()
.add_xaxis(x_data)
.add_yaxis('', y_data_1) .set_series_opts(
markpoint_opts=opts.MarkPointOpts( data=[
opts.MarkPointItem(type_='max', name='max'), opts.MarkPointItem(type_='min', name='min') ] ) ))
bar.render_notebook()
因篇幅问题不能全部显示,请点此查看更多更全内容