网站建设服务器在国外如何打击,wordpress 热门 tags,招聘网站开发需求,河南省新闻出版培训中心echarts的title标题属性
title 标题组件#xff0c;包含主标题和副标题。 位于 option对象第一层.
title.text 设置主标题内容title.subtext 设置副标题内容
在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件包含主标题和副标题。 位于 option对象第一层.
title.text 设置主标题内容title.subtext 设置副标题内容
在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件这在需要标题进行排版或者单个实例中的多个图表都需要标题时会比较有用。
var option {//标题title : {show:true, //显示策略默认值true,可选为true显示 | false隐藏text: 主标题, //主标题文本\n指定换行link:, //主标题文本超链接,默认值truetarget: null, //指定窗口打开主标题超链接支持self | blank不指定等同为blank新窗口subtext: 副标题, //副标题文本\n指定换行sublink: , //副标题文本超链接subtarget: null, //指定窗口打开副标题超链接支持self | blank不指定等同为blank新窗口x:center //水平安放位置默认为left可选为center | left | right | {number}x坐标单位pxy: top, //垂直安放位置默认为top可选为top | bottom | center | {number}y坐标单位pxtextAlign: null ,//水平对齐方式默认根据x设置自动调整可选为 left | right | centerbackgroundColor: rgba(0,0,0,0), //标题背景颜色默认rgba(0,0,0,0)透明borderColor: #ccc, //标题边框颜色,默认#cccborderWidth: 0, //标题边框线宽单位px默认为0无边框padding: 5, //标题内边距单位px默认各方向内边距为5接受数组分别设定上右下左边距itemGap: 10, //主副标题纵向间隔单位px默认为10textStyle: { //主标题文本样式{fontSize: 18,fontWeight: bolder,color: #333}fontFamily: Arial, Verdana, sans...,fontSize: 12,fontStyle: normal,fontWeight: normal,},subtextStyle: {//副标题文本样式{color: #aaa}fontFamily: Arial, Verdana, sans...,fontSize: 12,fontStyle: normal,fontWeight: normal,},zlevel: 0, //一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层canvas对象增多会消耗更多的内存和性能并不建议设置过多的zlevel大部分情况可以通过二级层叠控制z实现层叠控制。z: 6, //二级层叠控制默认6,同一个canvas相同zlevel上z越高约靠顶层。}
title: {show: true, // 是否显示标题默认为truetext: 1主标题, // 主标题文本subtext: 副标题, // 副标题文本x: center, // 标题水平安放位置可选值为left、center、right或具体的水平坐标值y: bottom, // 标题垂直安放位置可选值为top、bottom、center或具体的垂直坐标值backgroundColor: red, // 标题背景颜色borderWidth: 5, // 标题边框线宽borderColor: #ccffee, // 标题边框颜色padding: 5, // 标题内边距itemGap: 10, // 主副标题纵向间隔textStyle: {// 主标题文本样式fontFamily: Arial, Verdana, sans...,fontSize: 12,fontStyle: normal,fontWeight: normal,color: #333,},subtextStyle: {// 副标题文本样式fontFamily: Arial, Verdana, sans...,fontSize: 12color: #aaa, // 副标题文字的颜色fontStyle: normal, // 副标题文字字体的风格可选值为normal、italic、obliquefontWeight: bold, // 副标题文字字体的粗细可选值为normal、bold、bolder、lighter或具体的数值fontSize: 18, // 字体大小lineHeight: 130, // 行高textBorderColor: red, // 文字本身的描边颜色textBorderWidth: 5, // 文字本身的描边宽度textShadowColor: transparent, // 文字本身的阴影颜色textShadowBlur: 0, // 文字本身的阴影长度textShadowOffsetX: 0, // 文字本身的阴影 X 偏移textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移},
}, echarts的title标题属性 官文链接
title 标题组件包含主标题和副标题。
在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件这在需要标题进行排版或者单个实例中的多个图表都需要标题时会比较有用。
例如下面不同缓动函数效果的示例每一个缓动效果图都带有一个标题组件
所有属性
title. idstring
组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
title. show true
boolean 是否显示标题组件。
title. text ‘’
string 主标题文本支持使用 \n 换行。
title. link string
主标题文本超链接。
title. target blank’string
指定窗口打开主标题超链接。
可选
‘self’ 当前窗口打开
‘blank’ 新窗口打开
title. textStyleObject
title.textStyle. color ‘#333’
Color 主标题文字的颜色。
title.textStyle. fontStyle ‘normal’
string 主标题文字字体的风格。
可选
‘normal’ ‘italic’ ‘oblique’
title.textStyle. fontWeight ‘bolder’
stringnumber 主标题文字字体的粗细。
可选
‘normal’ ‘bold’ ‘bolder’ ‘lighter’ 100 | 200 | 300 | 400…
title.textStyle. fontFamily ‘sans-serif’
string 主标题文字的字体系列。
还可以是 ‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, …
title.textStyle. fontSize 18
number 主标题文字的字体大小。
title.textStyle. lineHeight
number 行高。
rich 中如果没有设置 lineHeight则会取父层级的 lineHeight。例如
{ lineHeight: 56, rich: { a: { // 没有设置 lineHeight则 lineHeight 为 56 } } }
title.textStyle. width
number 文本显示宽度。
title.textStyle. height
number 文本显示高度。
title.textStyle. textBorderColor
Color 文字本身的描边颜色。
title.textStyle. textBorderWidth
number 文字本身的描边宽度。
title.textStyle. textBorderType ‘solid’
stringnumberArray 文字本身的描边类型。
可选
‘solid’ ‘dashed’ ‘dotted’ 自 v5.0.0 开始也可以是 number 或者 number 数组用以指定线条的 dash array配合 textBorderDashOffset 可实现更灵活的虚线效果。
例如
{
textBorderType: [5, 10],
textBorderDashOffset: 5 }
title.textStyle. textBorderDashOffset
number 从 v5.0.0 开始支持
用于设置虚线的偏移量可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。
更多详情可以参考 MDN lineDashOffset。
title.textStyle. textShadowColor ‘transparent’
Color 文字本身的阴影颜色。
title.textStyle. textShadowBlur
number 文字本身的阴影长度。
title.textStyle. textShadowOffsetX
number 文字本身的阴影 X 偏移。
title.textStyle. textShadowOffsetY
number 文字本身的阴影 Y 偏移。
title.textStyle. overflow ‘none’
string 文字超出宽度是否截断或者换行。配置width时有效
‘truncate’ 截断并在末尾显示ellipsis配置的文本默认为… ‘break’ 换行 ‘breakAll’ 换行跟’break’不同的是在英语等拉丁文中breakAll’还会强制单词内换行
title.textStyle. ellipsis …string
在overflow配置为’truncate’的时候可以通过该属性配置末尾显示的文本。
title.textStyle. richObject
在 rich 里面可以自定义富文本样式。利用富文本样式可以在标签中做出非常丰富的效果。
例如
label: { // 在文本中可以对部分文本采用 rich 中定义样式。 // 这里需要在文本中使用标记符号 // {styleName|text content text content} 标记样式名。 // 注意换行仍是使用 ‘\n’。 formatter: [ ‘{a|这段文本采用样式a}’, ‘{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}’ ].join(‘\n’),
rich: {a: {color: red,lineHeight: 10},b: {backgroundColor: {image: xxx/xxx.jpg},height: 40},x: {fontSize: 18,fontFamily: Microsoft YaHei,borderColor: #449933,borderRadius: 4},...
}} 详情参见教程富文本标签
所有属性 { style_name }
title. subtext ‘’
string 副标题文本支持使用 \n 换行。
title. sublink string
副标题文本超链接。
title. subtarget blank’string
指定窗口打开副标题超链接可选
‘self’ 当前窗口打开
‘blank’ 新窗口打开
title. subtextStyleObject
title.subtextStyle. color ‘#aaa’
Color 副标题文字的颜色。
title.subtextStyle. fontStyle ‘normal’
string 副标题文字字体的风格。
可选
‘normal’ ‘italic’ ‘oblique’
title.subtextStyle. fontWeight ‘normal’
stringnumber 副标题文字字体的粗细。
可选
‘normal’ ‘bold’ ‘bolder’ ‘lighter’ 100 | 200 | 300 | 400…
title.subtextStyle. fontFamily ‘sans-serif’
string 副标题文字的字体系列。
还可以是 ‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, …
title.subtextStyle. fontSize 12
number 副标题文字的字体大小。
title.subtextStyle. align
string 文字水平对齐方式默认自动。
可选
‘left’ ‘center’ ‘right’ rich 中如果没有设置 align则会取父层级的 align。例如
{ align: right, rich: { a: { // 没有设置 align则 align 为 right } } }
title.subtextStyle. verticalAlign
string 文字垂直对齐方式默认自动。
可选
‘top’ ‘middle’ ‘bottom’ rich 中如果没有设置 verticalAlign则会取父层级的 verticalAlign。例如
{ verticalAlign: bottom, rich: { a: { // 没有设置 verticalAlign则 verticalAlign 为 bottom } } }
title.subtextStyle. lineHeight
number 行高。
rich 中如果没有设置 lineHeight则会取父层级的 lineHeight。例如
{ lineHeight: 56, rich: { a: { // 没有设置 lineHeight则 lineHeight 为 56 } } }
title.subtextStyle. width
number 文本显示宽度。
title.subtextStyle. height
number 文本显示高度。
title.subtextStyle. textBorderColor
Color 文字本身的描边颜色。
title.subtextStyle. textBorderWidth
number 文字本身的描边宽度。
title.subtextStyle. textBorderType ‘solid’
stringnumberArray 文字本身的描边类型。
可选
‘solid’ ‘dashed’ ‘dotted’ 自 v5.0.0 开始也可以是 number 或者 number 数组用以指定线条的 dash array配合 textBorderDashOffset 可实现更灵活的虚线效果。
例如
{
textBorderType: [5, 10],
textBorderDashOffset: 5 }
title.subtextStyle. textBorderDashOffset
number 从 v5.0.0 开始支持
用于设置虚线的偏移量可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。
更多详情可以参考 MDN lineDashOffset。
title.subtextStyle. textShadowColor ‘transparent’
Color 文字本身的阴影颜色。
title.subtextStyle. textShadowBlur
number 文字本身的阴影长度。
title.subtextStyle. textShadowOffsetX
number 文字本身的阴影 X 偏移。
title.subtextStyle. textShadowOffsetY
number 文字本身的阴影 Y 偏移。
title.subtextStyle. overflow ‘none’
string 文字超出宽度是否截断或者换行。配置width时有效
‘truncate’ 截断并在末尾显示ellipsis配置的文本默认为… ‘break’ 换行 ‘breakAll’ 换行跟’break’不同的是在英语等拉丁文中breakAll’还会强制单词内换行
title.subtextStyle. ellipsis …string
在overflow配置为’truncate’的时候可以通过该属性配置末尾显示的文本。
title.subtextStyle. richObject
在 rich 里面可以自定义富文本样式。利用富文本样式可以在标签中做出非常丰富的效果。
例如
label: { // 在文本中可以对部分文本采用 rich 中定义样式。 // 这里需要在文本中使用标记符号 // {styleName|text content text content} 标记样式名。 // 注意换行仍是使用 ‘\n’。 formatter: [ ‘{a|这段文本采用样式a}’, ‘{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}’ ].join(‘\n’),
rich: {a: {color: red,lineHeight: 10},b: {backgroundColor: {image: xxx/xxx.jpg},height: 40},x: {fontSize: 18,fontFamily: Microsoft YaHei,borderColor: #449933,borderRadius: 4},...
}} 详情参见教程富文本标签
所有属性 { style_name }
title. textAlign ‘auto’
string 整体包括 text 和 subtext的水平对齐。
可选值‘auto’、‘left’、‘right’、‘center’。
title. textVerticalAlign ‘auto’
string 整体包括 text 和 subtext的垂直对齐。
可选值‘auto’、‘top’、‘bottom’、‘middle’。
title. triggerEventboolean
是否触发事件。
title. padding 5
numberArray 标题内边距单位px默认各方向内边距为5接受数组分别设定上右下左边距。
使用示例
// 设置内边距为 5 padding: 5 // 设置上下的内边距为 5左右的内边距为 10 padding: [5, 10] // 分别设置四个方向的内边距 padding: [ 5, // 上 10, // 右 5, // 下 10, // 左 ]
title. itemGap 10
number 主副标题之间的间距。
title. zlevelnumber
所有图形的 zlevel 值。
zlevel用于 Canvas 分层不同zlevel值的图形会放置在不同的 Canvas 中Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁例如有动画的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大在手机端上需要谨慎使用以防崩溃。
zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
title. z 2number
组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
z相比zlevel优先级更低而且不会创建新的 Canvas。
title. left ‘auto’
stringnumber
title.组件离容器左侧的距离。
left 的值可以是像 20 这样的具体像素值可以是像 ‘20%’ 这样相对于容器高宽的百分比也可以是 ‘left’, ‘center’, ‘right’。
如果 left 的值为 ‘left’, ‘center’, ‘right’组件会根据相应的位置自动对齐。
title. top ‘auto’
stringnumber
title.组件离容器上侧的距离。
top 的值可以是像 20 这样的具体像素值可以是像 ‘20%’ 这样相对于容器高宽的百分比也可以是 ‘top’, ‘middle’, ‘bottom’。
如果 top 的值为 ‘top’, ‘middle’, ‘bottom’组件会根据相应的位置自动对齐。
title. right ‘auto’
stringnumber
title.组件离容器右侧的距离。
right 的值可以是像 20 这样的具体像素值可以是像 ‘20%’ 这样相对于容器高宽的百分比。
默认自适应。
title. bottom ‘auto’
stringnumber
title.组件离容器下侧的距离。
bottom 的值可以是像 20 这样的具体像素值可以是像 ‘20%’ 这样相对于容器高宽的百分比。
默认自适应。
title. backgroundColor ‘transparent’
Color 标题背景色默认透明。
颜色可以使用 RGB 表示比如 ‘rgb(128, 128, 128)’ 如果想要加上 alpha 通道可以使用 RGBA比如 ‘rgba(128, 128, 128, 0.5)’也可以使用十六进制格式比如 ‘#ccc’
title. borderColor ‘#ccc’
Color 标题的边框颜色。支持的颜色格式同 backgroundColor。
title. borderWidth
number 标题的边框线宽。
title. borderRadius
numberArray 圆角半径单位px支持传入数组分别指定 4 个圆角半径。 如:
borderRadius: 5, // 统一设置四个角的圆角大小 borderRadius: [5, 5, 0, 0] //顺时针左上右上右下左下
title. shadowBlur
number 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
示例
{ shadowColor: ‘rgba(0, 0, 0, 0.5)’, shadowBlur: 10 } 注意此配置项生效的前提是设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor。
title. shadowColor
Color 阴影颜色。支持的格式同color。
注意此配置项生效的前提是设置了 show: true。
title. shadowOffsetX
number 阴影水平方向上的偏移距离。
注意此配置项生效的前提是设置了 show: true。
title. shadowOffsetY
number 阴影垂直方向上的偏移距离。
注意此配置项生效的前提是设置了 show: true。
