echarts的title标题属性

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越高约靠顶层。
        }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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 偏移
  },
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

echarts的title标题属性 官文链接

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
    },
    ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

}
详情参见教程：富文本标签

所有属性
{ <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
    },
    ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

}
详情参见教程：富文本标签

所有属性
{ <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。