echarts--图例（legend）

图例

图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列，通过点击对应数据列的标记，可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。

一、布局

图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致，可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。

当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式：

关键字：orient: \'vertical/horizontal\'  默认horizontal水平

 

legend: {
    orient: \'vertical\',
    right: 10,
    top: \'center\'
},

 

  legend: {
    orient：“horizontal”,//水平展示，不写默认水平展示
    right: 10,
    top: 20
  }

二、类型（type）

 

图例的类型。可选值：

 

• \'plain\'：普通图例。缺省就是普通图例。
• \'scroll\'：可滚动翻页的图例。当图例数量较多时可以使用

 

 

  legend: {
    type: \'scroll\',
    orient: \'vertical\',
    right: 10,
    top: 20,
    bottom: 20,
    data: data.legendData, //数据，例：data: [\'图例一\', \'图例二\', \'图例三\' /* ... */, , \'图例n\']
　　　show: true/false //图例是否显示
},

 

 

 三、图例组件离容器的距离（left，right，top，bottom）

值可以是string number类型

left：可以像20 这样的具体像素值，可以是像 \'20%\' 这样相对于容器高宽的百分比，也可以是 \'left\', \'center\', \'right\'。

同样top也可以是 \'top\', \'middle\', \'bottom\'；