Echarts通⽤属性整理学习⼀（title与legend）
通⽤属性
title
说明：标题组件（主标题、副标题），ECharts 2.x单实例只能拥有⼀个标题组件，ECharts 3可以拥有多个。
属性：
id：指定则可⽤于在 option 或者 API 中引⽤组件
show
主标题
text：标题⽂本，⽀持\n换⾏
padding：number、array
left、top、right、bottom：距离容器的距离（像素值、auto、百分⽐）
textAlign：主标题与副标题的⽔平对齐⽅式，auto、left、right、center
textVerticalAlign：主标题与副标题的垂直对齐⽅式，auto、top、bottom、middle
itemGap：主副之间间距
backgroundColor
borderColor、borderWidth、borderRadius
textStyle：作⽤在字体本⾝对象
color：主标题颜⾊（字符串）
fontStyle（normal、italic、oblique）、fontWeight、fontFamily、fontSize、lineHeight
width、height：指定内容宽⾼（不指定rich则不能设置此项）
textBorderColor、textBorderWidth
textShadowColor、textShadowBlur（阴影长度）、textShadowOffsetX、textShadowOffsetY（偏移量）
rich：⾃定义富⽂本样式
shadowBlur：图形阴影模糊⼤⼩，配合shadowColor,shadowOffsetX, shadowOffsetY⼀起使⽤，⽣效前提：show: true 以及backgroundColor不为 tranparent
shadowColor、shadowOffsetX、shadowOffsetY
triggerEvent：是否触发事件
target：指定打开主标题超链接⽅式：self、blank
zlevel：不同值的图形放置在不同的 Canvas 中，Canvas 分层是优化⼿段，经常变化的设置统⼀zlevel，但注重多Canvas 会引起内存开销增⼤。
z：⽐zlevel的优先级低，且不会创建新的Canvas
副标题
subtext：副标题⽂本，⽀持\n换⾏
sublink：副标题超链接
subtarget：打开⽅式
subtextStyle：与主标题⼀致对象
align：left、center、right
`verticalAlign：top、middle、bottom
legend
说明：图例组件，展⽰标记(symbol)、颜⾊、名字，点击控制系列的显⽰隐藏
属性：
属性：
type：图例的类型，plain（默认）、scroll（图例过多时）
width、height：默认⾃适应
orient：图例列表的布局朝向，horizontal、vertical
align：图例与⽂本的对齐⽅式，auto、left、right
itemGap：图例每项之间的间隔
itemWidth、itemHeight：图例标记的图形宽⾼
symbolKeepAspect：图标形式是 path://时 ，缩放时是否保持图形长宽⽐。
formatter：格式化图例⽂本，⽀持字符串模板和回调函数
// 使⽤字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
// 使⽤回调函数
formatter: function (name) {
return 'Legend ' + name;
}
selectedMode：图例选择的模式，single、multiple、true、false
inactiveColor：图例关闭时的颜⾊
selected：图例选中状态表
selected: {
// 选中'系列1'
'系列1': true,
// 不选中'系列2'
'系列2': false
}
textStyle：legend图标⽂字对象
color、backgroundColor（⽀持照⽚）
width、height：指定内容宽⾼（不指定rich则不能设置此项）、padding
fontStyle（normal、italic、oblique）、fontWeight、fontFamily、fontSize、lineHeight
borderColor、borderWidth、borderRadius
textBorderColor、textBorderWidth、textShadowColor、textShadowBlur、textShadowOffsetX、
textShadowOffsetY
shadowColor、shadowBlur（阴影长度）、shadowOffsetX、shadowOffsetY（偏移量）
rich：⾃定义富⽂本样式
tooltip：legend ⽂字很多的时候对⽂字做裁剪开启提⽰框
icon：circle，rect，roundRect，triangle，diamond，pin，arrow，none，image://url（图⽚的链接、dataURI）data：图例的数据数组
name：图例项的名称，应等于某系列的name值（如果是饼图，也可以是饼图单个数据的 name）。
icon
textStyle
animation：图例翻页是否使⽤动画
animationDurationUpdate：翻页动画时长
emphasis：标签对象
selectorLabel对象
showrotate属性
width , height , padding
distance（距离图形元素的距离）, rotate , offset
color , backgroundColor
fontStyle , fontWeight , fontFamily , fontSize
align , verticalAlign , lineHeight
borderColor , borderWidth , borderRadius
shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY
textBorderColor , textBorderWidth
textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY
rich
selector：选择器按钮，包括全选和反选功能
selector: [{ type: 'all or inverse', title: '全选' }, { type: 'inverse',  title: '反选' }]
// 或
selector: true
// 或
selector: ['all', 'inverse']
selectorLabel：选择器按钮的⽂本标签样式，同emphasis
selectorPosition：选择器的位置，start、end
selectorItemGap：选择器按钮之间的间隔
selectorButtonGap：选择器按钮与图例组件之间的间隔
与title相同属性
id、show
padding
left、top、right、bottom
backgroundColor
borderColor、borderWidth、borderRadius
shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY
zlevel、z
以下type为'scroll'时⽣效
scrollDataIndex：可指定图例滚动到哪⾥
⽰例：
/examples/zh/editor.html?c=pie-legend&edit=1&reset=1
pageButtonItemGap：分页控制块中，按钮和页信息之间的间隔
pageButtonGap：分页控制块与图例之间的间隔
pageButtonPosition：分页控制块放置位置，'start'、 'end'
pageFormatter：分页控制块格式，{current}/{total}
pageIcons：分页控制块图标对象
horizontal
vertical
pageIconColor：翻页按钮的颜⾊
pageIconInactiveColor：翻页按钮不激活时的颜⾊
pageIconSize：翻页按钮的⼤⼩，数字或数组
pageTextStyle：图例页信息的⽂字样式对象
color
color
width、height：⽂字块宽⾼（不指定rich则不能设置此项）
fontStyle（normal、italic、oblique）、fontWeight、fontFamily、fontSize、lineHeight textBorderColor、textBorderWidth、textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。