ECharts——标题title所有配置项详解

一、Echarts3可以有多个标题

1、主标题

option={
    title:{
        id://组件 ID:可用于在 option 或者 API 中引用组件。
        show:true//是否显示标题组件。
        text:''//主标题文本，可以用\n换行
        link:''//文本超链接
        //指定窗口打开主标题超链接。
        target：'self'\'blank'  //当前窗口打开\新窗口打开
        textStyle:{//文字样式
            color:
            fontstyle:'normal'\'italic'\'oblique'
            fontWeight:'normal'\'bold'\'bolder'\'lighter'\100 | 200 | 300 | 400...//文字粗细
            fontFamily：//字体
            fontSize:
            lineHeight://行高
            width：
            height：
            textBorderColor：//文字描边颜色
            textBorderWidth：//文字描边宽度
            textBorderType：'solid'实线\'dashed'虚线\'dotted'点线//文字描边类型
            textShadowColor：//文字阴影
            // 在文本中，可以对部分文本采用 rich 中定义样式。
            // 这里需要在文本中使用标记符号：
            // `{styleName|text content text content}` 用字面量方式标记样式名。
            // 注意，换行仍是使用 '\n'。
            //示例如下：
            formatter: [
               `{a|这段文本采用样式a}`,
               `{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}`
            ].join('\n'),

            rich: {
                a: {
                    color: 'red',
                    lineHeight: 10
                    },
                b: {
                    backgroundColor: {
                        image: 'xxx/xxx.jpg'
                        },
                    height: 40
                    },
                x: {
                    fontSize: 18,
                    fontFamily: 'Microsoft YaHei',
                    borderColor: '#449933',
                    borderRadius: 4
                    },
            },
            
    }




}

2、副标题

subtext、sublink、subtarget、subtextStyle，和主标题一致，副标题的subtextStyle有一些多出来的配置项，如下：

subtextStyle:{
       align:'left'\'center'\'right'//文字水平对齐方式，默认自动。
       verticalAlign:'top'\'middle'\'bottom'//文字垂直对齐方式，默认自动。
}

二、标题本身的配置

option={
    title:{
        id://组件 ID:可用于在 option 或者 API 中引用组件。
        show:true//是否显示标题组件。
        textAlign：'auto'\'left'\'right'\'center'//整体（包括 text 和 subtext）的水平对齐。
        textVerticalAlign:'auto'\'top'\'bottom'\'middle'//整体（包括 text 和 subtext）的垂直对齐。
        triggerEventboolean://是否触发事件。
        padding://内边距
        itemGap：//主副标题之间的间距。
        zlevelnumber//分成不同图层，上层覆盖下层，会创建新的canvas，影响性能
        z://控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低，而且不会创建新的 Canvas。
        left://title 组件离容器左侧的距离
        top://title 组件离容器上侧的距离。
        right:
        bottom:
        backgroundColor://标题背景色，默认透明。
        borderWidth://标题的边框线宽。
        borderRadius://圆角半径，单位px，支持传入数组分别指定 4 个圆角半径(数组形式：上右下左)
        shadowBlur://图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
//示例：
        {
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 10
        }
//注意：此配置项生效的前提是，设置了 show: true 以及值不为 tranparent(透明)的背景色