{ "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"
},
"name.color": {
"desc": "\n\n文字的颜色。
\n", "uiControl": { "type": "color", "default": "'#333'" } }, "name.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" } }, "name.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "name.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"
}
},
"name.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" } }, "name.borderWidth": { "desc": "\n\n文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "name.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "name.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" } }, "name.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "name.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "name.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "name.width": { "desc": "\n\n文本显示宽度。
\n", "uiControl": { "type": "number", "default": "100", "min": "1", "max": "500", "step": "1" } }, "name.height": { "desc": "\n\n文本显示高度。
\n", "uiControl": { "type": "number", "default": "50", "min": "1", "max": "500", "step": "1" } }, "name.textBorderColor": { "desc": "\n\n文字本身的描边颜色。
\n", "uiControl": { "type": "color" } }, "name.textBorderWidth": { "desc": "\n\n文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "name.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "name.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "name.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "name.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "name.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" }, "name.rich.文字的颜色。
\n", "uiControl": { "type": "color", "default": "null" } }, "name.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" } }, "name.rich.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "name.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"
}
},
"name.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"
}
},
"name.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"
}
},
"name.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" } }, "name.rich.文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "name.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "name.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" } }, "name.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "name.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "name.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "name.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" } }, "name.rich.文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "name.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "name.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "name.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "name.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\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对于时间轴(type: 'time'
),formatter
的字符串模板支持多种形式:
string
类型Function
类型object
类型下面我们分别介绍这三种形式。
\n字符串模板
\n使用字符串模板是一种方便实现常用日期时间格式化方式的形式。如果字符串模板可以实现你的效果,那我们优先推荐使用此方式;如果无法实现,再考虑其他两种更复杂的方式。支持的模板如下:
\n分类 | \n模板 | \n取值(英文) | \n取值(中文) | \n
---|---|---|---|
Year | \n{yyyy} | \ne.g., 2020, 2021, ... | \n例:2020, 2021, ... | \n
\n | {yy} | \n00-99 | \n00-99 | \n
Quarter | \n{Q} | \n1, 2, 3, 4 | \n1, 2, 3, 4 | \n
Month | \n{MMMM} | \ne.g., January, February, ... | \n一月、二月、…… | \n
\n | {MMM} | \ne.g., Jan, Feb, ... | \n1月、2月、…… | \n
\n | {MM} | \n01-12 | \n01-12 | \n
\n | {M} | \n1-12 | \n1-12 | \n
Day of Month | \n{dd} | \n01-31 | \n01-31 | \n
\n | {d} | \n1-31 | \n1-31 | \n
Day of Week | \n{eeee} | \nSunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday | \n星期日、星期一、星期二、星期三、星期四、星期五、星期六 | \n
\n | {ee} | \nSun, Mon, Tues, Wed, Thu, Fri, Sat | \n日、一、二、三、四、五、六 | \n
\n | {e} | \n1-54 | \n1-54 | \n
Hour | \n{HH} | \n00-23 | \n00-23 | \n
\n | {H} | \n0-23 | \n0-23 | \n
\n | {hh} | \n01-12 | \n01-12 | \n
\n | {h} | \n1-12 | \n1-12 | \n
Minute | \n{mm} | \n00-59 | \n00-59 | \n
\n | {m} | \n0-59 | \n0-59 | \n
Second | \n{ss} | \n00-59 | \n00-59 | \n
\n | {s} | \n0-59 | \n0-59 | \n
Millisecond | \n{SSS} | \n000-999 | \n000-999 | \n
\n | {S} | \n0-999 | \n0-999 | \n
\n\n其他语言请参考相应语言包中的定义,语言包可以通过 echarts.registerLocale 注册。
\n
示例:
\nformatter: '{yyyy}-{MM}-{dd}' // 得到的 label 形如:'2020-12-02'\nformatter: '{d}日' // 得到的 label 形如:'2日'\n
\n回调函数
\n回调函数可以根据刻度值返回不同的格式,如果有复杂的时间格式化需求,也可以引用第三方的日期时间相关的库(如 Moment.js、date-fns 等),返回显示的文本。
\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分级模板
\n有时候,我们希望对不同的时间粒度采用不同的格式化策略。例如,在季度图表中,我们可能希望对每个月的第一天显示月份,而其他日期显示日期。我们可以使用以下方式实现该效果:
\n示例:
\nformatter: {\n month: '{MMMM}', // 一月、二月、……\n day: '{d}日' // 1日、2日、……\n}\n
\n支持的分级以及各自默认的取值为:
\n{\n year: '{yyyy}',\n month: '{MMM}',\n day: '{d}',\n hour: '{HH}:{mm}',\n minute: '{HH}:{mm}',\n second: '{HH}:{mm}:{ss}',\n millisecond: '{hh}:{mm}:{ss} {SSS}',\n none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'\n}\n
\n以 day
为例,当一个刻度点的值的小时、分钟、秒、毫秒都为 0
时,将采用 day
的分级值作为模板。none
表示当其他规则都不适用时采用的模板,也就是带有毫秒值的刻度点的模板。
富文本
\n以上这三种形式的 formatter 都支持富文本,所以可以做成一些复杂的效果。
\n示例:
\nxAxis: {\n type: 'time',\n axisLabel: {\n formatter: {\n // 一年的第一个月显示年度信息和月份信息\n year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n month: '{monthStyle|{MMM}}'\n },\n rich: {\n yearStyle: {\n // 让年度信息更醒目\n color: '#000',\n fontWeight: 'bold'\n },\n monthStyle: {\n color: '#999'\n }\n }\n }\n},\n
\n使用回调函数形式实现上面例子同样的效果:
\n示例:
\nxAxis: {\n type: 'time',\n axisLabel: {\n formatter: function (value) {\n const date = new Date(value);\n const yearStart = new Date(value);\n yearStart.setMonth(0);\n yearStart.setDate(1);\n yearStart.setHours(0);\n yearStart.setMinutes(0);\n yearStart.setSeconds(0);\n yearStart.setMilliseconds(0);\n // 判断一个刻度值知否为一年的开始\n if (date.getTime() === yearStart.getTime()) {\n return '{year|' + date.getFullYear() + '}\\n'\n + '{month|' + (date.getMonth() + 1) + '月}';\n }\n else {\n return '{month|' + (date.getMonth() + 1) + '月}'\n }\n },\n rich: {\n year: {\n color: '#000',\n fontWeight: 'bold'\n },\n month: {\n color: '#999'\n }\n }\n }\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": "\n\n文本显示宽度。
\n", "uiControl": { "type": "number", "default": "100", "min": "1", "max": "500", "step": "1" } }, "axisLabel.height": { "desc": "\n\n文本显示高度。
\n", "uiControl": { "type": "number", "default": "50", "min": "1", "max": "500", "step": "1" } }, "axisLabel.textBorderColor": { "desc": "\n\n文字本身的描边颜色。
\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.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" }, "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\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\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" } } }