{ "type": { "desc": "\n\n
图例的类型。可选值:
\n'plain'
:普通图例。缺省就是普通图例。'scroll'
:可滚动翻页的图例。当图例数量较多时可以使用。当使用 'scroll'
时,使用这些设置进行细节配置:
组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
\n" }, "show": { "desc": "\n\n\n\n\n\n\n\n", "uiControl": { "type": "boolean", "default": "true" } }, "zlevel": { "desc": "所有图形的 zlevel 值。
\nzlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
图例组件离容器左侧的距离。
\nleft
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
图例组件离容器上侧的距离。
\ntop
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
图例组件离容器右侧的距离。
\nright
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
\n", "uiControl": { "type": "percent", "default": "0%" } }, "bottom": { "desc": "\n\n图例组件离容器下侧的距离。
\nbottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
\n", "uiControl": { "type": "percent", "default": "0%" } }, "width": { "desc": "\n\n图例组件的宽度。默认自适应。
\n", "uiControl": { "type": "percent", "default": "50%" } }, "height": { "desc": "\n\n图例组件的高度。默认自适应。
\n", "uiControl": { "type": "percent", "default": "50%" } }, "orient": { "desc": "\n\n图例列表的布局朝向。
\n可选:
\n'horizontal'
'vertical'
图例标记和文本的对齐。默认自动,根据组件的位置和 orient 决定,当组件的 left 值为 'right'
以及纵向布局(orient 为 'vertical'
)的时候为右对齐,即为 'right'
。
可选:
\n'auto'
'left'
'right'
图例内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
\n使用示例:
\n// 设置内边距为 5\npadding: 5\n// 设置上下的内边距为 5,左右的内边距为 10\npadding: [5, 10]\n// 分别设置四个方向的内边距\npadding: [\n 5, // 上\n 10, // 右\n 5, // 下\n 10, // 左\n]\n
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"itemGap": {
"desc": "\n\n图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。
\n", "uiControl": { "type": "number", "default": "10", "min": "0", "step": "0.5" } }, "itemWidth": { "desc": "\n\n图例标记的图形宽度。
\n", "uiControl": { "type": "number", "default": "25", "min": "0", "step": "0.5" } }, "itemHeight": { "desc": "\n\n图例标记的图形高度。
\n", "uiControl": { "type": "number", "default": "14", "min": "0", "step": "0.5" } }, "symbolKeepAspect": { "desc": "\n\n如果图标(可能来自系列的 symbol
或用户自定义的 legend.data.icon
)是 path://
的形式,是否在缩放时保持该图形的长宽比。
用来格式化图例文本,支持字符串模板和回调函数两种形式。
\n示例:
\n// 使用字符串模板,模板变量为图例名称 {name}\nformatter: 'Legend {name}'\n// 使用回调函数\nformatter: function (name) {\n return 'Legend ' + name;\n}\n
\n"
},
"selectedMode": {
"desc": "\n\n图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择,可以设成 false
关闭。
除此之外也可以设成 'single'
或者 'multiple'
使用单选或者多选模式。
图例关闭时的颜色。
\n", "uiControl": { "type": "color", "default": "#ccc" } }, "selected": { "desc": "图例选中状态表。
\n示例:
\nselected: {\n // 选中'系列1'\n '系列1': true,\n // 不选中'系列2'\n '系列2': false\n}\n
"
},
"textStyle": {
"desc": "图例的公用文本样式。
\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": "\n\n文本显示宽度。
\n", "uiControl": { "type": "number", "default": "100", "min": "1", "max": "500", "step": "1" } }, "textStyle.height": { "desc": "\n\n文本显示高度。
\n", "uiControl": { "type": "number", "default": "50", "min": "1", "max": "500", "step": "1" } }, "textStyle.textBorderColor": { "desc": "\n\n文字本身的描边颜色。
\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.overflow": { "desc": "\n\n文字超出宽度是否截断或者换行。配置width
时有效
'truncate'
截断,并在末尾显示ellipsis
配置的文本,默认为...
'break'
换行'breakAll'
换行,跟'break'
不同的是,在英语等拉丁文中,'breakAll'
还会强制单词内换行在overflow
配置为'truncate'
的时候,可以通过该属性配置末尾显示的文本。
文本超出高度部分是否截断,配置height
时有效。
'truncate'
在文本行数超出高度部分截断。在 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" } }, "tooltip": { "desc": "图例的 tooltip 配置,配置项同 tooltip。默认不显示,可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip,如下示例:
\nlegend: {\n formatter: function (name) {\n return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');\n },\n tooltip: {\n show: true\n }\n}\n
\n"
},
"icon": {
"desc": "\n\n图例项的 icon。
\nECharts 提供的标记类型包括
\n'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
, 'none'
可以通过 'image://url'
设置为图片,其中 URL 为图片的链接,或者 dataURI
。
URL 为图片链接例如:
\n'image://http://xxx.xxx.xxx/a/b.png'\n
URL 为 dataURI
例如:
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n
可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
例如:
\n'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
",
"uiControl": {
"type": "icon"
}
},
"data": {
"desc": "图例的数据数组。数组项通常为一个字符串,每一项代表一个系列的 name
(如果是饼图,也可以是饼图单个数据的 name
)。图例组件会自动根据对应系列的图形标记(symbol)来绘制自己的颜色和标记,特殊字符串 ''
(空字符串)或者 '\\n'
(换行字符串)用于图例的换行。
如果 data
没有被指定,会自动从当前系列中获取。多数系列会取自 series.name 或者 series.encode 的 seriesName
所指定的维度。如 饼图 and 漏斗图 等会取自 series.data 中的 name。
如果要设置单独一项的样式,也可以把该项写成配置项对象。此时必须使用 name
属性对应表示系列的 name
。
示例
\ndata: [{\n name: '系列1',\n // 强制设置图形为圆。\n icon: 'circle',\n // 设置文本为红色\n textStyle: {\n color: 'red'\n }\n}]\n
"
},
"data.name": {
"desc": "图例项的名称,应等于某系列的name
值(如果是饼图,也可以是饼图单个数据的 name
)。
图例项的 icon。
\nECharts 提供的标记类型包括
\n'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
, 'none'
可以通过 'image://url'
设置为图片,其中 URL 为图片的链接,或者 dataURI
。
URL 为图片链接例如:
\n'image://http://xxx.xxx.xxx/a/b.png'\n
URL 为 dataURI
例如:
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n
可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
例如:
\n'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
"
},
"data.textStyle": {
"desc": "图例项的文本样式。
\n" }, "backgroundColor": { "desc": "\n\n图例背景色,默认透明。
\n\n\n", "uiControl": { "type": "color" } }, "borderColor": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'rgb(128, 128, 128)'
,如果想要加上 alpha 通道,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
图例的边框颜色。支持的颜色格式同 backgroundColor。
\n", "uiControl": { "type": "color", "default": "#ccc" } }, "borderWidth": { "desc": "\n\n图例的边框线宽。
\n", "uiControl": { "type": "number", "default": "1", "min": "0", "step": "0.5" } }, "borderRadius": { "desc": "\n\n圆角半径,单位px,支持传入数组分别指定 4 个圆角半径。\n如:
\nborderRadius: 5, // 统一设置四个角的圆角大小\nborderRadius: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)\n
",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT,RB,LB"
}
},
"shadowBlur": {
"desc": "\n\n图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n注意:此配置项生效的前提是,设置了 show: true
以及值不为 tranparent
的背景色 backgroundColor
。
阴影颜色。支持的格式同color
。
注意:此配置项生效的前提是,设置了 show: true
。
阴影水平方向上的偏移距离。
\n注意:此配置项生效的前提是,设置了 show: true
。
阴影垂直方向上的偏移距离。
\n注意:此配置项生效的前提是,设置了 show: true
。
legend.type 为 'scroll'
时有效。
图例当前最左上显示项的 dataIndex
。
setOption
时指定此项的话,可决定当前图例滚动到哪里。
但是,如果仅仅想改变图例翻页,一般并不调用 setOption
(因为这太重量了),仅仅使用 action legendScroll 即可。
legend.type 为 'scroll'
时有效。
图例控制块中,按钮和页信息之间的间隔。
\n\n" }, "pageButtonGap": { "desc": "legend.type 为 'scroll'
时有效。
图例控制块和图例项之间的间隔。
\n\n" }, "pageButtonPosition": { "desc": "legend.type 为 'scroll'
时有效。
图例控制块的位置。可选值为:
\n'start'
:控制块在左或上。'end'
:控制块在右或下。legend.type 为 'scroll'
时有效。
图例控制块中,页信息的显示格式。默认为 '{current}/{total}'
,其中 {current}
是当前页号(从 1 开始计数),{total}
是总页数。
如果 pageFormatter
使用函数,须返回字符串,参数为:
{\n current: number\n total: number\n}\n
\n\n"
},
"pageIcons": {
"desc": "legend.type 为 'scroll'
时有效。
图例控制块的图标。
\n" }, "pageIcons.horizontal": { "desc": "legend.orient 为 'horizontal'
时的翻页按钮图标。
是一个数组,表示 [previous page button, next page button]
。默认值为 ['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z']
,。
数组中每项,
\n可以通过 'image://url'
设置为图片,其中 URL 为图片的链接,或者 dataURI
。
URL 为图片链接例如:
\n'image://http://xxx.xxx.xxx/a/b.png'\n
URL 为 dataURI
例如:
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n
可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
例如:
\n'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
\n"
},
"pageIcons.vertical": {
"desc": "legend.orient 为 'vertical'
时的翻页按钮图标。
是一个数组,表示 [previous page button, next page button]
。默认值为 ['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z']
,。
数组中每项,
\n可以通过 'image://url'
设置为图片,其中 URL 为图片的链接,或者 dataURI
。
URL 为图片链接例如:
\n'image://http://xxx.xxx.xxx/a/b.png'\n
URL 为 dataURI
例如:
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n
可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
例如:
\n'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
\n"
},
"pageIconColor": {
"desc": "\n\nlegend.type 为 'scroll'
时有效。
翻页按钮的颜色。
\n\n", "uiControl": { "type": "color", "default": "#2f4554" } }, "pageIconInactiveColor": { "desc": "\n\nlegend.type 为 'scroll'
时有效。
翻页按钮不激活时(即翻页到头时)的颜色。
\n\n", "uiControl": { "type": "color", "default": "#aaa" } }, "pageIconSize": { "desc": "\n\nlegend.type 为 'scroll'
时有效。
翻页按钮的大小。可以是数字,也可以是数组,如 [10, 3]
,表示 [宽,高]
。
legend.type 为 'scroll'
时有效。
图例页信息的文字样式。
\n" }, "pageTextStyle.color": { "desc": "\n\n文字的颜色。
\n", "uiControl": { "type": "color", "default": "#333" } }, "pageTextStyle.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" } }, "pageTextStyle.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "pageTextStyle.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"
}
},
"pageTextStyle.width": {
"desc": "\n\n文本显示宽度。
\n", "uiControl": { "type": "number", "default": "100", "min": "1", "max": "500", "step": "1" } }, "pageTextStyle.height": { "desc": "\n\n文本显示高度。
\n", "uiControl": { "type": "number", "default": "50", "min": "1", "max": "500", "step": "1" } }, "pageTextStyle.textBorderColor": { "desc": "\n\n文字本身的描边颜色。
\n", "uiControl": { "type": "color" } }, "pageTextStyle.textBorderWidth": { "desc": "\n\n文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "pageTextStyle.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "pageTextStyle.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "pageTextStyle.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "pageTextStyle.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "pageTextStyle.overflow": { "desc": "\n\n文字超出宽度是否截断或者换行。配置width
时有效
'truncate'
截断,并在末尾显示ellipsis
配置的文本,默认为...
'break'
换行'breakAll'
换行,跟'break'
不同的是,在英语等拉丁文中,'breakAll'
还会强制单词内换行在overflow
配置为'truncate'
的时候,可以通过该属性配置末尾显示的文本。
文本超出高度部分是否截断,配置height
时有效。
'truncate'
在文本行数超出高度部分截断。图例翻页是否使用动画。
\n", "uiControl": { "type": "boolean", "default": "true" } }, "animationDurationUpdate": { "desc": "\n\n图例翻页时的动画时长。
\n", "uiControl": { "type": "number", "min": "0", "default": "800", "step": "20" } }, "emphasis.selectorLabel": { "desc": "\n\n" }, "emphasis.selectorLabel.show": { "desc": "\n\n从
\nv4.4.0
开始支持
是否显示标签。
\n", "uiControl": { "type": "boolean", "default": "true" } }, "emphasis.selectorLabel.distance": { "desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
参见:label position。
\n", "uiControl": { "type": "number", "default": "5", "min": "0", "step": "0.5" } }, "emphasis.selectorLabel.rotate": { "desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n", "uiControl": { "type": "angle", "default": "0", "min": "-90", "max": "90", "step": "1" } }, "emphasis.selectorLabel.offset": { "desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\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" } }, "emphasis.selectorLabel.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "emphasis.selectorLabel.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"
}
},
"emphasis.selectorLabel.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"
}
},
"emphasis.selectorLabel.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"
}
},
"emphasis.selectorLabel.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
指定高宽,也可以不指定自适应。
如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.selectorLabel.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "emphasis.selectorLabel.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" } }, "emphasis.selectorLabel.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.selectorLabel.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.selectorLabel.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.selectorLabel.width": { "desc": "\n\n文本显示宽度。
\n", "uiControl": { "type": "number", "default": "100", "min": "1", "max": "500", "step": "1" } }, "emphasis.selectorLabel.height": { "desc": "\n\n文本显示高度。
\n", "uiControl": { "type": "number", "default": "50", "min": "1", "max": "500", "step": "1" } }, "emphasis.selectorLabel.textBorderColor": { "desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.selectorLabel.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "emphasis.selectorLabel.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.selectorLabel.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.selectorLabel.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.selectorLabel.overflow": { "desc": "\n\n文字超出宽度是否截断或者换行。配置width
时有效
'truncate'
截断,并在末尾显示ellipsis
配置的文本,默认为...
'break'
换行'breakAll'
换行,跟'break'
不同的是,在英语等拉丁文中,'breakAll'
还会强制单词内换行在overflow
配置为'truncate'
的时候,可以通过该属性配置末尾显示的文本。
文本超出高度部分是否截断,配置height
时有效。
'truncate'
在文本行数超出高度部分截断。在 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" }, "emphasis.selectorLabel.rich.文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\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" } }, "emphasis.selectorLabel.rich.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "emphasis.selectorLabel.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"
}
},
"emphasis.selectorLabel.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"
}
},
"emphasis.selectorLabel.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"
}
},
"emphasis.selectorLabel.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
指定高宽,也可以不指定自适应。
如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.selectorLabel.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "emphasis.selectorLabel.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" } }, "emphasis.selectorLabel.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.selectorLabel.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.selectorLabel.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.selectorLabel.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.selectorLabel.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "emphasis.selectorLabel.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.selectorLabel.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.selectorLabel.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "selector": { "desc": "\n\n从
\nv4.4.0
开始支持
图例组件中的选择器按钮,目前包括全选和反选两种功能。默认不显示,用户可手动开启,也可以手动配置每个按钮的标题。
\n使用方式如下:
\nselector: [\n {\n type: 'all or inverse',\n // 可以是任意你喜欢的 title\n title: '全选'\n },\n {\n type: 'inverse',\n title: '反选'\n }\n]\n\n// 或\nselector: true\n\n// 或\nselector: ['all', 'inverse']\n
\n"
},
"selectorLabel": {
"desc": "\n\n从
\nv4.4.0
开始支持
选择器按钮的文本标签样式,默认显示。
\n" }, "selectorLabel.show": { "desc": "\n\n是否显示标签。
\n", "uiControl": { "type": "boolean", "default": "true" } }, "selectorLabel.distance": { "desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
参见:label position。
\n", "uiControl": { "type": "number", "default": "5", "min": "0", "step": "0.5" } }, "selectorLabel.rotate": { "desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n", "uiControl": { "type": "angle", "default": "0", "min": "-90", "max": "90", "step": "1" } }, "selectorLabel.offset": { "desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\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" } }, "selectorLabel.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "selectorLabel.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"
}
},
"selectorLabel.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"
}
},
"selectorLabel.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"
}
},
"selectorLabel.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
指定高宽,也可以不指定自适应。
如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "selectorLabel.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "selectorLabel.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" } }, "selectorLabel.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "selectorLabel.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "selectorLabel.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "selectorLabel.width": { "desc": "\n\n文本显示宽度。
\n", "uiControl": { "type": "number", "default": "100", "min": "1", "max": "500", "step": "1" } }, "selectorLabel.height": { "desc": "\n\n文本显示高度。
\n", "uiControl": { "type": "number", "default": "50", "min": "1", "max": "500", "step": "1" } }, "selectorLabel.textBorderColor": { "desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "selectorLabel.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "selectorLabel.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "selectorLabel.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "selectorLabel.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "selectorLabel.overflow": { "desc": "\n\n文字超出宽度是否截断或者换行。配置width
时有效
'truncate'
截断,并在末尾显示ellipsis
配置的文本,默认为...
'break'
换行'breakAll'
换行,跟'break'
不同的是,在英语等拉丁文中,'breakAll'
还会强制单词内换行在overflow
配置为'truncate'
的时候,可以通过该属性配置末尾显示的文本。
文本超出高度部分是否截断,配置height
时有效。
'truncate'
在文本行数超出高度部分截断。在 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" }, "selectorLabel.rich.文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\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" } }, "selectorLabel.rich.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "selectorLabel.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"
}
},
"selectorLabel.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"
}
},
"selectorLabel.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"
}
},
"selectorLabel.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
指定高宽,也可以不指定自适应。
如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "selectorLabel.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "selectorLabel.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" } }, "selectorLabel.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "selectorLabel.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "selectorLabel.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "selectorLabel.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "selectorLabel.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "selectorLabel.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "selectorLabel.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "selectorLabel.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "selectorPosition": { "desc": "\n\n\n\n\n\n从
\nv4.4.0
开始支持
选择器的位置,可以放在图例的尾部或者头部,对应的值分别为 'end'
和 'start'
。默认情况下,图例横向布局的时候,选择器放在图例的尾部;图例纵向布局的时候,选择器放在图例的头部。
\n\n从
\nv4.4.0
开始支持
选择器按钮之间的间隔。
\n", "uiControl": { "type": "number", "min": "0", "default": "7", "step": "0.5" } }, "selectorButtonGap": { "desc": "\n\n\n\n\n\n从
\nv4.4.0
开始支持
选择器按钮与图例组件之间的间隔。
\n", "uiControl": { "type": "number", "min": "0", "default": "10", "step": "0.5" } } }