echart 图例上下

echart 图例上下是指图例的位置是在图表的上方或下方。

当图例在图表的上方时，可以提高图表的整体美观度，让读者更容易理解图表所代表的含义。上方的图例可以让读者更清晰地看到整个图表的内容，并能够方便地与图表进行对比和分析。

同时，上方的图例也可以节省图表的空间，让图表能够呈现更多的数据，即使图表内容较多，也能够清晰地展示。

另一方面，当图例在图表的下方时，可以使图表的布局更加紧凑，让读者更容易阅读和理解图表。下方的图例可以与图表内容直接对应，读者可以直接在图表下方找到所需的信息，减少了读者对图表的转移和查找。

此外，下方的图例还可以在有多个图表的情况下，方便读者对多个图表进行比较和对照。通过在所有图表的下方统一显示图例，读者可以更清晰地了解各个图表所代表的含义，更加方便地分析和比较数据。

总之，echart 图例上下可以根据实际情况和需要进行选择，以达到更好地传达图表信息和提高图表可读性的目的。

相关问题

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'，表示图例垂直方向显示在底部。

echart 图例排序

在 ECharts 中，可以使用 `legend` 组件的 `data` 属性来定义图例的内容，同时也可以使用 `legend` 组件的 `formatter` 属性来自定义图例的显示格式。而要对图例进行排序，可以在设置 `data` 属性时，将数据按照需要的顺序排列。

举个例子，如果我们有一个柱状图，其中有三个系列，分别是“系列A”、“系列B”和“系列C”，我们希望将图例按照“系列C”、“系列A”、“系列B”的顺序显示，可以这样设置：

option = {
    // ...
    legend: {
        data: ['系列C', '系列A', '系列B']
    },
    // ...
};

这样设置后，图例就会按照指定的顺序显示。

如果要对图例进行更复杂的排序，可以使用 `formatter` 属性来自定义图例的显示格式。具体来说，可以在 `formatter` 中使用 JavaScript 的排序函数对图例进行排序。例如，如果我们希望将图例按照系列名称的字母顺序排序，可以这样设置：

option = {
    // ...
    legend: {
        data: ['系列A', '系列C', '系列B'],
        formatter: function(name) {
            // 使用 Array.prototype.indexOf 方法获取系列名称在 data 中的位置
            var index = this.option.legend.data.indexOf(name);
            // 返回带有顺序信息的系列名称
            return (index + 1) + '. ' + name;
        }
    },
    // ...
};

这样设置后，图例就会按照系列名称的字母顺序排序，并在每个系列名称前面显示顺序信息。