Echarts学习之路 —— title配置项

echarts 中包含很多可配置项，先从title配置项来看。

title顾名思义就是title组件，它是echarts中的一个比较简单的组件，在我看来title组件就只有三个部分的内容。即是标题外观、主标题、副标题。

一、标题外观

其包含的可配置项有如下：

show（[ default: true ]）： 标题组件的显示与否，默认显示
padding（[ default: 5 ]）：标题组件内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
// 位置，类似于HTML中的绝对定位
left（[ default: ‘auto’ ]）：标题离容器左侧的距离
right（[ default: ‘auto’ ]）：标题离容器右侧的距离
top（[ default: ‘auto’ ]）：标题离容器上侧的距离
bottom（[ default: ‘auto’ ]）：标题离容器下侧的距离
// 阴影
shadowBlur（[ default: 0 ]）：图形阴影的模糊大小
shadowColor（[ default:‘#000’]）：图形阴影的颜色
shadowOffsetX（[ default: 0 ]）：阴影水平方向上的偏移距离
shadowOffsetY（[ default: 0 ]）：阴影垂直方向上的偏移距离
// 边框
borderWidth（[ default: 0 ]）：标题组件的边框宽度
borderColor（[ default: ‘#ccc’ ]）：标题组件的边框颜色
borderRadius（[ default: 0 ]）：标题组件的圆角

z和zlevel另说

title: {
   text: '文本示例',
   borderColor: 'red',
   borderWidth: 2,
   borderRadius: 5,
   shadowBlur: 0,
   shadowColor: 'blue',
   shadowOffsetX: 5,
   shadowOffsetY: 5,
   backgroundColor: 'yellow',
   left: 'center',
   top: 'top',
   padding: 20
 }

效果图：

二、主标题

其包含的可配置项有如下：

text（[ default: ” ]）：主标题文字
link（[ default: ” ]）：主标题文本超链接
target（[ default: ‘blank’ ]）：指定窗口打开主标题超链接
textStyle：主标题样式，是一个可配置项，主要配置如下

// textStyle配置项
// 文字相关
color（[ default: ‘#333’ ]）：主标题文字颜色
fontStyle（[ default: normal ]）：主标题文字字体的风格
fontWeight（[ default: normal ]）：主标题文字字体的粗细
fontFamily（[ default: ‘sans-serif’ ]）：主标题文字的字体系列
fontSize（[ default: 18 ]）：主标题文字的字体大小
align：文字水平对齐方式
verticalAlign：文字垂直对齐方式
lineHeight：行高。默认继承父层级行高
// 文字描边
textBorderColor（[ default: ‘transparent’ ]）：文字本身的描边颜色
textBorderWidth（[ default: 0 ]）：文字本身的描边宽度
// 阴影
textShadowBlur（[ default: 0 ]）：主标题文字本身的阴影长度
textShadowColor（[ default: ‘transparent’ ]）：主标题文字本身的阴影颜色
textShadowOffsetX（[ default: 0 ]）：主标题文字本身的阴影水平偏移
textShadowOffsetY（[ default: 0 ]）：主标题文字本身的阴影垂直偏移
// 文字块大小
width：文字块的宽度。
height：文字块高度。

说明： width、height只能在定义了rich属性的情况下使用。align、verticalAlign只有在定义了width、height的情况下才有意义，rich属性另说

text: '这是一个主标题',
link: 'http://www.baidu.com',
target: 'blank',
textStyle: {
  color: '#f00',
  fontStyle: 'italic',
  fontWeight: 'bold',
  fontFamily: '微软雅黑',
  fontSize: '24',
  align: 'left',
  verticalAlign: 'top',
  // lineHeight: 100,
  textBorderColor: '#000',
  textBorderWidth: 5,
  textShadowBlur: 5,
  textShadowColor: 'green',
  textShadowOffsetX: 5,
  textShadowOffsetY: 5
}

效果图：

三、副标题

其包含的可配置项有如下：

subtext（[ default: ” ]）：副标题文字
sublink （[ default: ” ]）：副标题文本超链接
subtarget（[ default: ‘blank’ ]）：指定窗口打开副标题超链接
subtextStyle：副标题样式，是一个可配置项，主要配置如主标题textStyle

subtext: '这是一个副标题',
sublink: 'http://www.baidu.com',
subtarget: 'blank',
subtextStyle: {
  // **textStyle**配置项
  //  文字相关
  color: '#00f',
  fontStyle: 'normal',
  fontWeight: 'normal',
  fontFamily: '微软雅黑',
  fontSize: '16',
  align: 'right',
  verticalAlign: 'top',
  // lineHeight: 100,
  // 文字描边
  textBorderColor: '#0f0',
  textBorderWidth: 5,
  // 阴影
  textShadowBlur: 5,
  textShadowColor: '#000',
  textShadowOffsetX: 5,
  textShadowOffsetY: 5
}

效果图：

基于主副标题的存在，title的另一个可配置项是itemGap，用于设置主副标题之间的上下间隔，基于以上效果我们设置itemGap为50的效果图是：

关于title配置项基本就这么多，还有一些遗留问题，z、zlevel、rich。