ECharts 图表标题系列设置详解

在 ECharts 中，你可以通过设置 title 属性来添加图表标题。title 属性是一个对象，包含了多个子属性来控制标题的样式和位置。下面是一个基本的标题设置示例：

option = {
title: {
text: '标题文本', // 设置标题文本
left: 'center', // 设置标题位置，可选值有 'left'、'right'、'center'、'top'、'bottom'
textStyle: { // 设置标题文本样式
color: '#333', // 文本颜色
fontSize: 16 // 字体大小
}
},
// 其他图表配置项...
};

在上面的示例中，我们设置了标题文本为 ‘标题文本’，并将标题位置设置为居中 (center)。我们还使用 textStyle 属性设置了标题文本的颜色和字体大小。
你还可以使用其他属性来进一步定制标题的样式和行为。以下是一些常用的 title 属性：

• text: 设置标题文本。
• left, right, top, bottom: 设置标题位置。这些值可以是 ‘left’、’right’、’center’、’top’、’bottom’ 中的一个，或者是一个包含 x 和 y 坐标的对象，如 {x: 10, y: 20}。
• textStyle: 设置标题文本样式，包括颜色、字体大小等。可以包含 color、fontSize 等属性。
• subtext: 设置副标题文本。
• subtextStyle: 设置副标题文本样式，与 textStyle 类似。
• padding: 设置标题内边距，用于调整标题与其边框或图表的距离。可以是一个数字或包含四个方向的内边距的对象，如 {left: 10, right: 5, top: 20, bottom: 5}。
• itemGap: 设置标题项之间的间距，用于控制多个标题项的排列方式。
• zlevel: 设置标题的 z-level 值，用于控制标题与其它图形的层次关系。较大的 z-level 值表示内容会处于较低的层级。
• z: 与 zlevel 类似，但它是基于同一个 z-level 分层。较大的 z 值表示内容会处于较高的层级。
• show: 控制标题是否显示，可选值为 ‘true’ 或 ‘false’。默认为 ‘true’。
• backgroundColor: 设置标题背景颜色。可以是一个颜色字符串或渐变色对象。
• borderColor, borderWidth: 设置标题边框颜色和宽度。可以是一个颜色字符串或数字。
• borderRadius: 设置标题边框圆角半径。可以是一个数字或包含四个方向的圆角半径的对象。
• shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY: 设置标题阴影效果的颜色、模糊度、水平和垂直偏移量。可以分别设置阴影颜色、模糊度和偏移量。