二、Echart图表 之 title配置项大全

作者主页：仙女不下凡

前言介绍：以下内容是我个人对于该技术的总结，如有不足与错误敬请指正！

欢迎点赞 收藏⭐ 留言 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！

---

• 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工具栏组件配置项大全