echarts的title标题属性
title
标题组件,包含主标题和副标题。 位于 option对象第一层.
title.text
设置主标题内容title.subtext
设置副标题内容
在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件,这在需要标题进行排版,或者单个实例中的多个图表都需要标题时会比较有用。
var option = {
//标题
title : {
show:true, //显示策略,默认值true,可选为:true(显示) | false(隐藏)
text: '主标题', //主标题文本,'\n'指定换行
link:'', //主标题文本超链接,默认值true
target: null, //指定窗口打开主标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口)
subtext: '副标题', //副标题文本,'\n'指定换行
sublink: '', //副标题文本超链接
subtarget: null, //指定窗口打开副标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口)
x:'center' //水平安放位置,默认为'left',可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
y: 'top', //垂直安放位置,默认为top,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
textAlign: null ,//水平对齐方式,默认根据x设置自动调整,可选为: left' | 'right' | 'center
backgroundColor: 'rgba(0,0,0,0)', //标题背景颜色,默认'rgba(0,0,0,0)'透明
borderColor: '#ccc', //标题边框颜色,默认'#ccc'
borderWidth: 0, //标题边框线宽,单位px,默认为0(无边框)
padding: 5, //标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距
itemGap: 10, //主副标题纵向间隔,单位px,默认为10
textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
subtextStyle: {//副标题文本样式{"color": "#aaa"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
zlevel: 0, //一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas,相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层,canvas对象增多会消耗更多的内存和性能,并不建议设置过多的zlevel,大部分情况可以通过二级层叠控制z实现层叠控制。
z: 6, //二级层叠控制,默认6,同一个canvas(相同zlevel)上z越高约靠顶层。
}
title: {
show: true, // 是否显示标题,默认为true
text: "1主标题", // 主标题文本
subtext: "副标题", // 副标题文本
x: "center", // 标题水平安放位置,可选值为'left'、'center'、'right'或具体的水平坐标值
y: "bottom", // 标题垂直安放位置,可选值为'top'、'bottom'、'center'或具体的垂直坐标值
backgroundColor: "red", // 标题背景颜色
borderWidth: 5, // 标题边框线宽
borderColor: "#ccffee", // 标题边框颜色
padding: 5, // 标题内边距
itemGap: 10, // 主副标题纵向间隔
textStyle: {
// 主标题文本样式
fontFamily: "Arial, Verdana, sans...",
fontSize: 12,
fontStyle: "normal",
fontWeight: "normal",
color: "#333",
},
subtextStyle: {
// 副标题文本样式
fontFamily: "Arial, Verdana, sans...",
fontSize: 12
color: "#aaa", // 副标题文字的颜色
fontStyle: "normal", // 副标题文字字体的风格,可选值为'normal'、'italic'、'oblique'
fontWeight: "bold", // 副标题文字字体的粗细,可选值为'normal'、'bold'、'bolder'、'lighter'或具体的数值
fontSize: 18, // 字体大小
lineHeight: "130", // 行高
textBorderColor: "red", // 文字本身的描边颜色
textBorderWidth: 5, // 文字本身的描边宽度
textShadowColor: "transparent", // 文字本身的阴影颜色
textShadowBlur: 0, // 文字本身的阴影长度
textShadowOffsetX: 0, // 文字本身的阴影 X 偏移
textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移
},
},
title
标题组件,包含主标题和副标题。
在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件,这在需要标题进行排版,或者单个实例中的多个图表都需要标题时会比较有用。
例如下面不同缓动函数效果的示例,每一个缓动效果图都带有一个标题组件:
所有属性
title. idstring
组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
title. show
= true
boolean
是否显示标题组件。
title. text
= ‘’
string
主标题文本,支持使用 \n 换行。
title. link
= ''string
主标题文本超链接。
title. target
= 'blank’string
指定窗口打开主标题超链接。
可选:
‘self’ 当前窗口打开
‘blank’ 新窗口打开
title. textStyleObject
title.textStyle. color
= ‘#333’
Color
主标题文字的颜色。
title.textStyle. fontStyle
= ‘normal’
string
主标题文字字体的风格。
可选:
‘normal’
‘italic’
‘oblique’
title.textStyle. fontWeight
= ‘bolder’
stringnumber
主标题文字字体的粗细。
可选:
‘normal’
‘bold’
‘bolder’
‘lighter’
100 | 200 | 300 | 400…
title.textStyle. fontFamily
= ‘sans-serif’
string
主标题文字的字体系列。
还可以是 ‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, …
title.textStyle. fontSize
= 18
number
主标题文字的字体大小。
title.textStyle. lineHeight
number
行高。
rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。例如:
{
lineHeight: 56,
rich: {
a: {
// 没有设置 lineHeight
,则 lineHeight
为 56
}
}
}
title.textStyle. width
number
文本显示宽度。
title.textStyle. height
number
文本显示高度。
title.textStyle. textBorderColor
Color
文字本身的描边颜色。
title.textStyle. textBorderWidth
number
文字本身的描边宽度。
title.textStyle. textBorderType
= ‘solid’
stringnumberArray
文字本身的描边类型。
可选:
‘solid’
‘dashed’
‘dotted’
自 v5.0.0 开始,也可以是 number 或者 number 数组,用以指定线条的 dash array,配合 textBorderDashOffset 可实现更灵活的虚线效果。
例如:
{
textBorderType: [5, 10],
textBorderDashOffset: 5
}
title.textStyle. textBorderDashOffset
number
从 v5.0.0 开始支持
用于设置虚线的偏移量,可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。
更多详情可以参考 MDN lineDashOffset。
title.textStyle. textShadowColor
= ‘transparent’
Color
文字本身的阴影颜色。
title.textStyle. textShadowBlur
number
文字本身的阴影长度。
title.textStyle. textShadowOffsetX
number
文字本身的阴影 X 偏移。
title.textStyle. textShadowOffsetY
number
文字本身的阴影 Y 偏移。
title.textStyle. overflow
= ‘none’
string
文字超出宽度是否截断或者换行。配置width时有效
‘truncate’ 截断,并在末尾显示ellipsis配置的文本,默认为…
‘break’ 换行
‘breakAll’ 换行,跟’break’不同的是,在英语等拉丁文中,'breakAll’还会强制单词内换行
title.textStyle. ellipsis
= '…'string
在overflow配置为’truncate’的时候,可以通过该属性配置末尾显示的文本。
title.textStyle. richObject
在 rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
label: {
// 在文本中,可以对部分文本采用 rich 中定义样式。
// 这里需要在文本中使用标记符号:
// {styleName|text content text content}
标记样式名。
// 注意,换行仍是使用 ‘\n’。
formatter: [
‘{a|这段文本采用样式a}’,
‘{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}’
].join(‘\n’),
rich: {
a: {
color: 'red',
lineHeight: 10
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4
},
...
}
}
详情参见教程:富文本标签
所有属性
{ <style_name> }
title. subtext
= ‘’
string
副标题文本,支持使用 \n 换行。
title. sublink
= ''string
副标题文本超链接。
title. subtarget
= 'blank’string
指定窗口打开副标题超链接,可选:
‘self’ 当前窗口打开
‘blank’ 新窗口打开
title. subtextStyleObject
title.subtextStyle. color
= ‘#aaa’
Color
副标题文字的颜色。
title.subtextStyle. fontStyle
= ‘normal’
string
副标题文字字体的风格。
可选:
‘normal’
‘italic’
‘oblique’
title.subtextStyle. fontWeight
= ‘normal’
stringnumber
副标题文字字体的粗细。
可选:
‘normal’
‘bold’
‘bolder’
‘lighter’
100 | 200 | 300 | 400…
title.subtextStyle. fontFamily
= ‘sans-serif’
string
副标题文字的字体系列。
还可以是 ‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, …
title.subtextStyle. fontSize
= 12
number
副标题文字的字体大小。
title.subtextStyle. align
string
文字水平对齐方式,默认自动。
可选:
‘left’
‘center’
‘right’
rich 中如果没有设置 align,则会取父层级的 align。例如:
{
align: right,
rich: {
a: {
// 没有设置 align
,则 align
为 right
}
}
}
title.subtextStyle. verticalAlign
string
文字垂直对齐方式,默认自动。
可选:
‘top’
‘middle’
‘bottom’
rich 中如果没有设置 verticalAlign,则会取父层级的 verticalAlign。例如:
{
verticalAlign: bottom,
rich: {
a: {
// 没有设置 verticalAlign
,则 verticalAlign
为 bottom
}
}
}
title.subtextStyle. lineHeight
number
行高。
rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。例如:
{
lineHeight: 56,
rich: {
a: {
// 没有设置 lineHeight
,则 lineHeight
为 56
}
}
}
title.subtextStyle. width
number
文本显示宽度。
title.subtextStyle. height
number
文本显示高度。
title.subtextStyle. textBorderColor
Color
文字本身的描边颜色。
title.subtextStyle. textBorderWidth
number
文字本身的描边宽度。
title.subtextStyle. textBorderType
= ‘solid’
stringnumberArray
文字本身的描边类型。
可选:
‘solid’
‘dashed’
‘dotted’
自 v5.0.0 开始,也可以是 number 或者 number 数组,用以指定线条的 dash array,配合 textBorderDashOffset 可实现更灵活的虚线效果。
例如:
{
textBorderType: [5, 10],
textBorderDashOffset: 5
}
title.subtextStyle. textBorderDashOffset
number
从 v5.0.0 开始支持
用于设置虚线的偏移量,可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。
更多详情可以参考 MDN lineDashOffset。
title.subtextStyle. textShadowColor
= ‘transparent’
Color
文字本身的阴影颜色。
title.subtextStyle. textShadowBlur
number
文字本身的阴影长度。
title.subtextStyle. textShadowOffsetX
number
文字本身的阴影 X 偏移。
title.subtextStyle. textShadowOffsetY
number
文字本身的阴影 Y 偏移。
title.subtextStyle. overflow
= ‘none’
string
文字超出宽度是否截断或者换行。配置width时有效
‘truncate’ 截断,并在末尾显示ellipsis配置的文本,默认为…
‘break’ 换行
‘breakAll’ 换行,跟’break’不同的是,在英语等拉丁文中,'breakAll’还会强制单词内换行
title.subtextStyle. ellipsis
= '…'string
在overflow配置为’truncate’的时候,可以通过该属性配置末尾显示的文本。
title.subtextStyle. richObject
在 rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
label: {
// 在文本中,可以对部分文本采用 rich 中定义样式。
// 这里需要在文本中使用标记符号:
// {styleName|text content text content}
标记样式名。
// 注意,换行仍是使用 ‘\n’。
formatter: [
‘{a|这段文本采用样式a}’,
‘{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}’
].join(‘\n’),
rich: {
a: {
color: 'red',
lineHeight: 10
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4
},
...
}
}
详情参见教程:富文本标签
所有属性
{ <style_name> }
title. textAlign
= ‘auto’
string
整体(包括 text 和 subtext)的水平对齐。
可选值:‘auto’、‘left’、‘right’、‘center’。
title. textVerticalAlign
= ‘auto’
string
整体(包括 text 和 subtext)的垂直对齐。
可选值:‘auto’、‘top’、‘bottom’、‘middle’。
title. triggerEventboolean
是否触发事件。
title. padding
= 5
numberArray
标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
使用示例:
// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
title. itemGap
= 10
number
主副标题之间的间距。
title. zlevelnumber
所有图形的 zlevel 值。
zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
title. z
= 2number
组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
z相比zlevel优先级更低,而且不会创建新的 Canvas。
title. left
= ‘auto’
stringnumber
title.组件离容器左侧的距离。
left 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比,也可以是 ‘left’, ‘center’, ‘right’。
如果 left 的值为 ‘left’, ‘center’, ‘right’,组件会根据相应的位置自动对齐。
title. top
= ‘auto’
stringnumber
title.组件离容器上侧的距离。
top 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比,也可以是 ‘top’, ‘middle’, ‘bottom’。
如果 top 的值为 ‘top’, ‘middle’, ‘bottom’,组件会根据相应的位置自动对齐。
title. right
= ‘auto’
stringnumber
title.组件离容器右侧的距离。
right 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比。
默认自适应。
title. bottom
= ‘auto’
stringnumber
title.组件离容器下侧的距离。
bottom 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比。
默认自适应。
title. backgroundColor
= ‘transparent’
Color
标题背景色,默认透明。
颜色可以使用 RGB 表示,比如 ‘rgb(128, 128, 128)’ ,如果想要加上 alpha 通道,可以使用 RGBA,比如 ‘rgba(128, 128, 128, 0.5)’,也可以使用十六进制格式,比如 ‘#ccc’
title. borderColor
= ‘#ccc’
Color
标题的边框颜色。支持的颜色格式同 backgroundColor。
title. borderWidth
number
标题的边框线宽。
title. borderRadius
numberArray
圆角半径,单位px,支持传入数组分别指定 4 个圆角半径。 如:
borderRadius: 5, // 统一设置四个角的圆角大小
borderRadius: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)
title. shadowBlur
number
图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
示例:
{
shadowColor: ‘rgba(0, 0, 0, 0.5)’,
shadowBlur: 10
}
注意:此配置项生效的前提是,设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor。
title. shadowColor
Color
阴影颜色。支持的格式同color。
注意:此配置项生效的前提是,设置了 show: true。
title. shadowOffsetX
number
阴影水平方向上的偏移距离。
注意:此配置项生效的前提是,设置了 show: true。
title. shadowOffsetY
number
阴影垂直方向上的偏移距离。
注意:此配置项生效的前提是,设置了 show: true。