echarts曲线图动态添加多条曲线

要动态添加多条曲线，你需要使用 echarts 的 setOption 方法来更新图表的配置。以下是一个简单的示例，演示如何通过按钮点击事件动态添加多条曲线：

// 初始化图表
var chart = echarts.init(document.getElementById('chart'));

// 初始配置
var option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {
    type: 'value'
  },
  series: []
};

// 更新图表配置
function updateOption(data) {
  var series = [];
  for (var i = 0; i < data.length; i++) {
    series.push({
      name: '曲线' + (i + 1),
      type: 'line',
      data: data[i]
    });
  }
  option.series = series;
  chart.setOption(option);
}

// 模拟数据
var data = [
  [10, 20, 30, 40, 50],
  [20, 30, 40, 50, 60],
  [30, 40, 50, 60, 70]
];

// 初始渲染
updateOption(data);

// 绑定按钮
var btn = document.getElementById('add-line');
btn.addEventListener('click', function() {
  data.push([Math.random() * 50, Math.random() * 50, Math.random() * 50, Math.random() * 50, Math.random() * 50]);
  updateOption(data);
});

这个示例中，我们首先初始化了一个 echarts 图表，并定义了初始配置。然后，我们编写了一个 `updateOption` 函数来更新图表的配置，这个函数接受一个数组作为参数，数组中的每个元素代表一条曲线的数据。在函数内部，我们遍历这个数组，将每个元素转化为一个 echarts 的 series 对象，并将这些对象存放在 `option.series` 中。最后，我们调用 `chart.setOption(option)` 来更新图表的配置，实现动态添加多条曲线的效果。

在按钮点击事件中，我们模拟生成了一个新的数据数组，并将其添加到了 `data` 数组中。然后，我们调用 `updateOption` 函数来更新图表的配置，实现了动态添加新曲线的效果。