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 ,优先级低
},
......
};
left
title.left | string, number
[ default: ‘auto’ ]
grid 组件离容器左侧的距离。
left 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比,也可以是 ‘left’, ‘center’, ‘right’。
如果 left 的值为’left’, ‘center’, ‘right’,组件会根据相应的位置自动对齐。
-例子
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
padding :30 ,
itemGap :30 ,
zlevel :2 ,
z : 5 ,
left : 40 //还可以是'20%'、'left'、'center'、'right'
},
......
};
right
title.right | string, number
[ default: ‘auto’ ]
grid 组件离容器右侧的距离。
right 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比。
默认自适应。
-例子
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
padding :30 ,
itemGap :30 ,
zlevel :2 ,
z : 5 ,
right: 20 //还可以是'10%'、'left'、'center'、'right'
},
......
};
top
title.top | string, number
[ default: ‘auto’ ]
grid 组件离容器上侧的距离。
top 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比,也可以是 ‘top’, ‘middle’, ‘bottom’。
如果 top 的值为’top’, ‘middle’, ‘bottom’,组件会根据相应的位置自动对齐。
-例子
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
padding :30 ,
itemGap :30 ,
zlevel :2 ,
z : 5 ,
top : 40 //还可以是'20%'、'top'、'middle'、'bottom'
},
......
};
bottom
title.bottom | string, number
[ default: ‘auto’ ]
grid 组件离容器下侧的距离。
bottom 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比。
默认自适应。
-例子
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
padding :30 ,
itemGap :30 ,
zlevel :2 ,
z : 5 ,
bottom : 20 //还可以是'10%'、'top'、'middle'、'bottom'
},
......
};
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
title.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太神奇了'
},
......
};