echarts同一张图点击按钮切换不同后端数据

要实现在同一张 ECharts 图上点击按钮切换不同的后端数据，您需要使用 Ajax 请求来获取数据，并在请求成功后更新图表数据。具体的步骤如下：

1. 创建一个包含所有需要切换的数据的数组。

2. 在 ECharts 的 option 中设置一个初始数据，用于图表的初始化。

3. 创建一个按钮，绑定点击事件。

4. 在点击事件中，使用 Ajax 请求来获取对应的后端数据。

5. 在请求成功后，使用 ECharts 的 setOption() 方法来更新图表数据，将获取到的数据传入 setOption() 方法中即可。

6. 每次点击按钮时，都需要重新发起 Ajax 请求，并在请求成功后调用 setOption() 方法来更新图表数据。

以下是一个示例代码：

// 数据数组
var dataArr = [
  {name: 'data1', url: '/api/data1'},
  {name: 'data2', url: '/api/data2'}
];

// 初始化 option
var option = {
  // 设置初始数据
  series: [{
    name: dataArr[0].name,
    data: []
  }],
  // 其他配置
  ...
};

// 创建按钮
$('#btn').click(function() {
  // 获取按钮对应的数据
  var data = dataArr[$(this).index()];
  // 发起 Ajax 请求
  $.ajax({
    url: data.url,
    success: function(res) {
      // 更新图表数据
      chart.setOption({
        series: [{
          name: data.name,
          data: res
        }]
      });
    }
  });
});

在这个示例中，我们创建了一个包含两个数据对象的数组 dataArr，其中每个对象都包含了数据名称和后端数据 URL。然后在 ECharts 的 option 中设置了一个初始数据（dataArr[0]），并创建了一个按钮，每次点击按钮时，都会获取按钮对应的数据，并发起 Ajax 请求来获取后端数据。在请求成功后，我们使用 setOption() 方法来更新图表数据。