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'；