网站直播用php怎么做,龙岗网站建设网站制作,电子商务网页设计模板,站长推荐网址入口自动跳转title
标题组件#xff0c;包含主标题和副标题。
在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件#xff0c;这在需要标题进行排版#xff0c;或者单个实例中的多个图表都需要标题时会比较有用。
例如下面不…title
标题组件包含主标题和副标题。
在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件这在需要标题进行排版或者单个实例中的多个图表都需要标题时会比较有用。
例如下面不同缓动函数效果的示例每一个缓动效果图都带有一个标题组件 所有属性
title. id
string
组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
title. show true 试一试
boolean
是否显示标题组件。
title. text 试一试
string
主标题文本支持使用 \n 换行。
title. link
string
主标题文本超链接。
title. target blank
string
指定窗口打开主标题超链接。
可选 self 当前窗口打开 blank 新窗口打开 title. textStyle
Object title.textStyle. color #333 试一试
Color
主标题文字的颜色。 title.textStyle. fontStyle normal 试一试
string
主标题文字字体的风格。
可选
normalitalicoblique title.textStyle. fontWeight bolder 试一试
stringnumber
主标题文字字体的粗细。
可选
normalboldbolderlighter100 | 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
文字本身的描边类型。
可选
soliddasheddotted
自 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. rich
Object
在 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. subtextStyle
Object title.subtextStyle. color #aaa 试一试
Color
副标题文字的颜色。 title.subtextStyle. fontStyle normal 试一试
string
副标题文字字体的风格。
可选
normalitalicoblique title.subtextStyle. fontWeight normal 试一试
stringnumber
副标题文字字体的粗细。
可选
normalboldbolderlighter100 | 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
文字水平对齐方式默认自动。
可选
leftcenterright
rich 中如果没有设置 align则会取父层级的 align。例如
{align: right,rich: {a: {// 没有设置 align则 align 为 right}}
}title.subtextStyle. verticalAlign 试一试
string
文字垂直对齐方式默认自动。
可选
topmiddlebottom
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
文字本身的描边类型。
可选
soliddasheddotted
自 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. rich
Object
在 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. triggerEvent
boolean
是否触发事件。
title. padding 5 试一试
numberArray
标题内边距单位px默认各方向内边距为5接受数组分别设定上右下左边距。
使用示例
// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [5, // 上10, // 右5, // 下10, // 左
]title. itemGap 10 试一试
number
主副标题之间的间距。
title. zlevel
number
所有图形的 zlevel 值。
zlevel用于 Canvas 分层不同zlevel值的图形会放置在不同的 Canvas 中Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁例如有动画的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大在手机端上需要谨慎使用以防崩溃。
zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
title. z 2
number
组件的所有图形的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 以及值不为 transparent 的背景色 backgroundColor。
title. shadowColor 试一试
Color
阴影颜色。支持的格式同color。
注意此配置项生效的前提是设置了 show: true。
title. shadowOffsetX 试一试
number
阴影水平方向上的偏移距离。
注意此配置项生效的前提是设置了 show: true。
title. shadowOffsetY 试一试
number
阴影垂直方向上的偏移距离。
注意此配置项生效的前提是设置了 show: true。
