legend图例属性

图例组件：存在多个图形时使用 控制显示/不显示的图形

图例数据 data

使用通用样式： 数组形式 data:["name1","name2","name3"]

独立设置样式：数组对象形式 

可为每个项设置私有textStyle

data:[{

                     name:"legend1",

                     icon:"rect",

                     textStyle:{

                     color:"green"

                     }

},{ },{ }]

图例公用文本样式  textStyle

组件类型 type

plain 普通

scroll 滚动(图例数量多的时候使用)  会进行分页

设置组件相对位置 left，top，bottom，right

number类型   类似于position:absolute;

布局朝向 orient

'horizontal'水平方向  'vertical'垂直方向

垂直布局时的对齐方式 align

图标类型   icon

 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

也可以自定义图标 'image://url'

是否保持图标长宽比 symbolKeepAspect 图标为自定义时生效

项之间的间隔  itemGap

图例组件左边图标的宽高 itemWidth  itemHeight

格式化图例文本 formatter

 //字符模板方式   

formatter: 'Legend {name}'

 // 使用回调函数

formatter: function(name){

          return 'Legend ' + name;

}

   {{{{{{{{{{emphasis }}}}}}}}}     高亮的样式 

图例的提示框  tooltip  

 一般是图例的文字比较多的时候用

图例关闭时的颜色inactiveColor

zlevel： 用于canvas分层 暂未使用过

图例选择模式 selectedMode

 true 开启  false 关闭  single 单选 multiple多选

是否选中状态表  selected

默认是全部选中

selected :{"text1":true,"text2":false}  

图例组件组件样式

内边距 padding

背景颜色 backgroundColor

边框

      borderColors边框颜色

      borderRadius边框圆角

      borderWidth 边框宽度

阴影 

    shadowBlur  模糊大小 number

    shadowColor 颜色

    shadowOffsetX 水平偏移

    shadowOffsetY 垂直偏移

全选/全不选按钮 选择器  

是否开启选择器 selector           

                           true false

选择器文本标签样式  selectorLabel

选择器位置 selectorPosition     

                   auto  start end 

选择器按钮间隔  selectorTtemGap    number

选择器与图例组件之间间隔 selectorButtonGap    number

当type为scroll滚动时可进行的设置

当前图例位置 

图例按钮和图形间距pageButtonItemGap

图例按钮和分页按钮间距type:'scroll' 时生效  pageButtonGap

翻页按钮图标

             horizontal:[ 'image://url', 'image://url' ] 横向时的分页按钮图标

             vertical : [ 'image://url', 'image://url' ]纵向时的分页按钮图标

分页按钮颜色  pageIconColor

翻页到头的颜色

分页按钮大小pageIconSize

分页文字样式 pageTextStyle

翻页时是否使用动画animation true false

动画持续时间animationDurationUpdate 毫秒数

作者：secret_base

链接：https://www.jianshu.com/p/4356dbd9c5f1

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。