legend

图例组件。

图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。

  • legend.show:[ default: true ]
  • legend.zlevel: 组件的所有图形的 zlevel 值。
  • legend.z: 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
  • legend.left: 组件离容器左侧的距离。
  • legend.top: 组件离容器上侧的距离。
  • legend.right: 组件离容器右侧的距离。
  • legend.bottom: 组件离容器下侧的距离。
  • legend.orient: [ default: 'horizontal' ] 图例列表的布局朝向。
      可选:
      'horizontal'
      'vertical'
    
  • legend.align: 图例标记和文本的对齐。默认自动,根据组件的位置和 orient 决定,当组件的 left 值为 'right' 以及纵向布局(orient 为 'vertical')的时候为右对齐,及为 'right'。
      可选:
      'auto'
      'left'
      'right'
    
  • legend.padding: 图例内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
      // 设置内边距为 5
      padding: 5
      // 设置上下的内边距为 5,左右的内边距为 10
      padding: [5, 10]
      // 分别设置四个方向的内边距
      padding: [
          5,  // 上
          10, // 右
          5,  // 下
          10, // 左
      ]
    
  • legend.itemGap: 图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。
  • legend.itemWidth: 图例标记的图形宽度。
  • legend.itemHeight: 图例标记的图形高度。
  • legend.formatter: 图例文本的内容格式器,支持字符串模板和回调函数两种形式。
      // 使用字符串模板,模板变量为图例名称 {name}
      formatter: 'Legend {name}'
      // 使用回调函数
      formatter: function (name) {
          return 'Legend ' + name;
      }
    
  • legend.selectedMode: [ default: true ] 图例选择的模式,默认开启图例选择,可以设成 false 关闭。 除此之外也可以设成 'single' 或者 'multiple' 使用单选或者多选模式。
  • legend.selected: 图例选中状态表。
      selected: {
          // 选中'系列1'
          '系列1': true,
          // 不选中'系列2'
          '系列2': false
      }
    
  • legend.textStyle: 图例的公用文本样式。
      legend.textStyle.color, legend.textStyle.fontStyle,
      legend.textStyle.fontWeight, legend.textStyle.fontFamily,
      legend.textStyle.fontSize
    
  • legend.data[i]: 图例的数据数组。数组项通常为一个字符串,每一项代表一个系列的 name(如果是饼图,也可以是饼图单个数据的 name)。图例组件会自动获取对应系列的颜色,图形标记(symbol)作为自己绘制的颜色和标记,特殊字符串 ''(空字符串)或者 '\n' (换行字符串)用于图例的换行。 如果要设置单独一项的样式,也可以把该项写成配置项对象。此时必须使用 name 属性对应表示系列的 name。
    • legend.data[i].name: 图例项的名称,对应系列的 name(如果是饼图,也可以是饼图单个数据的 name)。
    • legend.data[i].icon:
        图例项的 icon。
        可选自带的标记类型, 有 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。
        在 ECharts 3 里可以通过 'path://' 设置为任意的矢量路径,这种方式相比于图片来说不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
      
    • legend.data[i].textStyle: 图例项的文本样式。
  • legend.backgroundColor: 图例背景色,默认透明。
  • legend.borderColor: 图例的边框颜色。支持的颜色格式同 backgroundColor。
  • legend.borderWidth: 图例的边框线宽。
  • legend.shadowBlur: 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
  • legend.shadowColor: 阴影颜色。支持的格式同color。
  • legend.shadowOffsetX: 阴影水平方向上的偏移距离。
  • legend.shadowOffsetY: 阴影垂直方向上的偏移距离。