title的配置项

最新推荐文章于 2023-03-02 08:04:15 发布

程序潇潇

最新推荐文章于 2023-03-02 08:04:15 发布

阅读量1.7k

点赞数 12

分类专栏： echarts echarts中title配置项文章标签： echarts

本文链接：https://blog.csdn.net/fxxx_/article/details/124393508

版权

echarts 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

echarts中title配置项

1 篇文章 0 订阅

订阅专栏

title配置项

title:标题组件：包含主标题和副标题
show:是否显示主题
link:主标题文本超链接。
target:指定窗口打开主标题超链接。跳转方式：‘self’ 当前窗口打开 ‘blank’ 新窗口打开
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 偏移。
subtext:副标题文本，支持使用 \n 换行。
sublink:副标题文本超链接。
subtarget:指定窗口打开副标题超链接类型:blank:新窗口打开 self：当前窗口打开
textAlign:整体（包括 text 和 subtext）的水平对齐。类型有：‘auto’、‘left’、‘right’、‘center’。
textVerticalAlign:整体（包括 text 和 subtext）的垂直对齐。可选值：‘auto’、‘top’、‘bottom’、‘middle’。
triggerEvent:是否触发事件
padding:标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。padding方式：padding: [5, 10]/padding: [5,5，5 、 10]
itemGap:主副标题之间的间距
zlevel:所有图形的 zlevel 值。
z:组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
left/right/top/right/bottom:组件离容器左右上下侧的距离
backgroundColor：设置背景颜色
borderColor：标题的边框颜色。支持的颜色格式同 backgroundColor。
borderWidth：标题的边框线宽
borderRadius：圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。
shadowColor：阴影颜色
shadowBlur：图形阴影的模糊大小
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。
    },
}

程序潇潇

关注

12
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
title的配置项

title配置项title:标题组件：包含主标题和副标题show:是否显示主题link:主标题文本超链接。target:指定窗口打开主标题超链接。跳转方式：‘self’ 当前窗口打开 ‘blank’ 新窗口打开textStyle/subtextStyle:都是主副标题color:主标题文字的颜色。fontStyle：主标题文字字体的风格。方式：normal\italic\obliquefontWeight:主标题文字字体的粗细。方式：normal\bold\bolder\lighter
复制链接

扫一扫