{ "id": { "desc": "
组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
\n" }, "zlevel": { "desc": "所有图形的 zlevel 值。
\nzlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
\n支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。
\n使用示例:
\n// 设置成绝对的像素值\ncenter: [400, 300]\n// 设置成相对的百分比\ncenter: ['50%', '50%']\n
",
"uiControl": {
"type": "percentvector",
"dims": "x,y"
}
},
"radius": {
"desc": "\n\n的半径。可以为如下类型:
\nnumber
:直接指定外半径值。string
:例如,'20%'
,表示外半径为可视区尺寸(容器高宽中较小一项)的 20% 长度。
Array.<number|string>
:数组的第一项是内半径,第二项是外半径。每一项遵从上述 number
string
的描述。
坐标系起始角度,也就是第一个指示器轴的角度。
\n" }, "name": { "desc": "雷达图每个指示器名称的配置项。
\n" }, "name.show": { "desc": "是否显示指示器名称。
\n" }, "name.formatter": { "desc": "指示器名称显示的格式器。支持字符串和回调函数,如下示例:
\n// 使用字符串模板,模板变量为指示器名称 {value}\nformatter: '【{value}】'\n// 使用回调函数,第一个参数是指示器名称,第二个参数是指示器配置项\nformatter: function (value, indicator) {\n return '【' + value + '】';\n}\n
\n"
},
"textStyle.color": {
"desc": "\n\n文字的颜色。
\n", "uiControl": { "type": "color", "default": "'#333'" } }, "textStyle.fontStyle": { "desc": "\n\n文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "textStyle.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "textStyle.lineHeight": { "desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\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"
}
},
"textStyle.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
文字块边框颜色。
\n", "uiControl": { "type": "color", "default": "#fff" } }, "textStyle.borderWidth": { "desc": "\n\n文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "textStyle.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "textStyle.padding": { "desc": "\n\n文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "textStyle.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "textStyle.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "textStyle.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "textStyle.width": { "desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n", "uiControl": { "type": "color" } }, "textStyle.textBorderWidth": { "desc": "\n\n文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "textStyle.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "textStyle.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "textStyle.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "textStyle.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "textStyle.rich": { "desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
\nlabel: {\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" }, "textStyle.rich.文字的颜色。
\n", "uiControl": { "type": "color", "default": "null" } }, "textStyle.rich.文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "textStyle.rich.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "textStyle.rich.文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"textStyle.rich.文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"textStyle.rich.行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\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"
}
},
"textStyle.rich.文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
文字块边框颜色。
\n", "uiControl": { "type": "color", "default": "#fff" } }, "textStyle.rich.文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "textStyle.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "textStyle.rich.文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "textStyle.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "textStyle.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "textStyle.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "textStyle.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n", "uiControl": { "type": "color" } }, "textStyle.rich.文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "textStyle.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "textStyle.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "textStyle.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "textStyle.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "nameGap": { "desc": "\n\n指示器名称和指示器轴的距离。
\n", "uiControl": { "type": "number", "default": "15", "step": "1" } }, "splitNumber": { "desc": "\n\n指示器轴的分割段数。
\n", "uiControl": { "type": "number", "default": "15", "step": "1" } }, "shape": { "desc": "\n\n雷达图绘制类型,支持 'polygon'
和 'circle'
。
是否是脱离 0 值比例。设置成 true
后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
坐标轴是否是静态无法交互。
\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": "vector", "default": "10,15" } }, "axisLine.symbolOffset": { "desc": "\n\n轴线两边的箭头的偏移,如果是数组,第一个数字表示起始箭头的偏移,第二个数字表示末端箭头的偏移;如果是数字,表示这两个箭头使用同样的偏移。
\n", "uiControl": { "type": "vector", "default": "0,0" } }, "axisLine.lineStyle.color": { "desc": "\n\n坐标轴线线的颜色。
\n\n\n", "uiControl": { "type": "color" } }, "axisLine.lineStyle.width": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'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", "uiControl": { "type": "number", "value": "1", "min": "0", "step": "0.5" } }, "axisLine.lineStyle.type": { "desc": "\n\n坐标轴线线的类型。
\n可选:
\n'solid'
'dashed'
'dotted'
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\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": "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.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'solid'
'dashed'
'dotted'
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\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": "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", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "axisLabel": { "desc": "坐标轴刻度标签的相关设置。
\n" }, "axisLabel.show": { "desc": "\n\n是否显示刻度标签。
\n", "uiControl": { "type": "boolean", "default": "true" } }, "axisLabel.rotate": { "desc": "\n\n刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
\n旋转的角度从 -90 度到 90 度。
\n", "uiControl": { "type": "angle", "min": "-90", "max": "90", "step": "1" } }, "axisLabel.margin": { "desc": "\n\n刻度标签与轴线之间的距离。
\n", "uiControl": { "type": "number", "default": "8", "step": "0.5" } }, "axisLabel.formatter": { "desc": "刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
\n示例:
\n// 使用字符串模板,模板变量为刻度默认标签 {value}\nformatter: '{value} kg'\n\n// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引\nformatter: function (value, index) {\n // 格式化成月/日,只在第一个刻度显示年份\n var date = new Date(value);\n var texts = [(date.getMonth() + 1), date.getDate()];\n if (index === 0) {\n texts.unshift(date.getYear());\n }\n return texts.join('/');\n}\n
\n"
},
"axisLabel.showMinLabel": {
"desc": "\n\n是否显示最小 tick 的 label。可取值 true
, false
, null
。默认自动判定(即如果标签重叠,不会显示最小 tick 的 label)。
是否显示最大 tick 的 label。可取值 true
, false
, null
。默认自动判定(即如果标签重叠,不会显示最大 tick 的 label)。
刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下
\n(val: string) => Color\n
\n参数是标签的文本,返回颜色值,如下示例:
\ntextStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : 'red';\n }\n}\n
\n",
"uiControl": {
"type": "color"
}
},
"axisLabel.fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "axisLabel.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "axisLabel.align": { "desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"axisLabel.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"axisLabel.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\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"
}
},
"axisLabel.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
文字块边框颜色。
\n", "uiControl": { "type": "color", "default": "#fff" } }, "axisLabel.borderWidth": { "desc": "\n\n文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "axisLabel.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "axisLabel.padding": { "desc": "\n\n文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "axisLabel.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "axisLabel.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "axisLabel.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "axisLabel.width": { "desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n", "uiControl": { "type": "color" } }, "axisLabel.textBorderWidth": { "desc": "\n\n文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "axisLabel.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "axisLabel.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "axisLabel.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "axisLabel.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "axisLabel.rich": { "desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
\nlabel: {\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" }, "axisLabel.rich.文字的颜色。
\n", "uiControl": { "type": "color", "default": "null" } }, "axisLabel.rich.文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "axisLabel.rich.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "axisLabel.rich.文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"axisLabel.rich.文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"axisLabel.rich.行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\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"
}
},
"axisLabel.rich.文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
文字块边框颜色。
\n", "uiControl": { "type": "color", "default": "#fff" } }, "axisLabel.rich.文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "axisLabel.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "axisLabel.rich.文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "axisLabel.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "axisLabel.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "axisLabel.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "axisLabel.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n", "uiControl": { "type": "color" } }, "axisLabel.rich.文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "axisLabel.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "axisLabel.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "axisLabel.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "axisLabel.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "splitLine": { "desc": "坐标轴在 grid 区域中的分隔线。
\n" }, "splitLine.show": { "desc": "\n\n是否显示分隔线。默认数值轴显示,类目轴不显示。
\n", "uiControl": { "type": "boolean", "default": "true" } }, "splitLine.lineStyle.color": { "desc": "\n\n分隔线颜色,可以设置成单个颜色。
\n也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。
\n示例
\nsplitLine: {\n lineStyle: {\n // 使用深浅的间隔色\n color: ['#aaa', '#ddd']\n }\n}\n
",
"uiControl": {
"type": "color"
}
},
"splitLine.lineStyle.width": {
"desc": "\n\n分隔线线宽。
\n", "uiControl": { "type": "number", "value": "1", "min": "0", "step": "0.5" } }, "splitLine.lineStyle.type": { "desc": "\n\n分隔线线的类型。
\n可选:
\n'solid'
'dashed'
'dotted'
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"splitLine.lineStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
阴影水平方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "splitLine.lineStyle.shadowOffsetY": { "desc": "\n\n阴影垂直方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "splitLine.lineStyle.opacity": { "desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "splitArea": { "desc": "坐标轴在 grid 区域中的分隔区域,默认不显示。
\n" }, "splitArea.show": { "desc": "\n\n是否显示分隔区域。
\n", "uiControl": { "type": "boolean", "default": "true" } }, "splitArea.areaStyle": { "desc": "分隔区域的样式设置。
\n" }, "splitArea.areaStyle.color": { "desc": "分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
\n" }, "splitArea.areaStyle.shadowBlur": { "desc": "\n\n图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"splitArea.areaStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
阴影水平方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "splitArea.areaStyle.shadowOffsetY": { "desc": "\n\n阴影垂直方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "splitArea.areaStyle.opacity": { "desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "indicator": { "desc": "雷达图的指示器,用来指定雷达图中的多个变量(维度),如下示例。
\nindicator: [\n { name: '销售(sales)', max: 6500},\n { name: '管理(Administration)', max: 16000, color: 'red'}, // 标签设置为红色\n { name: '信息技术(Information Techology)', max: 30000},\n { name: '客服(Customer Support)', max: 38000},\n { name: '研发(Development)', max: 52000},\n { name: '市场(Marketing)', max: 25000}\n]\n
\n"
},
"indicator.name": {
"desc": "指示器名称。
\n" }, "indicator.max": { "desc": "\n\n指示器的最大值,可选,建议设置
\n", "uiControl": { "type": "number", "default": "100", "step": "1" } }, "indicator.min": { "desc": "\n\n指示器的最小值,可选,默认为 0。
\n", "uiControl": { "type": "number", "step": "1" } }, "indicator.color": { "desc": "\n\n标签特定的颜色。
\n", "uiControl": { "type": "color" } } }