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

淡淡的烟草味﹌ 2023-10-06 13:17 21阅读 0赞

## 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。

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

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

相关 ECharts 使用series.title.offsetCenter设置仪表盘标题位置

相关 ECharts 图表标题(title)系列设置

相关 echarts title 配置

相关 ECharts配置项之title(标题)

相关 vue echarts调整图表和标题的距离

相关 Echarts 图表使用（一）

相关【备忘】EChart 标题 title 样式，x轴、y轴坐标显示，调整图表位置等

相关 Echarts图表的使用

相关 mpvue - 使用Echarts图表