1、echarts配置项-title

以html开始

已于 2022-10-15 11:10:00 修改

阅读量1.2k

点赞数 1

分类专栏： Echarts 文章标签： echarts 前端 javascript

于 2022-10-13 22:28:17 首次发布

本文链接：https://blog.csdn.net/qq_53408739/article/details/127302654

版权

Echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

title标题组件，包含主标题和副标题。

在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件，这在需要标题进行排版，或者单个实例中的多个图表都需要标题时会比较有用。

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)
    }
}