标题组件,包含主标题和副标题
title: {
// id: "bar01",
show: true, // 是否显示标题组件
text: "柱状图", // 主标题文本,支持使用 \n 换行
link: "http://www.baidu.com", // 主标题文本超链接。
target: "self", // 'self' 当前窗口打开 默认:'blank' 新窗口打开
// 主标题文字样式设置
textStyle: {
color: "pink", // 主标题文字的颜色
fontStyle: "italic", // 主标题文字字体的风格 1 normal 标准的 2 italic 斜体的 3 oblique 倾斜的
fontWeight: "bolder", // 主标题文字字体的粗细。1 normal 标准的 2 bold 粗体 3 bolder 4 lighter 细体 5 100 | 200 | 300 | 400...
fontSize: 20, //主标题文字的字体大小。 number
// lineHeight: 30, // 行高。number
// width: 30, // 文本显示宽度。 number
// height: 30, // 文本显示高度。 number
textBorderColor: "red", // 文字本身的描边颜色。Color
textBorderWidth: 3, // 文字本身的描边宽度 number
textBorderType: "solid", // 文字本身的描边类型 1 solid 实线 2 dashed 虚线 3 dotted 斑点
textBorderDashOffset: 5, // 用于设置虚线的偏移量 参考文档
textShadowColor: "black", // 文字本身的阴影颜色。 color
textShadowBlur: 5, //文字本身的阴影长度。
textShadowOffsetX: 5, // 文字本身的阴影 X 偏移
textShadowOffsetY: 3, // 文字本身的阴影 Y 偏移
overflow: "none", // 默认 none 1 'truncate' 截断,并在末尾显示ellipsis配置的文本,默认为... 2 'break' 换行 3 breakAll 强制单词内换行
ellipsis: "更多", // 在overflow配置为'truncate'的时候,可以通过该属性配置末尾显示的文本。
},
// 副标题
subtext: "副标题", // 副标题文本,支持使用 \n 换行。
sublink: "http://www.baidu.com", // 副标题文本超链接。
subtarget: "self", // 指定窗口打开副标题超链接 默认:'blank' 新窗口打开 2 self
subtextStyle: {
color: "red", // 副标题文字的颜色。
fontStyle: "italic", // 副标题文字字体的风格 1 normal 标准的 2 italic 斜体的 3 oblique 倾斜的
fontWeight: "bolder", // 主标题文字字体的粗细。1 normal 标准的 2 bold 粗体 3 bolder 4 lighter 细体 5 100 | 200 | 300 | 400...
fontSize: 14, //主标题文字的字体大小。 number
// lineHeight: 30, // 行高。number
// width: 30, // 文本显示宽度。 number
// height: 30, // 文本显示高度。 number
textBorderColor: "red", // 文字本身的描边颜色。Color
textBorderWidth: 3, // 文字本身的描边宽度 number
textBorderType: "solid", // 文字本身的描边类型 1 solid 实线 2 dashed 虚线 3 dotted 斑点
textBorderDashOffset: 5, // 用于设置虚线的偏移量 参考文档
textShadowColor: "black", // 文字本身的阴影颜色。 color
textShadowBlur: 5, //文字本身的阴影长度。
textShadowOffsetX: 5, // 文字本身的阴影 X 偏移
textShadowOffsetY: 3, // 文字本身的阴影 Y 偏移
overflow: "none", // 默认 none 1 'truncate' 截断,并在末尾显示ellipsis配置的文本,默认为... 2 'break' 换行 3 breakAll 强制单词内换行
ellipsis: "更多", // 在overflow配置为'truncate'的时候,可以通过该属性配置末尾显示的文本。
},
textAlign: "auto", // 整体(包括 text 和 subtext)的水平对齐。可选值 'auto'、'left'、'right'、'center'。
// textVerticalAlign: "bottom", // 整体(包括 text 和 subtext)的垂直对齐。 'auto'、'top'、'bottom'、'middle'
triggerEvent: false, // 是否触发事件。
padding: 10, // 标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
/*
// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
*/
itemGap: 10, // 主副标题之间的间距。
left: "30%", // title 组件离容器左侧的距离。 left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'。
top: "auto", // top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'。
right: "auto", // right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。
bottom: "auto", //bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。
backgroundColor: "rgba(0,0,0,.1)", // 标题背景色,默认透明。
borderColor: "black", // 标题的边框颜色。支持的颜色格式同 backgroundColor。
borderWidth: 1, // 标题的边框线宽。
borderRadius: 20, // 圆角半径,单位px,支持传入数组分别指定 4 个圆角半径。 如: borderRadius: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)
// borderRadius: 5 统一设置四个角的圆角大小
shadowBlur: 10, // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "red", // 阴影颜色。支持的格式同color。
shadowOffsetX: 10, // 阴影水平方向上的偏移距离。
shadowOffsetY: 3, // 阴影垂直方向上的偏移距离。
// 注意:此配置项生效的前提是,设置了 show: true。
},