echart3 title配置参数

74 阅读 0 评论 49 点赞

我是靠谱客的博主快乐板凳，最近开发中收集的这篇文章主要介绍echart3 title配置参数，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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太神奇了'
    },
    ......
};

最后

以上就是快乐板凳为你收集整理的echart3 title配置参数的全部内容，希望文章能够帮你解决echart3 title配置参数所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：前端
浏览次数：74 次浏览
发布日期：2024-05-04 12:15:02
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_7_o_26_fx_13__7__26_5.html

echart3 title配置参数

概述

title 下的各个属性如下图：

show

text

link

target

textStyle

textAlign

textBaseline

subtext

sublink

subtarget

subtextStyle

padding

itemGap

zlevel

z

backgroundColor

borderColor

borderWidth

shadowBlur

shadowColor

shadowOffsetX

shadowOffsetY

X

Y

最后

评论列表共有 0 条评论

发表评论取消回复

echart3 title配置参数

概述

title 下的各个属性如下图：

show

text

link

target

textStyle

textAlign

textBaseline

subtext

sublink

subtarget

subtextStyle

padding

itemGap

zlevel

z

backgroundColor

borderColor

borderWidth

shadowBlur

shadowColor

shadowOffsetX

shadowOffsetY

X

Y

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复