echarts如何根据用户选择的数据动态地添加图例

现在是用户选择了数据，python后端以列表套字典的格式传到前端

obj = [{'id':1,'population':0,'r400':0.55,'r401':0.66},{'id':2,'population':2,'r400':0.11,'r401':0.22}]

现在前端能进行曲线（r400-r1000,为了看着简洁，就写了r400和r401）的绘制，目前遇到的问题是如何添加图例（population的值）

window.onload = function(){
        initLine1();
        function initLine1() {
            var mychart = echarts.init(document.getElementById("chart"));
            var series_data = [];
            {% for i in obj %}
               series_data.push([])
            {% endfor %}
            console.log(series_data)
            {% for i in obj %}
            var n = Number({{forloop.counter}} - 1)
            series_data[n].push({{ i.r400 }})
            series_data[n].push({{ i.r401 }})
            {% endfor %}
            var s_data = []
            series_data.forEach(v => {
                            var obj = {data: v,
                            type: "line",
                            symbol:'none'
                            };
                            s_data.push(obj)
                            })
            var option = {
                xAxis: {
                    name:'波长 Wavelength(nm)',
                    nameLocation:'middle',
                    nameGap:30,
                    nameTextStyle:{fontSize:15},
                    axisLabel:{
                        interval:99
                        },
                    type: "category",
                    data:["400","401"]
                        },
                yAxis: {
                    name:'反射率 Reflectance',
                    nameLocation:'middle',
                    nameGap:30,
                    nameTextStyle:{fontSize:15},
                    axisLine:{
                        show:true,
                        },
                    type: "value"
                        },
                tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                    trigger: 'axis',
                    backgroundColor: 'rgba(32, 33, 36,.7)',
                    borderColor: 'rgba(32, 33, 36,0.20)',
                    borderWidth: 1,
                    textStyle: { // 文字提示样式
                        color: '#fff',
                        fontSize: '12'
                                },
                    axisPointer: { // 坐标轴虚线
                        type: 'cross',
                        label: {
                        backgroundColor: '#6a7985'
                                }
                                },
                            },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                series: s_data
                           };
            mychart.setOption(option);
            };
}

目前的效果↓

如有帮助，一定采纳！谢谢！！

lengend 没有用吗 ?

在你代码的基础上写个例子你参考下，同样的代码我就省略了：

# 后端传到前端的数据,包含population的值
obj = [{'id':1,'population':0,'r400':0.55,'r401':0.66},
     {'id':2,'population':2,'r400':0.11,'r401':0.22}] 

# 前端代码
window.onload = function(){
    initLine1();   # 初始化图表函数

    function initLine1() {
        var mychart = echarts.init(document.getElementById("chart"));
        
        # series_data 包含r400, r401 和 population的值
        var series_data = [  
          [0.55, 0.66, 0],  
          [0.11, 0.22, 2]  
        ];  
        
        var option = {      
            xAxis: {...},  # x轴配置
            yAxis: {...},  # y轴配置
            tooltip: {...}, # 提示框配置
            
            # 图例组件,显示population的值
            legend: {    
                data: [0, 2]   
            },  
            
            # 每条线指定name,取population的值
            series: [    
                {     
                    name: 0,    
                    data: [0.55, 0.66],     
                    type: "line" 
                },  
                {     
                    name: 2,    
                    data: [0.11, 0.22],    
                    type: "line" 
                }
            ]
        };
        
        mychart.setOption(option);  
    };
}

要添加 Echarts 的图例，你可以在 option 变量中的 series 选项中的每个数据对象中添加 name 属性，表示该数据对象的名称。例如添加 "population" 名称的代码：

var s_data = [];

series_data.forEach(v => {
  var obj = {
    name: 'population',
    data: v,
    type: "line",
    symbol: 'none'
  };
  s_data.push(obj)
})

var option = {
  // ...
  series: s_data
};

上述代码中，我们在 s_data 数组中的每个数据对象中添加了 name 属性并赋值为 "population"。这样，在 Echarts 图表中就会在上方自动添加名为 "population" 的图例。如果需要添加多个图例，可以在不同的数据对象中使用不同的名称。

注意：为了使图例生效，您需要在 option 对象中添加 legend 属性，用于配置图例的具体样式。例如：

// ...

var option = {
  // ...
  legend: {
    data: ['population']
  },
  // ...
};

上述代码中，添加了 legend 属性，并在其 data 属性中设置图例名称。如果有多个名称，可以将其放置在一个数组中。您可以通过配置 legend 对象的其他属性来更改图例的样式、对齐方式等。

要动态添加 Echarts 折线图的图例，可以使用 setOption() 方法来更新图表配置。具体的方法是：

获取当前图表的配置对象：

var chart = echarts.init(document.getElementById('yourChartId'));
var option = chart.getOption();

构造新的图例数据对象，比如使用一个数组来保存要添加的图例数据：
```
var legendData = ['legend1', 'legend2', ...];
```
将新的图例数据添加到当前配置对象的 legend.data 属性中：
```
option.legend.data = option.legend.data.concat(legendData);
```
调用 setOption() 方法更新图表配置，并设置 notMerge 属性为 true，表示不与之前的配置合并，而是替换掉原有的配置：
```
chart.setOption(option, true);
```

这样，就可以在 Echarts 折线图上动态添加新的图例数据了。需要注意的是，每次修改图表配置后都要调用 setOption() 方法来更新图表。