ECharts 图表标题(title)系列使用详解

title

说明：图表标题。

1 title.show

说明：是否显示标题组件。

默认值：true。

可选值：

        （1） true，显示标题。

        （2） false，隐藏标题。

2 title.text

说明：主标题文本，支持使用 \n 换行。

默认值：''

3 title.textStyle

说明：主标题样式。

3.1 title.textStyle.color

说明：主标题文字字体的颜色。

默认值：'#333'。

3.2 title.textStyle.fontStyle

说明：主标题文字字体的风格。

默认值：'normal'。

可选值：

        （1） 'normal'，正常风格。

        （2） 'italic'，倾斜体。

        （3） 'oblique'，倾斜体。

3.3 title.textStyle.fontWeight

说明：主标题文字字体的粗细。

默认值：'normal'。

可选值：

        （1） 'normal'，正常粗细。

        （2） 'bold'，粗体。

        （3） 'bolder'，粗体。

        （4） 'lighter'，正常粗细。

3.3 title.textStyle.fontFamily

说明：主标题文字的字体。

默认值：'sans-serif'。

可选值：

        （1） 'sans-serif'。

        （2） 'serif'。

        （3） 'monospace'。

        （4） 'Arial'。

        （5） 'Courier New'。

        （6） 'Microsoft YaHei'，微软雅黑。

3.4 title.textStyle.fontSize

说明：主标题文字的字体大小。

默认值：18。

3.5 title.textStyle.lineHeight

说明：主标题行高。

默认值：跟textStyle.fontSize一致。

4 title.subtext

说明：副标题文本，支持使用 \n 换行。

默认值：''。

5 title.subtextStyle

说明：副标题样式。

5.1 title.subtextStyle.color

说明：副标题文字字体的颜色。

默认值：'#aaa'。

5.2 title.subtextStyle.fontStyle

说明：副标题文字字体的风格。

默认值：'normal'。

可选值：

        （1） 'normal'，正常风格。

        （2） 'italic'，倾斜体。

        （3） 'oblique'，倾斜体。

5.3 title.subtextStyle.fontWeight

说明：副标题文字字体的粗细。

默认值：'normal'。

可选值：

        （1） 'normal'，正常粗细。

        （2） 'bold'，粗体。

        （3） 'bolder'，粗体。

        （4） 'lighter'，正常粗细。

5.4 title.subtextStyle.fontFamily

说明：副标题文字的字体。

默认值：'sans-serif'。

可选值：请参考3.3 title.textStyle.fontFamily

5.5 title.subtextStyle.fontSize

说明：副标题文字的字体大小。

默认值：12。

5.6 title.subtextStyle.lineHeight

说明：副标题行高。

默认值：跟subtextStyle.fontSize一致。

5.7 title.subtextStyle.align

说明：副标题文字水平对齐方式。

默认值：自动。

可选值：

        （1） 'left'，左对齐。

        （2） 'center'，水平居中对齐。

        （3） 'right'，右对齐。

5.8 title.subtextStyle.verticalAlign

说明：副标题文字垂直对齐方式。

默认值：自动。

可选值：

        （1） 'top'，顶部对齐。

        （2） 'middle'，垂直居中对齐。

        （3） 'bottom'，底部对齐。

6 title.textAlign

说明：整体（包括 text 和 subtext）的水平对齐。

默认值：'auto'。

可选值：

        （1） 'auto'。

        （2） 'left'，左对齐。

        （3） 'center'，水平居中对齐。

        （4） 'right'，右对齐。

7 title.textVerticalAlign

说明：整体（包括 text 和 subtext）的垂直对齐。

默认值：'auto'。

可选值：

        （1） 'auto'。

        （2） 'top'，顶部对齐。

        （3） 'middle'，垂直居中对齐。

        （4） 'bottom'，底部对齐。

8 title.padding

说明：标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左内边距。

默认值：5。

可选值：

        （1） 5，上右下左内边距都为5。

        （2） [5, 10]，上下的内边距为 5，左右的内边距为 10。

        （3） [ 5,6, 7, 8]，上内边距为5，右内边距为6，下内边距为7，左内边距为8。

9 title.left

说明：title 组件离容器左侧的距离。

默认值：'auto'。

可选值：

        （1） 'auto'。

        （2） '5'，距离以px为单位。

        （3） '5%'。

10 title.rigth

说明：title 组件离容器右侧的距离。

默认值：'auto'。

可选值：请参考9 title.left。

11 title.top

说明：title 组件离容器上侧的距离。

默认值：'auto'。

可选值：请参考9 title.left。

12 title.bottom

说明：title 组件离容器下侧的距离。

默认值：'auto'。

可选值：请参考9 title.left。