Mikel
来源： 二、Echart图表 之 title配置项大全_echart标题-CSDN博客
title就是图表标题，可以控制它的属性，如颜色、位置等，当有副标题的时候title有两种写法，可以写为数组或对象，下面我就以对象形式整理title的配置项，以数组形式写例子。
title: {
show: true, // 是否显示标题组件,（true/false）
text: ”, // 主标题文本，支持使用\n换行
textAlign:’auto’, //整体水平对齐（包括text和subtext）
textVerticalAlign:’auto’,//整体的垂直对齐（包括text和subtext）
padding:0, // 标题内边距 写法如[5,10]||[ 5,6, 7, 8] ,
left:’auto’, // title组件离容器左侧距离，写法如’5’||’5%’
right:’auto’, //’title组件离容器右侧距离
top:’auto’, // title组件离容器上侧距离
bottom:’auto’, // title组件离容器下侧距离
borderColor: ”, // 标题边框颜色
borderWidth: 1, // 边框宽度（默认单位px）
textStyle: { // 标题样式
color: ”, //字体颜色
fontStyle: ”, //字体风格
fontSize: 14, //字体大小
fontWeight: 400, //字体粗细
fontFamily: ”, //文字字体
lineHeight: ” //字体行高
align:’center’,//文字水平对齐方式（left/right）
verticalAlign:’middle’,//文字垂直对齐方式（top/bottom）
},
subtext: ”, // 副标题
subtextStyle: { // 副标题样式
color: ‘#ccc’,
fontStyle:’normal’,
fontWeight:’normal’,
fontFamily:’sans-serif’,
fontSize:18,
lineHeight:18,
}
}
下面为大家举个例子，展示title在图表中使用的实际效果与数组写法，效果与代码如下
title: [
{ // 标题
text: ‘Michelson-Morley Experiment’,
left: ‘center’
},
{ // 副标题
text: ‘upper: Q3 + 1.5 * IQR \nlower: Q1 – 1.5 * IQR’, // ‘/n’代表换行
borderColor: ‘#999’,
borderWidth: 1, // 边框宽度（默认单位px）
textStyle: { // 标题样式
fontSize: 14
},
left: ‘10%’, // 位置
top: ‘90%’ // 位置
}
],
👉推荐相关文章：Echart图表 之 基本使用及配置项
👉推荐相关文章：Echart图表 之 颜色color配置项大全
👉推荐相关文章：Echart图表 之 legend图例组件配置项大全
👉推荐相关文章：Echart图表 之 X轴（xAxis）与Y轴（yAxis）配置项大全
👉推荐相关文章：Echart图表 之 tooltip提示框组件配置项大全
👉推荐相关文章：Echart图表 之 toolbox工具栏组件配置项大全
————————————————
版权声明：本文为CSDN博主「仙女不下凡」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_55181759/article/details/124838942
