title的配置项

title配置项

1. title:标题组件：包含主标题和副标题
2. show:是否显示主题
3. link:主标题文本超链接。
4. target:指定窗口打开主标题超链接。跳转方式：‘self’ 当前窗口打开 ‘blank’ 新窗口打开
5. textStyle/subtextStyle:都是主副标题
   1. color:主标题文字的颜色。
   2. fontStyle：主标题文字字体的风格。方式：normal\italic\oblique
   3. fontWeight:主标题文字字体的粗细。方式：normal\bold\bolder\lighter\100|200|300|400|500|600 类型 ：string|number
   4. fontFamily:主标题文字的字体系列。
   5. fontSize:设置字体大小
   6. lineHeight:设置行高：rich 中如果没有设置 lineHeight，则会取父层级的 lineHeight
   7. width/height:设置文本显示宽度和高度。
   8. textBorderColor：文字本身的描边颜色。’
   9. textBorderWidth：文字本身的描边宽度。
   10. textBorderType：文字本身的描边类型。方式:solid/dashed/dotted 或:[5,10],
   11. textBorderDashOffset：用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。
   12. textShadowColor：文字本身的阴影颜色
   13. textShadowBlur：文字本身的阴影长度。
   14. textShadowOffsetX/textShadowOffsetY：文字本身的阴影 X 偏移或Y偏移
   15. overflow：文字超出宽度是否截断或者换行。配置width时有效
       1. ‘truncate’ 截断，并在末尾显示ellipsis配置的文本，默认为…
       2. break：换行
       3. ‘breakAll’ 换行，跟’break’不同的是，在英语等拉丁文中，'breakAll’还会强制单词内换行
   16. ellipsis:在overflow配置为’truncate’的时候，可以通过该属性配置末尾显示的文本。
   17. rich：在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
       1. <style_name> :就是主副标题{text|内容}需要在text:中使用这种方式<style_name> 使用{text|你好，我是折线图}
          1. color:文字的颜色
          2. fontStyle:文字字体的风格,类型：normal、italice、oblique
          3. fontWeight:文字字体的粗细，选项：normal、bold、bolder、lighter、100|200|300|400|500|600
          4. fontFamily:文字的字体系列。
          5. fontSize:设置文字大小
          6. align:文字水平对齐方式，默认自动。类型：right、left、center
          7. verticalAlign:rich 中如果没有设置 verticalAlign，则会取父层级的 verticalAlign。选项：top\middle、bottom
          8. lineHeight:设置行高
          9. backgroundColor:文字块背景色
          10. borderColor:文字块边框颜色。
          11. borderWidth:文字块边框宽度
          12. borderRadius:文字块的圆角。
          13. padding: //文字块的内边距
              1. padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。
              2. padding: 4：表示 padding: [4, 4, 4, 4]。
              3. padding: [3, 4]：表示 padding: [3, 4, 3, 4]。
          14. shadowColor:文字块的背景阴影颜色。
          15. shadowOffsetX/shadowOffsetY:200,//文字块的背景阴影 X偏移/Y 偏移。
          16. width/height:设置高度和宽度
          17. textBorderColor：文字本身的描边颜色。
          18. textBorderWidth:文字本身的描边宽度。
          19. textShadowColor:文字本身的阴影颜色。
          20. textShadowBlur:文字本身的阴影长度。
          21. textShadowOffsetX/textShadowOffsetY：文字本身的阴影 X 偏移和Y 偏移。
6. subtext:副标题文本，支持使用 \n 换行。
7. sublink:副标题文本超链接。
8. subtarget:指定窗口打开副标题超链接 类型:blank:新窗口打开 self：当前窗口打开
9. textAlign:整体（包括 text 和 subtext）的水平对齐。 类型有：‘auto’、‘left’、‘right’、‘center’。
10. textVerticalAlign:整体（包括 text 和 subtext）的垂直对齐。可选值：‘auto’、‘top’、‘bottom’、‘middle’。
11. triggerEvent:是否触发事件
12. padding:标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。padding方式：padding: [5, 10]/padding: [5,5，5 、 10]
13. itemGap:主副标题之间的间距
14. zlevel:所有图形的 zlevel 值。
15. z:组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
16. left/right/top/right/bottom:组件离容器左右上下侧的距离
17. backgroundColor：设置背景颜色
18. borderColor：标题的边框颜色。支持的颜色格式同 backgroundColor。
19. borderWidth：标题的边框线宽
20. borderRadius：圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。
21. shadowColor：阴影颜色
22. shadowBlur：图形阴影的模糊大小
23. shadowOffsetX/shadowOffsetX：阴影水平方向上的偏移距离。注意：此配置项生效的前提是，设置了 show: true。

title配置项使用方式

//设置配置项
let option = {
    //标题组件：包含主标题和副标题
    title: {
        text: "{text|你好，我是折线图}\n你好，我是折线图",//设置主标题，支持换行\n
        show: true,//是否显示主标题
        link: "https://www.baidu.com",//主标题文本超链接。
        target: 'blank',//指定窗口打开主标题超链接。跳转方式：'self' 当前窗口打开  'blank' 新窗口打开
        //设置主题的样式：类型：object
        textStyle: {
            color: "#f00",//主标题文字的颜色。
            fontStyle: "oblique",//主标题文字字体的风格。方式：normal\italic\oblique
            fontWeight: "bold",//主标题文字字体的粗细。方式：normal\bold\bolder\lighter\100|200|300|400|500|600 类型 ：string|number
            fontFamily: '楷体',//主标题文字的字体系列。
            fontSize: 100,//设置字体大小
            lineHeight: 100,//设置行高：rich 中如果没有设置 lineHeight，则会取父层级的 lineHeight
            width: 500,//设置文本显示宽度。
            height: 100,//设置文本显示高度
            textBorderColor: "#000",//文字本身的描边颜色。
            textBorderWidth: 5,//文字本身的描边宽度。
            textBorderType: 'dashed',//文字本身的描边类型。方式:solid/dashed/dotted 或:[5,10],
            textBorderDashOffset: 5,//用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。
            textShadowColor: "transparent",//文字本身的阴影颜色。
            textShadowBlur: 100,//文字本身的阴影长度。
            textShadowOffsetX: 8,//文字本身的阴影 X 偏移。
            textShadowOffsetY: 8,//文字本身的阴影 Y 偏移
            overflow: 'truncate',//文字超出宽度是否截断或者换行。配置width时有效
            /*
            'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...
            'break' 换行
            'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
            * */
            ellipsis: "...",//在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。
            //在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
            rich: {
                text: {
                    color: "#f0f",//文字的颜色。需要在text:中使用这种方式<style_name>  使用{text|你好，我是折线图}
                    fontStyle: "italic",//文字字体的风格,类型：normal、italice、oblique
                    fontWeight: 600,//文字字体的粗细，选项：normal、bold、bolder、lighter、100|200|300|400|500|600
                    fontFamily: 'sans-serif',//文字的字体系列。
                    fontSize: 18,//设置文字大小
                    align: 'right',//文字水平对齐方式，默认自动。类型：right、left、center
                    verticalAlign: 'middle',//rich 中如果没有设置 verticalAlign，则会取父层级的 verticalAlign。选项：top\middle、bottom
                    lineHeight: 100,//设置行高
                    backgroundColor: "yellow",//文字块背景色。
                    borderColor: "#f00",//文字块边框颜色。
                    borderWidth: 10,//文字块边框宽度
                    borderRadius: 10,//文字块的圆角。
                    padding: [10, 20, 30, 50],//文字块的内边距
                    /*
                    padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。
                    padding: 4：表示   padding: [4, 4, 4, 4]。
                    padding: [3, 4]：表示 padding: [3, 4, 3, 4]。
                    * */
                    shadowColor:"#f0f",//文字块的背景阴影颜色。
                    shadowOffsetX:10,//文字块的背景阴影 X 偏移。
                    shadowOffsetY:200,//文字块的背景阴影 Y 偏移。
                    width:200,
                    height:200,textBorderColor:"#000",//文字本身的描边颜色。
                    textBorderWidth:10,//文字本身的描边宽度。
                    textShadowColor:"#fff",//文字本身的阴影颜色。
                    textShadowBlur:20,//文字本身的阴影长度。
                    textShadowOffsetX:20,//文字本身的阴影 X 偏移。
                    textShadowOffsetY:30,//文字本身的阴影 Y 偏移。
                }
            },

        },
        subtext:"{subText|我是副标题}",//副标题文本，支持使用 \n 换行。
        sublink:'https://echarts.apache.org/zh/option.html#title.subtext',//副标题文本超链接。
        subtarget:"self",//指定窗口打开副标题超链接 类型:blank:新窗口打开  self：当前窗口打开
        subtextStyle: {
            color: "yellow",//主标题文字的颜色。
            fontStyle: "italic",//主标题文字字体的风格。方式：normal\italic\oblique
            fontWeight: "bolder",//主标题文字字体的粗细。方式：normal\bold\bolder\lighter\100|200|300|400|500|600 类型 ：string|number
            fontFamily: '宋体',//主标题文字的字体系列。
            fontSize: 50,//设置字体大小
            lineHeight: 50,//设置行高：rich 中如果没有设置 lineHeight，则会取父层级的 lineHeight
            width: 500,//设置文本显示宽度。
            height: 100,//设置文本显示高度
            textBorderColor: "#0ff",//文字本身的描边颜色。
            textBorderWidth: 5,//文字本身的描边宽度。
            textBorderType: 'dashed',//文字本身的描边类型。方式:solid/dashed/dotted 或:[5,10],
            textBorderDashOffset: 5,//用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。
            textShadowColor: "transparent",//文字本身的阴影颜色。
            textShadowBlur: 100,//文字本身的阴影长度。
            textShadowOffsetX: 8,//文字本身的阴影 X 偏移。
            textShadowOffsetY: 8,//文字本身的阴影 Y 偏移
            overflow: 'truncate',//文字超出宽度是否截断或者换行。配置width时有效
            /*
            'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...
            'break' 换行
            'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
            * */
            ellipsis: "...",//在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。
            //在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
            rich: {
                subText: {
                    color: "#f0f",//文字的颜色。需要在text:中使用这种方式<style_name>  使用{text|你好，我是折线图}
                    fontStyle: "italic",//文字字体的风格,类型：normal、italice、oblique
                    fontWeight: 600,//文字字体的粗细，选项：normal、bold、bolder、lighter、100|200|300|400|500|600
                    fontFamily: 'sans-serif',//文字的字体系列。
                    fontSize: 18,//设置文字大小
                    align: 'right',//文字水平对齐方式，默认自动。类型：right、left、center
                    verticalAlign: 'middle',//rich 中如果没有设置 verticalAlign，则会取父层级的 verticalAlign。选项：top\middle、bottom
                    lineHeight: 100,//设置行高
                    backgroundColor: "yellow",//文字块背景色。
                    borderColor: "#f00",//文字块边框颜色。
                    borderWidth: 10,//文字块边框宽度
                    borderRadius: 10,//文字块的圆角。
                    padding: [10, 20, 30, 50],//文字块的内边距
                    /*
                    padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。
                    padding: 4：表示   padding: [4, 4, 4, 4]。
                    padding: [3, 4]：表示 padding: [3, 4, 3, 4]。
                    * */
                    shadowColor:"#f0f",//文字块的背景阴影颜色。
                    shadowOffsetX:10,//文字块的背景阴影 X 偏移。
                    shadowOffsetY:200,//文字块的背景阴影 Y 偏移。
                    width:200,
                    height:200,
                    textBorderColor:"#000",//文字本身的描边颜色。
                    textBorderWidth:10,//文字本身的描边宽度。
                    textShadowColor:"#fff",//文字本身的阴影颜色。
                    textShadowBlur:20,//文字本身的阴影长度。
                    textShadowOffsetX:20,//文字本身的阴影 X 偏移。
                    textShadowOffsetY:30,//文字本身的阴影 Y 偏移。
                }
            },

        },
        textAlign:'left',//整体（包括 text 和 subtext）的水平对齐。  类型有：'auto'、'left'、'right'、'center'。
        textVerticalAlign:'middle',//整体（包括 text 和 subtext）的垂直对齐。可选值：'auto'、'top'、'bottom'、'middle'。
        triggerEvent:false,//是否触发事件。
        padding:6,//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。padding方式：padding: [5, 10]/padding: [5,5，5 、 10]
        itemGap:5,//主副标题之间的间距。
        zlevel:22,//所有图形的 zlevel 值。
        z:2,//组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
        left:"10%",//title 组件离容器左侧的距离。
        top:'20%',//title 组件离容器上侧的距离。
        right:"20%",//title 组件离容器右侧的距离。
        bottom:"20%",//title 组件离容器下侧的距离。
        backgroundColor:"yellow",//设置背景颜色
        borderColor:"#ccc",//标题的边框颜色。支持的颜色格式同 backgroundColor。
        borderWidth:10,//标题的边框线宽。
        borderRadius:20,//圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。
        shadowColor: 'rgba(0, 0, 0, 1)',//阴影颜色
        shadowBlur: 10,//图形阴影的模糊大小
        shadowOffsetX:10,//阴影水平方向上的偏移距离。注意：此配置项生效的前提是，设置了 show: true。
        shadowOffsetY:20//阴影水平方向上的偏移距离。注意：此配置项生效的前提是，设置了 show: true。
    },
}