echarts折线图如何显示图例

要在 Echarts 折线图中显示图例，需要在 option 中添加 legend 属性，并定义相应的 data，如下所示：

option = {
    legend: {
        data:['数据一','数据二']
    },
    ...
    series: [
        {
            name:'数据一',
            type:'line',
            data:[10, 20, 30, 40, 50]
        },
        {
            name:'数据二',
            type:'line',
            data:[50, 40, 30, 20, 10]
        }
    ]
}

其中，legend.data 中的数据为每个系列的名称，series 中的 name 属性与 legend.data 中的名称对应。这样，就可以在图表上方或下方显示图例了。

相关问题

echarts折线图增加图例

可以通过在Echarts的option中设置legend属性来增加图例。具体方法如下：

option = {
    // ... 其他配置项
    legend: {
        data: ['图例1', '图例2', '图例3'] // 图例的数据数组
    },
    series: [
        {
            name: '图例1',
            type: 'line',
            data: [10, 20, 30, 40, 50]
        },
        {
            name: '图例2',
            type: 'line',
            data: [50, 40, 30, 20, 10]
        },
        {
            name: '图例3',
            type: 'line',
            data: [30, 50, 10, 40, 20]
        }
    ]
};

在上面的代码中，legend属性中的data数组包含了所有的图例名称，series数组中的每个元素都代表了一个折线图，其中name属性指定了该折线图对应的图例名称。

如果需要自定义图例，可以在legend属性中设置formatter属性，然后在回调函数中返回自定义的HTML代码。例如：

option = {
    // ... 其他配置项
    legend: {
        formatter: function(name) {
            return '<span style="color:red;">' + name + '</span>'; // 返回自定义的HTML代码
        },
        data: ['图例1', '图例2', '图例3'] // 图例的数据数组
    },
    series: [
        // ... 其他折线图配置
    ]
};

上面的代码中，formatter属性指定了一个回调函数，该函数的参数name表示当前图例的名称，函数返回一个字符串，其中包含了自定义的HTML代码。在这个例子中，我们将所有的图例名称都设置为红色。

Echarts折线图设置图例图形为长方形该怎么做

您可以使用Echarts中的legend.icon属性来设置图例的图形样式，将其设置为矩形即可。示例代码如下：

legend: {
    data: ['数据1', '数据2'],
    icon: 'rect', // 设置图例的图形为矩形
},

您可以根据您自己的需求进行修改，比如设置矩形的宽度和高度等。