[pyecharts1.7] 坐标轴设置：X轴、Y轴通用

本文档以及pyecharts使用手册（超链接）中的其他文档）将会持续更新。 有些内容标记为待更新的，有时间我会补充上。个人精力有限，优先发布在公众号上，有兴趣的可以关注一下哈：微信公众号「燃烧吧数据」(id：data-fired)

---

python3样例代码

from random import randint

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.commons.utils import JsCode

x_data = ['分类1',
          '分类2',
          '分类3',
          '分类4',
          '分类5',
          '分类6',
          '分类7',
          '分类8',
          '分类9',
          '分类10',
          ]

y1_data = [0.72,
           0.61,
           0.98,
           0.92,
           0.67,
           0.87,
           0.6,
           0.75,
           0.96,
           0.68
           ]

y2_data = [d * randint(1, 10) for d in y1_data]

instance_bar = (
    Bar()
        .add_xaxis(xaxis_data=x_data)
        .add_yaxis(series_name='系列1',
                   yaxis_data=y1_data)
        .add_yaxis(series_name='系列2',
                   yaxis_data=y2_data)
        .set_global_opts(
        xaxis_opts=opts.AxisOpts(
            type_='category',  # Optional[str]
            name='坐标轴名称',  # Optional[str]
            is_show=True,  # bool
            is_scale=False,  # bool
            is_inverse=True,  # bool
            name_location='start',  # str
            name_gap=15,  # Numeric
            name_rotate=20,  # Optional[Numeric]
            name_textstyle_opts=opts.TextStyleOpts(
                color='blue',  # Optional[str]
                font_style=None,  # Optional[str]
                font_weight=None,  # Optional[str]
                font_family=None,  # Optional[str]
                font_size=None,  # Optional[Numeric]
                align=None,  # Optional[str]
                vertical_align=None,  # Optional[str]
                line_height=None,  # Optional[str]
                background_color='yellow',  # Optional[str]
                border_color=None,  # Optional[str]
                border_width=None,  # Optional[Numeric]
                border_radius=None,  # Union[Numeric, Sequence, None]
                padding=None,  # Union[Numeric, Sequence, None]
                shadow_color=None,  # Optional[str]
                shadow_blur=None,  # Optional[Numeric]
                width=None,  # Optional[str]
                height=None,  # Optional[str]
                rich=None,  # Optional[dict]
            ),
            interval=30,  # Optional[Numeric]
            grid_index=0,  # Numeric
            position='',  # Optional[str]
            offset=0,  # Numeric
            split_number=5,  # Numeric
            boundary_gap='',  # Union[str, bool, None]
            min_='',  # Union[Numeric, str, None]
            max_='',  # Union[Numeric, str, None]
            min_interval=0,  # Numeric
            max_interval=0,  # Optional[Numeric]
            axisline_opts=opts.AxisLineOpts(
                is_show=True,
                is_on_zero=True,
                on_zero_axis_index=0,
                symbol=None,
                linestyle_opts=opts.LineStyleOpts(
                    is_show=True,
                    width=1,
                    opacity=1,
                    curve=0,
                    type_="solid",
                    color=None,
                )
            ),
            axistick_opts=opts.AxisTickOpts(
                is_show=True,
                is_align_with_label=True,
                is_inside=True,
                length=20,
                linestyle_opts=opts.LineStyleOpts(
                    is_show=True,
                    width=1,
                    opacity=1,
                    curve=0,
                    type_="solid",
                    color=None,
                )
            ),
            axislabel_opts=opts.LabelOpts(
                is_show=True,  # bool
                position="top",  # Union[str, Sequence]
                color='pink',  # Optional[str]
                font_size=None,  # Optional[Numeric]
                font_style=None,  # Optional[str]
                font_weight=None,  # Optional[str]
                font_family=None,  # Optional[str]
                rotate=10,  # Optional[Numeric]
                margin=8,  # Optional[Numeric]\,
                interval=None,  # Union[Numeric, str, None]
                horizontal_align=None,  # Optional[str]
                vertical_align=None,  # Optional[str]
                formatter=JsCode("""
                function(value,index) {
                  if (index === 2) {
                    return 'formatter';
                  } else {
                    return value;
                  }
                }
                """),  # Optional[JSFunc] 回调函数
                # 字符串模板 formatter='-{value}-',
                background_color=None,  # Optional[str]
                border_color=None,  # Optional[str]
                border_width=None,  # Optional[Numeric]
                border_radius=None,  # Optional[Numeric]
                rich=None,  # Optional[dict]
            ),
            axispointer_opts=opts.AxisPointerOpts(
                is_show=True,
                link=None,
                type_="line",
                label=None,
                linestyle_opts=opts.LineStyleOpts(
                    is_show=True,
                    width=10,
                    opacity=0.5,
                    curve=0,
                    type_="solid",
                    color='green',
                ),
            ),
            splitarea_opts=opts.SplitAreaOpts(
                is_show=True,
                areastyle_opts=opts.AreaStyleOpts(
                    opacity=0.05,
                    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
                    }
                )

            ),
            splitline_opts=opts.SplitLineOpts(
                is_show=True,
                linestyle_opts=opts.LineStyleOpts(
                    is_show=True,
                    width=1,
                    opacity=1,
                    curve=0,
                    type_="solid",
                    color='#0099ff',
                )
            )

        )
    )
)

opts.AxisOpts()

type_ ： 坐标轴类型

可选：

• 'value' 数值轴，适用于连续数据。
• 'category' 类目轴，适用于离散的类目数据
• 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
• 'log' 对数轴。适用于对数数据。

name ： 坐标轴名称

name_textstyle_opts ： 坐标轴名称的文字样式

color：文字颜色。

font_style：文字字体的风格.可选：‘normal’，‘italic’，‘oblique’

font_weight：主标题文字字体的粗细，可选：‘normal’，‘bold’，‘bolder’，‘lighter’

font_family：文字的字体系列。还可以是 ‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, …

font_size：文字的字体大小

align：文字水平对齐方式，默认自动

vertical_align：文字垂直对齐方式，默认自动

line_height：行高

background_color：文字块背景色。可以是直接的颜色值，例如：’#123234’, ‘red’, ‘rgba(0,23,11,0.3)’

border_color：文字块边框颜色

border_width：文字块边框宽度

border_radius：文字块的圆角

padding：文字块的内边距。例：padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距，padding: 4：表示 padding: [4, 4, 4, 4]，padding: [3, 4]：表示 padding: [3, 4, 3, 4]

shadow_color：文字块的背景阴影颜色

shadow_blur：文字块的背景阴影长度

width：文字块的宽度

height：文字块的高度

rich：在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。具体配置可以参考一下 https://www.echartsjs.com/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE

name_gap ：坐标轴名称与轴线之间的距离

name_rotate ：坐标轴名字旋转，角度值

name_location：坐标轴名称显示位置

可选：

• 'start'
• 'middle' 或者 'center'
• 'end'

is_show ： 是否显示坐标轴

is_scale ： 坐标刻度是否包含零刻度

只在数值轴中（type： ‘value’）有效。

设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。

在设置 min 和 max 之后该配置项无效

is_inverse ：是否是反向坐标轴

interval ： 坐标轴间隔

强制设置坐标轴分割间隔。

因为 splitNumber 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 min、max 强制设定刻度划分，一般不建议使用。

无法在类目轴中使用。在时间轴（type： ‘time’）中需要传时间戳，在对数轴（type： ‘log’）中需要传指数值

grid_index：坐标轴所在的 grid 的索引

默认位于第一个 grid

position：坐标轴位置

可选：

• 'top'
• 'bottom'

默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧

offset：坐标轴偏移

X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用

split_number：坐标轴的分割段数

需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。

在类目轴中无效。

boundary_gap：坐标轴两边留白策略

类目轴和非类目轴的设置和表现不一样。

类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。 示例：

boundaryGap： [‘20%’, ‘20%’]

min_ ：坐标轴最小值

max_ ：坐标轴最大值

min_interval ：坐标轴最小间隔

自动计算的坐标轴最小间隔大小。

例如可以设置成1保证坐标轴分割刻度显示成整数。

只在数值轴或时间轴中（type： ‘value’ 或 ‘time’）有效。

max_interval ：坐标轴最大间隔

自动计算的坐标轴最大间隔大小。

例如，在时间轴（（type： ‘time’））可以设置成 3600 * 24 * 1000 保证坐标轴分割刻度最大为一天。

只在数值轴或时间轴中（type： ‘value’ 或 ‘time’）有效。

axisline_opts：坐标轴轴线相关设置

1. is_show：是否显示坐标轴轴线。

2. is_on_zero：X 轴或Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。

3. on_zero_axis_index：当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上。

   1. symbol：轴线两边的箭头。可以是字符串，表示两端使用同样的箭头；或者长度为 2 的字符串数组，分别表示两端的箭头。默认不显示箭头，即 ‘none’。两端都显示箭头可以设置为 ‘arrow’，只在末端显示箭头可以设置为 [‘none’, ‘arrow’]。

4. linestyle_opts：坐标轴线风格配置项

   • is_show：是否显示

   • width：线宽

   • opacity：图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。

   • curve：线的弯曲度，0 表示完全不弯曲

   • type_：线的类型。可选： ‘solid’, ‘dashed’, ‘dotted’

   • color：线的颜色。颜色可以使用 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'
     }
     

axistick_opts：坐标轴刻度相关设置

1. is_show： 是否显示坐标轴刻度。
2. is_align_with_label： 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
3. is_inside： 坐标轴刻度是否朝内，默认朝外。
4. length： 坐标轴刻度的长度。
5. linestyle_opts： 坐标轴线风格配置项(参考axisline_opts中的相关解释)

axislabel_opts ：坐标轴刻度标签的相关设置

1. is_show：是否显示标签

2. position：标签的位置。可选： ‘top’，‘left’，‘right’，‘bottom’，‘inside’，‘insideLeft’，‘insideRight’，‘insideTop’，‘insideBottom’， ‘insideTopLeft’，‘insideBottomLeft’，‘insideTopRight’，‘insideBottomRight’

3. color：文字的颜色。 如果设置为 ‘auto’，则为视觉映射得到的颜色，如系列色。

4. font_size：文字的字体大小

5. font_style：文字字体的风格，可选： ‘normal’，‘italic’，‘oblique’

6. font_weight：文字字体的粗细，可选： ‘normal’，‘bold’，‘bolder’，‘lighter’

7. font_family：文字的字体系列，还可以是 ‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, …

8. rotate：标签旋转。从 -90 度到 90 度。正值是逆时针。

9. margin：刻度标签与轴线之间的距离。

10. interval：坐标轴刻度标签的显示间隔，在类目轴中有效。

    默认会采用标签不重叠的策略间隔显示标签。
    可以设置成 0 强制显示所有标签。
    如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
    可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：

    (index:number, value: string) => boolean

    第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 false。

11. horizontal_align：文字水平对齐方式，默认自动。可选: ‘left’，‘center’，‘right’

12. vertical_align：文字垂直对齐方式，默认自动。可选: ‘top’，‘middle’，‘bottom’

13. formatter：刻度标签的内容格式器，支持字符串模板和回调函数两种形式。

    • 字符串模板，模板变量为刻度默认标签 {value}

    formatter = '{value} kg'
    

    • 函数模板，函数参数分别为刻度数值（类目），刻度的索引

    formatter=JsCode("""
                    function(value,index) {
                      if (index === 2) {
                        return 'formatter';
                      } else {
                        return value;
                      }
                    }
                    """)
    

14. background_color：背景色

15. border_color：边框颜色

16. border_width：边框宽度

17. border_radius：边框圆角

18. rich：在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。具体配置可以参考一下 https://www.echartsjs.com/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE

axispointer_opts ：坐标轴指示器设置

1. is_show：默认显示坐标轴指示器
2. link：不同轴的 axisPointer 可以进行联动，在这里设置。联动表示轴能同步一起活动。轴依据他们的axisPointer 当前对应的值来联动。link 是一个数组，其中每一项表示一个 link group，一个 group 中的坐标轴互相联动。具体使用方式可以参见：https://www.echartsjs.com/option.html#axisPointer.link
3. type_：指示器类型。可选参数如下(默认为 ‘line’)： ‘line’(直线指示器)、‘shadow’(阴影指示器)、‘none’(无指示器)
4. label：坐标轴指示器的文本标签，坐标轴标签配置项，参考 series_options.LabelOpts
5. linestyle_opts：坐标轴线风格配置项(参考axisline_opts中的相关参数和解释)

splitarea_opts：坐标轴在 grid 区域中的分隔区域设置

1. is_show：是否显示分隔区域。

2. areastyle_opts：分隔区域填充样式。

   • opacity：图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。

   • color：填充的颜色。颜色可以使用 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'
     }
     

splitline_opts ：坐标轴在 grid 区域中的分隔线设置

1. is_show：是否显示分割线
2. linestyle_opts：分割线风格样式(参考axisline_opts中的相关参数和解释)