title.textStyle? ?| ?*

title.textStyle.color? ?| ? Color

[ default: '#333' ]

主标题文字的颜色。

title.textStyle.fontStyle? ?| ?string

[ default: 'normal' ]

主标题文字字体的风格

可选：'normal'

'italic'

'oblique'

title.textStyle.fontWeight? ?| ? string

[ default: normal ]

主标题文字字体的粗细

可选：'normal'

'bold'

'bolder'

'lighter'

100 | 200 | 300 | 400...

title.textStyle.fontFamily? ? | ? string

[ default: 'sans-serif' ]

主标题文字的字体系列

还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

title.textStyle.fontSize? ?| ? number

[ default: 18 ]

主标题文字的字体大小

title.textStyle.align? ?| ? string

文字水平对齐方式，默认自动。

可选：'left'

'center'

'right'

rich?中如果没有设置?align，则会取父层级的?align。例如：{

align: right,

rich: {

a: {

// 没有设置 `align`，则 `align` 为 right

}

}

}

title.textStyle.verticalAlign? ?| ? string

文字垂直对齐方式，默认自动。

可选：'top'

'middle'

'bottom'

rich?中如果没有设置?verticalAlign，则会取父层级的?verticalAlign。例如：{

verticalAlign: bottom,

rich: {

a: {

// 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom

}

}

}

title.textStyle.lineHeight? ? | ? number

行高。

rich?中如果没有设置?lineHeight，则会取父层级的?lineHeight。例如：{

lineHeight: 56,

rich: {

a: {

// 没有设置 `lineHeight`，则 `lineHeight` 为 56

}

}

}

title.textStyle.width? ?| ? number, string

文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片(参见?backgroundColor)时，可能会使用它。

注意，文字块的?width?和?height?指定的是内容高宽，不包含?padding。

width?也可以是百分比字符串，如?'100%'。表示的是所在文本块的?contentWidth(即不包含文本块的?padding)的百分之多少。之所以以?contentWidth?做基数，因为每个文本片段只能基于?content box?布局。如果以?outerWidth?做基数，则百分比的计算在实用中不具有意义，可能会超出。

注意，如果不定义?rich?属性，则不能指定?width?和?height。

title.textStyle.height? ?| ? number, string

文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片(参见?backgroundColor)时，可能会使用它。

注意，文字块的?width?和?height?指定的是内容高宽，不包含?padding。

注意，如果不定义?rich?属性，则不能指定?width?和?height。

title.textStyle.textBorderColor? ?| ? string

[ default: 'transparent' ]

文字本身的描边颜色。

title.textStyle.textBorderWidth? ?| ? number

[ default: 0 ]

文字本身的描边宽度。

title.textStyle.textShadowColor? ?| ? string

[ default: 'transparent' ]

文字本身的阴影颜色。

title.textStyle.textShadowBlur? ?| ? number

[ default: 0 ]

文字本身的阴影长度。

title.textStyle.textShadowOffsetX? ?| ? number

[ default: 0 ]

文字本身的阴影 X 偏移。

title.textStyle.textShadowOffsetY? ? | ? number

[ default: 0 ]

文字本身的阴影 Y 偏移。

以下是一个简单示例：

echarts标题

* {

margin: 0;

padding: 0;

}

#chart_title {

width: 100vw;

height: 100vh;

}

var myChart = echarts.init(document.getElementById('chart_title'));

option = {

title: {

text: 'W3Cschool',//主标题

link: 'https://·/',//主标题超链接

subtext: "Echarts \n 主标题和副标题", //副标题 \n 用于换行

sublink: 'http://·',//副标题超链接

subtarget: 'blank',//副标题超链接打开方式

itemGap: 5,//主副标题间距

left: 'center',//主副标题的水平位置

top: 'center',//主副标题的垂直位置

padding: 20,//标题内边距,

backgroundColor: '#ccc',//背景颜色；

borderColor: '#000',//边框的颜色

borderWidth: 5,//标签线框

borderRadius: 10,//边框切圆角

shadowBlur: 10,//图形阴影模糊大小.

shadowColor: 'aqua',//阴影颜色

shadowOffsetX: '60',//阴影水平方向上的偏移距离

shadowOffsetY: '70',//阴影垂直方向上的偏移距离

// textAlign: 'auto',//整体(包括 text 和 subtext)的水平对齐

// textVerticalAlign: 'auto',//整体(包括 text 和 subtext)的垂直对齐。

textStyle: {//主标题的属性

color: '#C28D21',//颜色

fontSize: 40,//大小

fontStyle: 'oblique',//斜体

fontWeight: '700',//粗细

fontFamily: 'monospace',//字体

// textBorderColor: "#000",//描边

// textBorderWidth: '2',//描边的宽度

textShadowColor: 'red',//阴影颜色

textShadowBlur: '10',//阴影的宽度

textShadowOffsetX: '-0',//阴影向X偏移

textShadowOffsetY: '-70',//阴影向Y偏移

},

subtextStyle: {//副标题的属性

color: '#25664A',

// 同主标题

},

},

}

myChart.setOption(option, true);

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。