echart 图例显示

ECharts（百度开源的一个数据可视化库）中的图例可以通过设置 legend 属性来显示。

首先，需要在 ECharts 的配置项中添加 legend 属性，并设置该属性的 data 值，即图例中显示的内容。例如：

option = {
  // 其他配置项
  legend: {
    data: ['销量']
  },
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
}

在上面的代码中，legend 属性中的 data 值为 ['销量']，表示图例中显示的内容为“销量”。同时，在 series 中，name 值也为“销量”，这样就能将该 series 显示在图例中。

如果需要显示多个 series 的图例，只需在 legend 的 data 中添加相应的名称，例如：

option = {
  // 其他配置项
  legend: {
    data: ['销量', '利润']
  },
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }, {
    name: '利润',
    type: 'line',
    data: [10, 30, 20, 15, 25, 18]
  }]
}

在上面的代码中，legend 的 data 值为 ['销量', '利润']，表示图例中显示的内容为“销量”和“利润”。同时，series 中有两个 series，分别为“销量”和“利润”，并且它们的 name 值与 legend 中的 data 值对应，这样就能将它们都显示在图例中。

除了默认显示在图表的上方，图例的位置也可以通过设置 legend 属性中的 x 和 y 值来调整，例如：

option = {
  // 其他配置项
  legend: {
    data: ['销量'],
    x: 'center',
    y: 'bottom'
  },
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
}

在上面的代码中，legend 的 x 值为'center'，表示图例水平居中；y 值为'bottom'，表示图例垂直方向显示在底部。