Echarts title配置项

本文详细介绍了Echarts中title组件的配置项,包括主标题、副标题的文本内容、样式、链接、对齐方式、背景色、边框、阴影等各项属性,帮助开发者实现定制化的图表标题展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

var option={

title:{

id:'组件id',//组件id。默认不指定。指定则可用于在 option 或者 API 中引用组件

show:true,//是否显示标题组件

text:'主标题文本',//主标题文本

link:'',//主标题文本超链接

target:'blank/self',//指定窗口打开主标题超链接。self:当前窗口打开;blank:新窗口打开

textStyle:{

color:'#fff',//主标题文字颜色

fontStyle:'normal/italic/oblique',

//主标题文字字体风格。normal:正常;italic:倾斜;oblique:强制倾斜,用于不可倾斜的文字

fontWeight:'normal/bold/bolder/lighter',

//主标题文字粗细。100、200、300、400(normal)、500、600、700(bold)、800、900。

fontFamily:'',//主标题文字的字体系列

fontSize:12,//主标题文字的字体大小

lineHeight:12,//行高

width:20,//文本显示宽度

height:15,//文本显示高度

textBorderColor:'#fff',//文字本身的描边颜色

textBorderWidth:1,//文字本身的描边宽度

textBorderType:'solid/dashed/dotted',

//文字本身的描边类型。solid:实线;dashed:虚线;dotted:点。

textBorderDashOffset:1,

//设置虚线的偏移量,可搭配 textBorderType 指定 dash array 实现灵活的虚线效果

textShadowColor:'#fff',//文字本身阴影颜色

textShadowBlur:1,

//文字本身的阴影长度。textShadowOffsetX:文字本身的阴影 X 偏移; textShadowOffsetY

overflow:'truncate/break/breakAll'

//文字超出宽度是否截断或者换行。truncate:截断;break:换行;breakAll:强制单词内换行;

},

subText:'副标题',//副标题文本

sublink:'',//副标题文本超链接

subtarget:'self/blank',//指定窗口打开副标题超链接

subtextStyle:{...},//同textStyle

textAlign:'auto/left/right/center',//整体(包括 text 和 subtext)的水平对齐

textVerticalAlign:'auto/top/bottom/middle',

//整体(包括 text 和 subtext)的垂直对齐

triggerEvent:ture/false,//是否触发事件

padding:5,//标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距

itemGap:5,//主副标题之间的间距

left:'auto/20px/20%',//title 组件离容器左侧的距离

//top、right、bottom值同上,分别是上右下距离

backgroundColor:'#fff',//标题背景色,默认透明

borderColor:'#fff',//标题的边框颜色

borderWidth:'#fff',//标题的边框线宽

borderRadius:5,//圆角半径,单位px,支持传入数组分别指定4个圆角半径

shadowBlur:5,//图形阴影的模糊大小(前提:show:true;backgroundColor不为tranparent)

shadowColor:'#fff',//阴影颜色(前提:show:true)

shadowOffsetX:5,//阴影水平方向上的偏移距离(前提:show:true)

shadowOffsetY:5//阴影垂直方向上的偏移距离(前提:show:true)

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值