echart3 title配置参数

最新推荐文章于 2024-02-10 02:29:17 发布

三宝鸭

最新推荐文章于 2024-02-10 02:29:17 发布

阅读量807

点赞数

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

原文链接：https://blog.csdn.net/weixin_37632678/article/details/79095138

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

title 下的各个属性如下图：

在这里插入图片描述

show

title.show | boolean
[ default: true ]
是否显示标题组件。

例子：

option = {
    title : {
        show:true,//默认为true，可以省略
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

text

title.text | string
[ default: ” ]
主标题文本，支持使用 \n 换行。

option = {
    title : {        
        text: '某站点用户访问来源\nok',//支持使用 \n 换行,'\\n'转义'\n',结果不转行       
    },
    ......
};

link

title.link | string
[ default: ” ]
主标题文本超链接。

option = {
    title : {        
        text: '某站点用户访问来源',
        link:'http://www.baidu.com'       
    },
    ......
};

target

title.target | string
[ default: ‘blank’ ]
指定窗口打开主标题超链接。
可选：
‘self’ 当前窗口打开
‘blank’ 新窗口打开

option = {
    title : {        
        text: '某站点用户访问来源',
        link:'http://www.baidu.com',
        target:"self",//当前窗口打开链接，默认是'blank'新窗口打开
    },
    ......
};

textStyle

title.textStyle

Color

title.textStyle.color | Color
[ default: ‘#333’ ]
主标题文字的颜色。

fontStyle

title.textStyle.fontStyle | string
[ default: ‘normal’ ]
主标题文字字体的风格
可选：
‘normal’
‘italic’
‘oblique’

fontWeight

title.textStyle.fontWeight | string
[ default: ‘bolder’ ]
主标题文字字体的粗细
可选：
‘normal’
‘bold’
‘bolder’
‘lighter’
100 | 200 | 300 | 400…

fontFamily

title.textStyle.fontFamily | string
[ default: ‘sans-serif’ ]
主标题文字的字体系列：

fontSize

title.textStyle.fontSize | number
[ default: 18 ]
主标题文字的字体大小

option = {
    title : {        
        text: '某站点用户访问来源',
        link:'http://www.baidu.com',
        target:"self",
        textStyle:{
            color :'red',
            fontStyle :'oblique',
            fontWeight :'400',
            fontFamily :'sans-serif'
            fontSize :'24'
        }
    },
    ......
};

textAlign

title.textAlign | string 标题文本水平对齐，支持 ‘left’, ‘center’,
‘right’，默认根据标题位置决定。

option = {
    title : {        
        text: '某站点用户访问来源',
        link:'http://www.baidu.com',
        target:"self",
        textStyle:{
            color :'red',
            fontStyle :'oblique',
            fontWeight :'400',
            fontSize :'24'
        },
        textAlign :'center'//以文本水平中心为基线对齐
    },
    ......
};

textBaseline

title.textBaseline | string 标题文本垂直对齐，支持 ‘top’, ‘middle’,
‘bottom’，默认根据标题位置决定。

option = {
    title : {        
        text: '某站点用户访问来源',
        link:'http://www.baidu.com',
        target:"self",
        textStyle:{
            color :'red',
            fontStyle :'oblique',
            fontWeight :'400',
            fontSize :'24'
        },
        textAlign :'left',
        textBaseline :'middle'//以文本垂直中心为基线对齐
    },
    ......
};

subtext

title.subtext | string
[ default: ” ]
副标题文本，支持使用 \n 换行。。

option = {
    title : {        
       subtext: '纯属\n虚构'//可以只有副标题，同样'\n'换行
    },
    ......
};

sublink

title.sublink | string
[ default: ” ]
副标题文本超链接。

option = {
    title : {        
       subtext: '纯属\n虚构',
       sublink :'http://www.baidu.com'
    },
    ......
};

subtarget

title.subtarget | string
[ default: ‘blank’ ]
指定窗口打开副标题超链接，可选：
‘self’ 当前窗口打开
‘blank’ 新窗口打开

option = {
    title : {        
       subtext: '纯属\n虚构',
       sublink :'http://www.baidu.com',
       subtarget :'blank'
    },
    ......
};

subtextStyle

title.subtextStyle

Color

title.subtextStyle.color | Color [ default: ‘#333’ ] 副标题文字的颜色。

fontStyle

title.subtextStyle.fontStyle | string [ default: ‘normal’ ] 副标题文字字体的风格
可选： ‘normal’ ‘italic’ ‘oblique’

fontWeight

title.subtextStyle.fontWeight | string [ default: ‘bolder’ ]
副标题文字字体的粗细可选： ‘normal’ ‘bold’ ‘bolder’ ‘lighter’ 100 | 200 | 300 |
400…

fontFamily

title.subtextStyle.fontFamily | string [ default: ‘sans-serif’ ]
副标题文字的字体系列

fontSize

title.subtextStyle.fontSize | number [ default: 18 ] 副标题文字的字体大小


option = {
    title : {        
       subtext: '纯属\n虚构',
       sublink :'http://www.baidu.com',
       subtarget :'blank',
       subtextStyle : {
            color :'blue',
            fontStyle :'italic',
            fontWeight :'200',
            fontFamily :'sans-serif',
            fontSize :'12'
        }       
    },
    ......
};

padding

title.padding | number
[ default: 5 ]
标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。

option = {
    title : {        
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        padding :30 //主副标题都受作用，可接收数组 
    },
    ......
};

itemGap

title.itemGap | number
[ default: 10 ] 主副标题之间的间距。

option = {
    title : {        
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        padding :30 ,
        itemGap :30//上下距离，不可接收数组，如果传数组副标题会消失在异次元
    },
    
};

zlevel

title.zlevel | number
[ default: 0 ]
所有图形的 zlevel 值。
zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。


option = {
    title : {        
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        padding :30 ,
        itemGap :30 ,
        zlevel :2//会创建新的Canvas ，优先级高
    },
    ......
};

z

title.z | number
[ default: 2 ]
组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
z相比zlevel优先级更低，而且不会创建新的 Canvas。

option = {
    title : {        
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        padding :30 ,
        itemGap :30 ,
        zlevel :2 ,//会创建新的Canvas ，优先级高
        z : 5 //不会创建新的Canvas ，优先级低
    },
    ......
};

backgroundColor

title.backgroundColor | Color
[ default: ‘transparent’ ]
标题背景色，默认透明。

option = {
    title : {        
        text : '某站点用户访问来源',
        subtext : '纯属虚构',
        padding : 20,
        backgroundColor : 'yellow'//若有padding值，同样padding所带来的局域也会布上背景色，与DOM相同
    },
    ......
};

borderColor

title.borderColor | Color
[ default: ‘#ccc’ ]
标题的边框颜色。支持的颜色格式同 backgroundColor。

option = {
    title : {        
        text : '某站点用户访问来源',
        subtext : '纯属虚构',
        padding : 20,
        backgroundColor : 'yellow',
        borderWidth : 2,
        borderColor : 'green'//需配合borderWidth使用，borderWidth的默认值是0
    },
    ......
};

borderWidth

itle.borderWidth | number
[ default: 0 ]
标题的边框线宽。

option = {
    title : {        
        text : '某站点用户访问来源',
        subtext : '纯属虚构',
        padding : 20,
        backgroundColor : 'yellow',
        borderWidth : 2,
        borderColor : 'green'
    },
    ......
};

shadowBlur

title.shadowBlur | number
图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

option = {
    title : {        
        text : '某站点用户访问来源',
        subtext : '纯属虚构',
        padding : 20,
        backgroundColor : 'yellow',
        borderWidth : 2,
        borderColor : 'green',
        shadowBlur : 10,
        shadowColor : '#333'
    },
    ......
};

shadowColor

title.shadowColor | Color
阴影颜色。支持的格式同color。
注意：此配置项生效的前提是，设置了 show: true

option = {
    title : {        
        text : '某站点用户访问来源',
        subtext : '纯属虚构',
        padding : 20,
        backgroundColor : 'yellow',
        borderWidth : 2,
        borderColor : 'green',
        shadowBlur : 10,
        shadowColor : 'red'
    },
    ......
};

shadowOffsetX

title.shadowOffsetX | number
[ default: 0 ]
阴影水平方向上的偏移距离。
注意：此配置项生效的前提是，设置了 show: true。

option = {
    title : {        
        text : '某站点用户访问来源',
        subtext : '纯属虚构',
        padding : 20,
        backgroundColor : 'yellow',
        borderWidth : 2,
        borderColor : 'green',
        shadowBlur : 10,
        shadowColor : '#333',
        shadowOffsetX : -20 //正负分别代表向右向左
    },
    ......
};

shadowOffsetY

title.shadowOffsetY | number
[ default: 0 ]
阴影垂直方向上的偏移距离。
注意：此配置项生效的前提是，设置了 show: true。

option = {
    title : {        
        text : '某站点用户访问来源',
        subtext : '纯属虚构',
        padding : 20,
        backgroundColor : 'yellow',
        borderWidth : 2,
        borderColor : 'green',
        shadowBlur : 10,
        shadowColor : '#333',
        shadowOffsetX : 20 ,
        shadowOffsetY : 20 //正负分别代表向右向左，可用于构建立体效果，但是要注意所能兼容的浏览器
    },
    ......
};

X

title.X | numberX，string
grid 组件水平位置。

option = {
    title : {        
        text : '某站点用户访问来源',
        subtext : '纯属虚构',
        padding : 20,
        backgroundColor : 'yellow',
        borderWidth : 2,
        borderColor : 'green',
        x : 10 //还可设置为'left'、'center'、'right'、'middle'，可对比一下'center'与'middle'的区别，另外也可设置'10'或'10as',例如 x : '20adasdadas'
    },
    ......
};

Y

title.Y | numberY，string
grid 组件水平位置。

option = {
    title : {        
        text : '某站点用户访问来源',
        subtext : '纯属虚构',
        padding : 20,
        backgroundColor : 'yellow',
        borderWidth : 2,
        borderColor : 'green',
        Y : 10 //还可设置为'left'、'center'、'right'、'middle'，这里的'center'与'middle'是没有区别的，另外也可设置'10'或'10可以',例如 x : '20太神奇了'
    },
    ......
};

三宝鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echart3 title配置参数

title 下的各个属性如下图：showtitle.show | boolean[ default: true ]是否显示标题组件。例子：option = { title : { show:true,//默认为true，可以省略 text: '某站点用户访问来源', subtext: '纯属虚构', x:'ce...
复制链接

扫一扫