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。