{ "id": { "desc": "

组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。

\n" }, "zlevel": { "desc": "

所有图形的 zlevel 值。

\n

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

\n

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

\n" }, "z": { "desc": "

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

\n

z相比zlevel优先级更低,而且不会创建新的 Canvas。

\n" }, "left": { "desc": "\n\n

single组件离容器左侧的距离。

\n

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

\n

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

\n", "uiControl": { "type": "percent", "default": "0%" } }, "top": { "desc": "\n\n

single组件离容器上侧的距离。

\n

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

\n

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

\n", "uiControl": { "type": "percent", "default": "0%" } }, "right": { "desc": "\n\n

single组件离容器右侧的距离。

\n

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

\n", "uiControl": { "type": "percent", "default": "0%" } }, "bottom": { "desc": "\n\n

single组件离容器下侧的距离。

\n

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

\n", "uiControl": { "type": "percent", "default": "0%" } }, "width": { "desc": "\n\n

single组件的宽度。默认自适应。

\n", "uiControl": { "type": "percent", "default": "50%" } }, "height": { "desc": "\n\n

single组件的高度。默认自适应。

\n", "uiControl": { "type": "percent", "default": "50%" } }, "orient": { "desc": "

轴的朝向,默认水平朝向,可以设置成 'vertical' 垂直朝向。

\n" }, "type": { "desc": "

坐标轴类型。

\n

可选:

\n\n" }, "name": { "desc": "\n\n

坐标轴名称。

\n", "uiControl": { "type": "text" } }, "nameLocation": { "desc": "\n\n

坐标轴名称显示位置。

\n

可选:

\n\n", "uiControl": { "type": "enum", "options": "start,middle,end", "default": "end" } }, "nameTextStyle": { "desc": "

坐标轴名称的文字样式。

\n" }, "nameTextStyle.color": { "desc": "\n\n

坐标轴名称的颜色,默认取 axisLine.lineStyle.color

\n", "uiControl": { "type": "color" } }, "nameTextStyle.fontStyle": { "desc": "\n\n

坐标轴名称文字字体的风格。

\n

可选:

\n\n", "uiControl": { "type": "enum", "default": "normal", "options": "normal,italic,oblique" } }, "nameTextStyle.fontWeight": { "desc": "\n\n

坐标轴名称文字字体的粗细。

\n

可选:

\n\n", "uiControl": { "type": "enum", "default": "normal", "options": "normal,bold,bolder,lighter" } }, "nameTextStyle.fontFamily": { "desc": "\n\n

坐标轴名称文字的字体系列。

\n

还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "nameTextStyle.fontSize": { "desc": "\n\n

坐标轴名称文字的字体大小。

\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "nameTextStyle.align": { "desc": "\n\n

文字水平对齐方式,默认自动。

\n

可选:

\n\n

rich 中如果没有设置 align,则会取父层级的 align。例如:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n
\n", "uiControl": { "type": "enum", "options": "left,center,right" } }, "nameTextStyle.verticalAlign": { "desc": "\n\n

文字垂直对齐方式,默认自动。

\n

可选:

\n\n

rich 中如果没有设置 verticalAlign,则会取父层级的 verticalAlign。例如:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n
\n", "uiControl": { "type": "enum", "options": "top,middle,bottom" } }, "nameTextStyle.lineHeight": { "desc": "\n\n

行高。

\n

rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。例如:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n        }\n    }\n}\n
\n", "uiControl": { "type": "number", "min": "0", "step": "1", "default": "12" } }, "nameTextStyle.backgroundColor": { "desc": "\n\n

文字块背景色。

\n

可以使用颜色值,例如:'#123234', 'red', 'rgba(0,23,11,0.3)'

\n

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "nameTextStyle.borderColor": { "desc": "\n\n

文字块边框颜色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "nameTextStyle.borderWidth": { "desc": "\n\n

文字块边框宽度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "nameTextStyle.borderRadius": { "desc": "\n\n

文字块的圆角。

\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "nameTextStyle.padding": { "desc": "\n\n

文字块的内边距。例如:

\n\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n", "uiControl": { "type": "vector", "min": "0", "dims": "T,R,B,L" } }, "nameTextStyle.shadowColor": { "desc": "\n\n

文字块的背景阴影颜色。

\n", "uiControl": { "type": "color" } }, "nameTextStyle.shadowBlur": { "desc": "\n\n

文字块的背景阴影长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "nameTextStyle.shadowOffsetX": { "desc": "\n\n

文字块的背景阴影 X 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "nameTextStyle.shadowOffsetY": { "desc": "\n\n

文字块的背景阴影 Y 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "nameTextStyle.width": { "desc": "\n\n

文本显示宽度。

\n", "uiControl": { "type": "number", "default": "100", "min": "1", "max": "500", "step": "1" } }, "nameTextStyle.height": { "desc": "\n\n

文本显示高度。

\n", "uiControl": { "type": "number", "default": "50", "min": "1", "max": "500", "step": "1" } }, "nameTextStyle.textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n", "uiControl": { "type": "color" } }, "nameTextStyle.textBorderWidth": { "desc": "\n\n

文字本身的描边宽度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "nameTextStyle.textShadowColor": { "desc": "\n\n

文字本身的阴影颜色。

\n", "uiControl": { "type": "color", "default": "#000" } }, "nameTextStyle.textShadowBlur": { "desc": "\n\n

文字本身的阴影长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "nameTextStyle.textShadowOffsetX": { "desc": "\n\n

文字本身的阴影 X 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "nameTextStyle.textShadowOffsetY": { "desc": "\n\n

文字本身的阴影 Y 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "nameTextStyle.overflow": { "desc": "\n\n

文字超出宽度是否截断或者换行。配置width时有效

\n\n", "uiControl": { "type": "enum", "options": "truncate,break,breakAll" } }, "nameTextStyle.ellipsis": { "desc": "

overflow配置为'truncate'的时候,可以通过该属性配置末尾显示的文本。

\n" }, "nameTextStyle.lineOverflow": { "desc": "

文本超出高度部分是否截断,配置height时有效。

\n\n" }, "nameTextStyle.rich": { "desc": "

rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

\n

例如:

\n
label: {\n    // 在文本中,可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号:\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意,换行仍是使用 '\\n'。\n    formatter: [\n        '{a|这段文本采用样式a}',\n        '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

详情参见教程:富文本标签

\n" }, "nameTextStyle.rich..color": { "desc": "\n\n

文字的颜色。

\n", "uiControl": { "type": "color", "default": "null" } }, "nameTextStyle.rich..fontStyle": { "desc": "\n\n

文字字体的风格。

\n

可选:

\n\n", "uiControl": { "type": "enum", "default": "normal", "options": "normal,italic,oblique" } }, "nameTextStyle.rich..fontWeight": { "desc": "\n\n

文字字体的粗细。

\n

可选:

\n
    \n
  • 'normal'
  • \n
  • 'bold'
  • \n
  • 'bolder'
  • \n
  • 'lighter'
  • \n
  • 100 | 200 | 300 | 400...
  • \n
\n", "uiControl": { "type": "enum", "default": "normal", "options": "normal,bold,bolder,lighter" } }, "nameTextStyle.rich..fontFamily": { "desc": "\n\n

文字的字体系列。

\n

还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "nameTextStyle.rich..fontSize": { "desc": "\n\n

文字的字体大小。

\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "nameTextStyle.rich..align": { "desc": "\n\n

文字水平对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'left'
  • \n
  • 'center'
  • \n
  • 'right'
  • \n
\n

rich 中如果没有设置 align,则会取父层级的 align。例如:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n
\n", "uiControl": { "type": "enum", "options": "left,center,right" } }, "nameTextStyle.rich..verticalAlign": { "desc": "\n\n

文字垂直对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'top'
  • \n
  • 'middle'
  • \n
  • 'bottom'
  • \n
\n

rich 中如果没有设置 verticalAlign,则会取父层级的 verticalAlign。例如:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n
\n", "uiControl": { "type": "enum", "options": "top,middle,bottom" } }, "nameTextStyle.rich..lineHeight": { "desc": "\n\n

行高。

\n

rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。例如:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n        }\n    }\n}\n
\n", "uiControl": { "type": "number", "min": "0", "step": "1", "default": "12" } }, "nameTextStyle.rich..backgroundColor": { "desc": "\n\n

文字块背景色。

\n

可以使用颜色值,例如:'#123234', 'red', 'rgba(0,23,11,0.3)'

\n

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "nameTextStyle.rich..borderColor": { "desc": "\n\n

文字块边框颜色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "nameTextStyle.rich..borderWidth": { "desc": "\n\n

文字块边框宽度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "nameTextStyle.rich..borderRadius": { "desc": "\n\n

文字块的圆角。

\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "nameTextStyle.rich..padding": { "desc": "\n\n

文字块的内边距。例如:

\n
    \n
  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • \n
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • \n
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]
  • \n
\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n", "uiControl": { "type": "vector", "min": "0", "dims": "T,R,B,L" } }, "nameTextStyle.rich..shadowColor": { "desc": "\n\n

文字块的背景阴影颜色。

\n", "uiControl": { "type": "color" } }, "nameTextStyle.rich..shadowBlur": { "desc": "\n\n

文字块的背景阴影长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "nameTextStyle.rich..shadowOffsetX": { "desc": "\n\n

文字块的背景阴影 X 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "nameTextStyle.rich..shadowOffsetY": { "desc": "\n\n

文字块的背景阴影 Y 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "nameTextStyle.rich..width": { "desc": "

文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "nameTextStyle.rich..height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "nameTextStyle.rich..textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n", "uiControl": { "type": "color" } }, "nameTextStyle.rich..textBorderWidth": { "desc": "\n\n

文字本身的描边宽度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "nameTextStyle.rich..textShadowColor": { "desc": "\n\n

文字本身的阴影颜色。

\n", "uiControl": { "type": "color", "default": "#000" } }, "nameTextStyle.rich..textShadowBlur": { "desc": "\n\n

文字本身的阴影长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "nameTextStyle.rich..textShadowOffsetX": { "desc": "\n\n

文字本身的阴影 X 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "nameTextStyle.rich..textShadowOffsetY": { "desc": "\n\n

文字本身的阴影 Y 偏移。

\n\n", "uiControl": { "type": "number", "step": "0.5" } }, "nameGap": { "desc": "\n\n

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

\n", "uiControl": { "type": "number", "step": "0.5", "default": "15" } }, "nameRotate": { "desc": "\n\n

坐标轴名字旋转,角度值。

\n", "uiControl": { "type": "angle", "min": "-360", "max": "360", "step": "1" } }, "inverse": { "desc": "\n\n

是否是反向坐标轴。

\n", "uiControl": { "type": "boolean" } }, "boundaryGap": { "desc": "\n\n

坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。

\n

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

\n

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

\n
boundaryGap: ['20%', '20%']\n
\n", "uiControl": { "type": "boolean" } }, "min": { "desc": "\n\n

坐标轴刻度最小值。

\n

可以设置成特殊值 'dataMin',此时取数据在该轴上的最小值作为最小刻度。

\n

不设置时会自动计算最小值保证坐标轴刻度的均匀分布。

\n

在类目轴中,也可以设置为类目的序数(如类目轴 data: ['类A', '类B', '类C'] 中,序数 2 表示 '类C'。也可以设置为负数,如 -3)。

\n

当设置成 function 形式时,可以根据计算得出的数据最大最小值设定坐标轴的最小值。如:

\n
min: function (value) {\n    return value.min - 20;\n}\n
\n

其中 value 是一个包含 minmax 的对象,分别表示数据的最大最小值,这个函数可返回坐标轴的最小值,也可返回 null/undefined 来表示“自动计算最小值”(返回 null/undefinedv4.8.0 开始支持)。

\n", "uiControl": { "type": "number" } }, "max": { "desc": "\n\n

坐标轴刻度最大值。

\n

可以设置成特殊值 'dataMax',此时取数据在该轴上的最大值作为最大刻度。

\n

不设置时会自动计算最大值保证坐标轴刻度的均匀分布。

\n

在类目轴中,也可以设置为类目的序数(如类目轴 data: ['类A', '类B', '类C'] 中,序数 2 表示 '类C'。也可以设置为负数,如 -3)。

\n

当设置成 function 形式时,可以根据计算得出的数据最大最小值设定坐标轴的最小值。如:

\n
max: function (value) {\n    return value.max - 20;\n}\n
\n

其中 value 是一个包含 minmax 的对象,分别表示数据的最大最小值,这个函数可返回坐标轴的最大值,也可返回 null/undefined 来表示“自动计算最大值”(返回 null/undefinedv4.8.0 开始支持)。

\n", "uiControl": { "type": "number" } }, "scale": { "desc": "\n\n

只在数值轴中(type: 'value')有效。

\n

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

\n

在设置 minmax 之后该配置项无效。

\n", "uiControl": { "type": "boolean" } }, "splitNumber": { "desc": "\n\n

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

\n

在类目轴中无效。

\n", "uiControl": { "type": "number", "min": "1", "step": "1", "default": "5" } }, "minInterval": { "desc": "\n\n

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

\n

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

\n
{\n    minInterval: 1\n}\n
\n

只在数值轴或时间轴中(type: 'value' 或 'time')有效。

\n", "uiControl": { "type": "number" } }, "maxInterval": { "desc": "\n\n

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

\n

例如,在时间轴((type: 'time'))可以设置成 3600 * 24 * 1000 保证坐标轴分割刻度最大为一天。

\n
{\n    maxInterval: 3600 * 24 * 1000\n}\n
\n

只在数值轴或时间轴中(type: 'value' 或 'time')有效。

\n", "uiControl": { "type": "number" } }, "interval": { "desc": "\n\n

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

\n

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

\n

无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。

\n", "uiControl": { "type": "number" } }, "logBase": { "desc": "\n\n

对数轴的底数,只在对数轴中(type: 'log')有效。

\n", "uiControl": { "type": "number", "default": "10" } }, "silent": { "desc": "

坐标轴是否是静态无法交互。

\n" }, "triggerEvent": { "desc": "

坐标轴的标签是否响应和触发鼠标事件,默认不响应。

\n

事件参数如下:

\n
{\n    // 组件类型,xAxis, yAxis, radiusAxis, angleAxis\n    // 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex\n    componentType: string,\n    // 未格式化过的刻度值, 点击刻度标签有效\n    value: '',\n    // 坐标轴名称, 点击坐标轴名称有效\n    name: ''\n}\n
\n" }, "axisLine": { "desc": "

坐标轴轴线相关设置。

\n" }, "axisLine.show": { "desc": "\n\n

是否显示坐标轴轴线。

\n", "uiControl": { "type": "boolean", "default": "true" } }, "axisLine.symbol": { "desc": "\n\n

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

\n", "uiControl": { "type": "icon", "default": "none" } }, "axisLine.symbolSize": { "desc": "\n\n

轴线两边的箭头的大小,第一个数字表示宽度(垂直坐标轴方向),第二个数字表示高度(平行坐标轴方向)。

\n", "uiControl": { "type": "vector", "default": "10,15" } }, "axisLine.symbolOffset": { "desc": "\n\n

轴线两边的箭头的偏移,如果是数组,第一个数字表示起始箭头的偏移,第二个数字表示末端箭头的偏移;如果是数字,表示这两个箭头使用同样的偏移。

\n", "uiControl": { "type": "vector", "default": "0,0" } }, "axisLine.lineStyle.color": { "desc": "\n\n

坐标轴线线的颜色。

\n
\n

颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)',如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充

\n
// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: 'linear',\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: 'red' // 0% 处的颜色\n    }, {\n        offset: 1, color: 'blue' // 100% 处的颜色\n    }],\n    global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: 'radial',\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: 'red' // 0% 处的颜色\n    }, {\n        offset: 1, color: 'blue' // 100% 处的颜色\n    }],\n    global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
\n
\n", "uiControl": { "type": "color" } }, "axisLine.lineStyle.width": { "desc": "\n\n

坐标轴线线宽。

\n", "uiControl": { "type": "number", "value": "1", "min": "0", "step": "0.5" } }, "axisLine.lineStyle.type": { "desc": "\n\n

坐标轴线线的类型。

\n

可选:

\n
    \n
  • 'solid'
  • \n
  • 'dashed'
  • \n
  • 'dotted'
  • \n
\n", "uiControl": { "type": "enum", "default": "solid", "options": "solid,dashed,dotted" } }, "axisLine.lineStyle.shadowBlur": { "desc": "\n\n

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

\n

示例:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n", "uiControl": { "type": "number", "default": "", "min": "0", "step": "0.5" } }, "axisLine.lineStyle.shadowColor": { "desc": "\n\n

阴影颜色。支持的格式同color

\n", "uiControl": { "type": "color", "default": "" } }, "axisLine.lineStyle.shadowOffsetX": { "desc": "\n\n

阴影水平方向上的偏移距离。

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "axisLine.lineStyle.shadowOffsetY": { "desc": "\n\n

阴影垂直方向上的偏移距离。

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "axisLine.lineStyle.opacity": { "desc": "\n\n

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

\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "axisTick": { "desc": "

坐标轴刻度相关设置。

\n" }, "axisTick.show": { "desc": "\n\n

是否显示坐标轴刻度。

\n", "uiControl": { "type": "boolean", "default": "true" } }, "axisTick.alignWithLabel": { "desc": "\n\n

类目轴中在 boundaryGaptrue 的时候有效,可以保证刻度线和标签对齐。如下图:

\n

\n", "uiControl": { "type": "boolean", "default": "false" } }, "axisTick.interval": { "desc": "\n\n\n\n

坐标轴刻度的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

\n

默认会采用标签不重叠的策略间隔显示标签。

\n

可以设置成 0 强制显示所有标签。

\n

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

\n

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

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

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

\n", "uiControl": { "type": "number", "min": "0", "step": "1" } }, "axisTick.inside": { "desc": "\n\n

坐标轴刻度是否朝内,默认朝外。

\n", "uiControl": { "type": "boolean" } }, "axisTick.length": { "desc": "\n\n

坐标轴刻度的长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5", "default": "5" } }, "axisTick.lineStyle": { "desc": "

刻度线的样式设置。

\n" }, "axisTick.lineStyle.color": { "desc": "

刻度线的颜色,默认取 axisTick.lineStyle.color

\n" }, "axisTick.lineStyle.width": { "desc": "\n\n

坐标轴刻度线宽。

\n", "uiControl": { "type": "number", "value": "1", "min": "0", "step": "0.5" } }, "axisTick.lineStyle.type": { "desc": "\n\n

坐标轴刻度线的类型。

\n

可选:

\n
    \n
  • 'solid'
  • \n
  • 'dashed'
  • \n
  • 'dotted'
  • \n
\n", "uiControl": { "type": "enum", "default": "solid", "options": "solid,dashed,dotted" } }, "axisTick.lineStyle.shadowBlur": { "desc": "\n\n

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

\n

示例:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n", "uiControl": { "type": "number", "default": "", "min": "0", "step": "0.5" } }, "axisTick.lineStyle.shadowColor": { "desc": "\n\n

阴影颜色。支持的格式同color

\n", "uiControl": { "type": "color", "default": "" } }, "axisTick.lineStyle.shadowOffsetX": { "desc": "\n\n

阴影水平方向上的偏移距离。

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "axisTick.lineStyle.shadowOffsetY": { "desc": "\n\n

阴影垂直方向上的偏移距离。

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "axisTick.lineStyle.opacity": { "desc": "\n\n

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

\n\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "minorTick": { "desc": "
\n

v4.6.0 开始支持

\n
\n

坐标轴次刻度线相关设置。

\n

注意:次刻度线无法在类目轴(type: 'category')中使用。

\n

示例:

\n

1) 函数绘图中使用次刻度线

\n