配置项setOption -- title

最新推荐文章于 2025-03-02 21:35:25 发布

原创最新推荐文章于 2025-03-02 21:35:25 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了ECharts3中标题组件的各项配置参数，包括标题的显示与隐藏、文本内容、链接、对齐方式、间距、背景色及边框等设置，帮助读者更好地理解和使用这些选项。

标题组件，包含主标题和副标题。在 ECharts 3 中可以存在任意多个标题组件，这在需要标题进行排版，或者单个实例中的多个图表都需要标题时会比较有用。

title.show boolean
[ default: true ]
是否显示标题组件。

title.text string
[ default: '' ]
主标题文本，支持使用 \n 换行。

title.link string
[ default: '' ]
主标题文本超链接。

title.target string
[ default: 'blank' ]
指定窗口打开主标题超链接。
可选：
'self' 当前窗口打开
'blank' 新窗口打开

title.textAlign string
标题文本水平对齐，支持 'left', 'center', 'right'，默认根据标题位置决定。

title.textBaseline string
标题文本垂直对齐，支持 'top', 'middle', 'bottom'，默认根据标题位置决定。

title.subtext string
[ default: '' ]
副标题文本，支持使用 \n 换行。

title.sublink string
[ default: '' ]
副标题文本超链接。

title.subtarget string
[ default: 'blank' ]
指定窗口打开副标题超链接，可选：
'self' 当前窗口打开
'blank' 新窗口打开

title.padding number
[ default: 5 ]
标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
使用示例：

// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5，左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]

title.itemGap number
[ default: 10 ]
主副标题之间的间距。

title.zlevel number
[ default: 0 ]
所有图形的 zlevel 值。
zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。
我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

title.z number
[ default: 2 ]
组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
z相比zlevel优先级更低，而且不会创建新的 Canvas。

title.left string, number
[ default: 'auto' ]
grid 组件离容器左侧的距离。
left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。

title.top string, number
[ default: 'auto' ]
grid 组件离容器上侧的距离。
top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。
如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。

title.right string, number
[ default: 'auto' ]
grid 组件离容器右侧的距离。
right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
默认自适应。

title.bottom string, number
[ default: 'auto' ]
grid 组件离容器下侧的距离。
bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
默认自适应。

title.backgroundColor Color
[ default: 'transparent' ]
标题背景色，默认透明。
颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)' ，如果想要加上 alpha 通道，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'

title.borderColor Color
[ default: '#ccc' ]
标题的边框颜色。支持的颜色格式同 backgroundColor。

title.borderWidth number
[ default: 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
[ default: 0 ]
阴影水平方向上的偏移距离。
注意：此配置项生效的前提是，设置了 show: true。

title.shadowOffsetY number
[ default: 0 ]
阴影垂直方向上的偏移距离。
注意：此配置项生效的前提是，设置了 show: true。