跳到主要内容

ECharts 标题组件

之前在 《ECharts 图表组成》 小节中我们已经对 图表的各个组件有了基本的认识,从本小节开始我们将逐个介绍这几个组件,本节我们就来看看这至关重要的一环,没有他你甚至连这个图表表示的是什么都不清楚,他的存在就像是网站的标题那样,但是 “标题虽好可不要贪长” 哦,尽量简洁明了。

1. 简介

官方解释:

title 即标题组件,包含主标题与副标题,ECharts 3.0 版本后支持多个标题组件。

慕课解释:

标题组件对应下图红色框部分:

图片描述

title 组件使用频率比较高,功能也比较完备,除了可以自定义样式、位置等基础功能外,还支持超链接模式,主标题、副标题功能等,下面展开讨论。

2. 配置清单

完整配置项:

配置名类型默认值说明
idstring指定后可用于 option 或 API 中引用该组件
showbooltrue是否显示标题组件
textstring主标题文本,支持 \n 换行
linkstring主标题文本超链接
targetstringblank指定主标题打开链接的窗口,与 标签的 target 属性相似,但只支持 self、blank 值
textStyleobject主标题样式配置,详见下文
subtextstring子标题文本,支持 \n 换行
sublinkstring子标题文本超链接
subtargetstringblank指定子标题打开链接的窗口
subtextStyleobject子标题样式配置
textAlignstringauto文本水平对齐方法,可选值: auto、left、center、right
textVerticalAlignstringauto文本垂直对齐方法,可选值: auto、top、middle、bottom
triggerEventbooleanfalse组件是否触发事件
paddingnumberArray <number>5
itemGapnumber10主副标题间距,单位 px
zLevelnumber0一级层叠值
znumber6二级层叠值
leftnumberstringauto
topnumberstringauto
bottomnumberstringauto
rightnumberstringauto
backgroundColorstringrgba(0,0,0,0)组件背景色,支持 RGB 如 rgb(255, 255, 255)、RGBA 如 rgb(255, 255, 255, 0.5)、十六进制如 #fff
borderColorstring#ccc组件边框颜色,支持与 backgroundColor 一样的值
borderWidthnumber0组件边框线宽
borderRadiusnumberArray0
shadowBlurnumber0指定组件阴影模糊值大小,需要设置 show 为 true,且背景色不为 transparent 才能生效
shadowColorstring阴影颜色值,默认为组件的 backgroundColor 值
shadowOffsetXnumber0阴影的水平偏移量
shadowOffsetYnumber0阴影的垂直偏移量

其中,标题样式 textStyle 及副标题样式 subtextStyle 可参阅 ECharts 文本样式 一节。

3. 示例

3.1 基础示例

定义 title 组件,只需通过传入 title 对象即可完成配置,示例: