赞
踩
本文主要展示我们在画图时,需要准备好的一些图形配置内容,当然了,如果仅仅是画一些简单的图形的话,这些东西完全可以忽略,因为根本用不到哈,但是对于一些有趣的图形较为复杂,这里先详细记下笔记。
配置项章节应该配合图表类型章节中的例子一起看比较好。
全局配置项可通过set_global_opts
方法设置
这里一共有31中组件,这里详细写几种还比较常用的组件,至于以后遇到需要画特别特殊的图形
的话,再继续学习一下。其实对于组件里面大多数参数使用默认就好了,实际在运用的时候只有少数甚至个别的参数需要你重新设定一下。
组件类 | 组件名 |
---|---|
AnimationOpts | Echarts 画图动画配置项 |
InitOpts | 初始化配置项 |
ToolBoxFeatureSaveAsImagesOpts | 工具箱保存图片配置项 |
ToolBoxFeatureRestoreOpts | 工具箱还原配置项 |
ToolBoxFeatureDataViewOpts | 工具箱数据视图工具 |
ToolBoxFeatureDataZoomOpts | 工具箱区域缩放配置项 |
ToolBoxFeatureMagicTypeOpts | 工具箱动态类型切换配置项 |
ToolBoxFeatureBrushOpts | 工具箱选框组件配置项 |
ToolBoxFeatureOpts | 工具箱工具配置项 |
ToolboxOpts | 工具箱配置项 |
BrushOpts | 区域选择组件配置项 |
TitleOpts | 标题配置项 |
DataZoomOpts | 区域缩放配置项 |
LegendOpts | 图例配置项 |
VisualMapOpts | 视觉映射配置项 |
TooltipOpts | 提示框配置项 |
AxisLineOpts | 坐标轴轴线配置项 |
AxisTickOpts | 坐标轴刻度配置项 |
AxisPointerOpts | 坐标轴指示器配置项 |
AxisOpts | 坐标轴配置项 |
SingleAxisOpts | 单轴配置项 |
GraphicGroup | 原生图形元素组件 |
GraphicItem | 原生图形配置项 |
GraphicBasicStyleOpts | 原生图形基础配置项 |
GraphicShapeOpts | 原生图形形状配置项 |
GraphicImage | 原生图形图片配置项 |
GraphicImageStyleOpts | 原生图形图片样式配置项 |
GraphicText | 原生图形文本配置项 |
GraphicTextStyleOpts | 原生图形文本样式配置项 |
GraphicRect | 原生图形矩形配置项 |
PolarOpts | 极坐标系配置 |
注: 其中最常用的几个组件为 初始化配置项
, 标题配置项
,图例配置项
,工具箱配置项
,视觉映射配置项
,提示框配置项
,区域缩放配置项
比较常用一些。
1.
初始化配置项
: InitOpts
参数名称 | 默认设定值 | 参数解释 |
---|---|---|
width | 900px | 图表画布宽度,css 长度单位 |
height | 500px | 图表画布高度,css 长度单位 |
chart_id | None | 图表 ID,图表唯一标识,用于在多图表时区分 |
renderer | RenderType.CANVAS | 渲染风格,可选 “canvas”, “svg” |
page_title | “Awesome-pyecharts” | 网页标题 |
theme | “white” | 图表主题 |
bg_color | None | 图表背景颜色 |
animation_opts | AnimationOpts() | 画图动画初始化配置 |
2.
标题配置项
: TitleOpts
参数名称 | 默认设定值 | 参数解释 |
---|---|---|
title | None | 主标题文本,支持使用 \n 换行 |
title_link | None | 主标题跳转 URL 链接 |
subtitle | None | 副标题文本,支持使用 \n 换行 |
pos_left | None | title 组件离容器左侧的距离, left 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比, 也可以是 ‘top’, ‘middle’, ‘bottom’ |
padding | 5 | 标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距 |
item_gap | 10 | 主副标题之间的间距 |
title_textstyle_opts | None | 主标题字体样式配置项 |
3.
图例配置项
参数名称 | 默认设定值 | 参数解释 |
---|---|---|
type_ | None | 图例的类型。可选值:‘plain’:普通图例。缺省就是普通图例;‘scroll’:可滚动翻页的图例。当图例数量较多时可以使用。 |
is_show | True | 是否显示图例组件 |
pos_left | None | 图例组件离容器左侧的距离。 |
orient | None | 图例列表的布局朝向。可选:‘horizontal’, ‘vertical’ |
padding | 5 | 图例内边距,单位px,默认各方向内边距为5 |
item_gap | 10 | 图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。 |
item_width | 25 | 图例标记的图形宽度。 |
item_height | 14 | 图例标记的图形高度。 |
inactive_color | None | 图例关闭时的颜色。默认是 #ccc |
4.
工具箱配置项
: ToolboxOpts
参数名称 | 默认设定值 | 参数解释 |
---|---|---|
is_show | True | 是否显示工具栏组件 |
orient | “horizontal” | 工具栏 icon 的布局朝向,可选:‘horizontal’, ‘vertical’ |
pos_left | “80%” | 工具栏组件离容器左侧的距离 |
feature | ToolBoxFeatureOpts() | 各工具配置项 |
5.
视觉映射配置项
: VisualMapOpts
参数名称 | 默认设定值 | 参数解释 |
---|---|---|
is_show | True | 是否显示视觉映射配置 |
type_ | “color” | 映射过渡类型,可选,“color”, “size” |
range_text | None | 两端的文本,如[‘High’, ‘Low’] |
range_color | None | visualMap 组件过渡颜色 |
range_size | None | visualMap 组件过渡 symbol 大小 |
range_opacity | None | visualMap 图元以及其附属物(如文字标签)的透明度 |
orient | “vertical” | 如何放置 visualMap 组件,水平(‘horizontal’)或者竖直(‘vertical’) |
pos_left | None | visualMap 组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比,也可以是 ‘left’, ‘center’, ‘right’。 |
split_number | 5 | 对于连续型数据,自动平均切分成几段。默认为5段。连续数据的范围需要 max 和 min 来指定 |
is_calculable | True | 是否显示拖拽用的手柄(手柄能拖拽调整选中范围) |
pieces | None | 自定义的每一段的范围,以及每一段的文字,以及每一段的特别的样式。 |
item_width | 0 | 图形的宽度,即长条的宽度 |
item_height | 0 | 图形的高度,即长条的高度 |
background_color | None | visualMap 组件的背景色 |
border_color | None | visualMap 组件的边框颜色 |
border_width | 0 | visualMap 边框线宽,单位px |
textstyle_opts | None | 文字样式配置项 |
6.
提示框配置项
: TooltipOpts
参数名称 | 默认设定值 | 参数解释 |
---|---|---|
is_show | True | 是否显示提示框组件,包括提示框浮层和 axisPointer |
position | None | 提示框浮层的位置,默认不设置时位置会跟随鼠标的位置 |
background_color | None | 提示框浮层的背景颜色 |
border_color | None | 提示框浮层的边框颜色 |
border_width | 0 | 提示框浮层的边框宽 |
textstyle_opts | TextStyleOpts(font_size=14) | 文字样式配置项 |
7.
区域缩放配置项
: DataZoomOpts
参数名称 | 默认设定值 | 参数解释 |
---|---|---|
is_show | True | 是否显示 组件。如果设置为 false,不会显示,但是数据过滤的功能还存在 |
type_ | “slider” | 组件类型,可选 “slider”, “inside” |
is_realtime | True | 拖动时,是否实时更新系列的视图。如果设置为 false,则只在拖拽结束的时候更新 |
range_start | 20 | 数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100% |
start_value | None | 数据窗口范围的起始数值。如果设置了 start 则 startValue 失效。 |
orient | “horizontal” | 布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴:可选值为:‘horizontal’, ‘vertical’ |
pos_left | None | dataZoom-slider 组件离容器左侧的距离 |
filter_mode | “filter” | dataZoom 的运行原理是通过数据过滤以及在内部设置轴的显示窗口来达到数据窗口缩放的效果。 ‘filter’:当前数据窗口外的数据,被过滤掉。即会影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。 ‘weakFilter’:当前数据窗口外的数据,被过滤掉。即会影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。 ‘empty’:当前数据窗口外的数据,被设置为空。即不会影响其他轴的数据范围。‘none’: 不过滤数据,只改变数轴范围。 |
这里一共有17中系列的配置项,主要是对图形的一个细节的把控,同样,基本是默认设定就够用了,具体需要特殊图形时,再来详细学习,这里主要详细记下我见过的图形里面可能会用到的几个的笔记。
1.
图元样式配置项
: ItemStyleOpts
参数名称 | 默认设定值 | 参数解释 |
---|---|---|
color | None | 图形的颜色。 颜色可以使用 RGB 表示,比如 ‘rgb(128, 128, 128)’,如果想要加上 alpha 通道表示不透明度, 可以使用 RGBA,比如 ‘rgba(128, 128, 128, 0.5)’,也可以使用十六进制格式,比如 ‘#ccc’。 除了纯色之外颜色也支持渐变色和纹理填充 |
color0 | None | 阴线 图形的颜色 |
border_color | None | 图形的描边颜色。支持的颜色格式同 color,不支持回调函数 |
border_color0 | None | 阴线 图形的描边颜色 |
border_width | None | 描边宽度,默认不描边 |
border_type | None | 边界类型,支持 ‘dashed’, ‘dotted’ |
opacity | None | 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形 |
area_color | None | 区域的颜色 |
2.
文字样式配置项
: TextStyleOpts
参数名称 | 默认设定值 | 参数解释 |
---|---|---|
color | None | 文字颜色 |
font_style | None | 文字字体的风格, 可选:‘normal’,‘italic’,‘oblique’ |
font_weight | None | 主标题文字字体的粗细,可选:‘normal’,‘bold’,‘bolder’,‘lighter’ |
font_family | None | 文字的字体系列,还可以是 ‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, … |
font_size | None | 文字的字体大小 |
align | None | 文字水平对齐方式,默认自动 |
vertical_align | None | 文字垂直对齐方式,默认自动 |
line_height | None | 行高 |
background_color | None | 文字块背景色。可以是直接的颜色值,例如:’#123234’, ‘red’, ‘rgba(0,23,11,0.3)’ |
border_color | None | 文字块边框颜色 |
border_width | None | 文字块边框宽度 |
padding | None | 文字块的内边距 |
width | None | 文字块的宽度 |
height | None | 文字块的高度 |
rich | None | 在 rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果 |
3.
标签配置项
: LabelOpts
参数名称 | 默认设定值 | 参数解释 |
---|---|---|
is_show | True | 是否显示标签 |
position | “top” | 标签的位置。可选’top’,‘left’,‘right’,‘bottom’,‘inside’,‘insideLeft’,‘insideRight’,‘insideTop’,‘insideBottom’, ‘insideTopLeft’,‘insideBottomLeft’, ‘insideTopRight’,‘insideBottomRight’ |
color | None | 文字的颜色。 如果设置为 ‘auto’,则为视觉映射得到的颜色,如系列色 |
font_size | 12 | 文字的字体大小 |
font_style | None | 文字字体的风格,可选: ‘normal’,‘italic’,‘oblique’ |
font_weight | None | 文字字体的粗细,可选: ‘normal’,‘bold’,‘bolder’,‘lighter’ |
font_family | None | 文字的字体系列,还可以是 ‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, … |
rotate | None | 标签旋转。从 -90 度到 90 度。正值是逆时针 |
margin | 0 | 刻度标签与轴线之间的距离 |
horizontal_align | None | 文字水平对齐方式,默认自动。可选: ‘left’,‘center’,‘right’ |
vertical_align | None | 文字垂直对齐方式,默认自动。可选: ‘top’,‘middle’,‘bottom’ |
formatter | None | 标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行 |
本文主要是记录了在画图时,可能会用上的配置项的参数设定,具体该怎么用,到时候画图时,再结合例子实践一下。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。