legend

作者: 言之凡 | 来源:发表于2017-09-29 14:42 被阅读0次
    图例

    type: 'plain' / 'scroll' //默认图例
    orient:'horizontal' / 'vertical' //图例朝向
    align:
    padding:
    animation:图例翻页是否使用动画
    animationDurationUpdate:翻页动画时长
    itemGap://图例每项的间距
    itemWidth:
    itemHeight:
    formatter:

    // 使用字符串模板,模板变量为图例名称 {name}
    formatter: 'Legend {name}'

    // 使用回调函数
    formatter: function (name) {
    return 'Legend ' + name;
    }

    scrollDataIndex:0
    pageButtonItemGap:5
    pageButtonGap: //图例控制箭头和图例之间的间距
    pageButtonPosition:'start' / 'end'
    pageFormatter:

      {1}/{3}     //**页数和总页数** (默认页数)
      {
        current: number
        total: number
      }  //**函数返回字符串**
    

    pageIcons://图标控制块的图标

     {          
       horizontal:数组 [previous page button, next page button]
                  默认 ['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z']
                  自定义['image://url','path://']
        vertical:数组 [previous page button, next page button]
     }
    

    pageIconColor: // 翻页按钮的颜色
    pageIconInactiveColor: //按钮失效的颜色
    pageIconSize:3 / [宽,高 ] //翻页按钮的大小
    pageTextStyle://图例文字样式

    {
      color:
      fontStyle:normal/italic/oblique
      fontWeight:
      fontFamliy: 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft 
      fontSize:
      lineHeight:
      width:
      height:
      textBorderColor:
      textBorderWidth:
      textShadowColor:
      textShadowBlur://**文字本身阴影长度**
      textShadowOffsetX
    }
    

    selectedMode:true //设置是否可以点击显示系列图
    selected:{ '系列1':true,'系列2':false}//图例选中状态表
    tooltip:

    {
      show:true // ** 提示框浮层和axisPointer **
      trigger:'item' / 'axis' / 'none'
      triggerOn: 'mousemove' / 'click' / 'mousemove|click' / 'none'   //触发条件
      enterable:false  //**鼠标是否可进入提示框浮层中,如需添加链接,按钮,可设置为 true。**
      position:
            - 鼠标在左侧时 tooltip 显示到右侧,鼠标在右侧时 tooltip 显示到左侧。
                function (pos, params, dom, rect, size) {
                       var obj = {top: 60};
                       obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                        return obj;
                }
            - 绝对位置,相对于容器左侧 10px, 上侧 10 px
                  [10, 10]
            - 相对位置,放置在容器正中间
                  ['50%', '50%']
      confine:false //**图表外层的 dom 被设置为 'overflow: hidden'**
      axisPointer: {
                 type:'line' /'shadow' / ' cross'
                 axis:'x', 'y', 'radius', 'angle' //坐标轴选择哪个轴axisPointer
                 snap: // 坐标指示器是否自动吸附到点上
                 label: //文本标签
                 lineStyle:               
      formatter:
                '{b0}: {c0}<br />{b1}: {c1}'
                回调函数:(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
     extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'//附加到浮层的样式
    }
    

    1.折线(区域)图、柱状(条形)图、K线图 :
    {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)
    2.散点图(气泡)图 :
    {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)
    3.地图 :
    {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)
    4.饼图、仪表盘、漏斗图:
    {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)

    相关文章

      网友评论

          本文标题:legend

          本文链接:https://www.haomeiwen.com/subject/awnbextx.html