Echarts学习之路 —— title配置项

xiaoxiao2021-02-28  3

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。

转载请注明原文地址: https://www.6miu.com/read-1400118.html

最新回复(0)