在echarts中用el-radio-button按钮实现同一张图切换不同使用fetch后端传来的数据

要实现在echarts中用el-radio-button按钮切换不同的数据，可以先在vue中定义一个变量来存储当前选中的数据源，例如：

<template>
  <div>
    <el-radio-group v-model="selectedSource">
      <el-radio-button :label="source1">数据源1</el-radio-button>
      <el-radio-button :label="source2">数据源2</el-radio-button>
      <el-radio-button :label="source3">数据源3</el-radio-button>
    </el-radio-group>
    <div id="chart"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedSource: 'source1', // 默认选中数据源1
      source1: [], // 数据源1
      source2: [], // 数据源2
      source3: [], // 数据源3
    }
  },
  methods: {
    fetchData() {
      // 使用fetch获取数据，并将返回的数据赋值给对应的数据源
      fetch('/api/data1').then(response => response.json()).then(data => this.source1 = data)
      fetch('/api/data2').then(response => response.json()).then(data => this.source2 = data)
      fetch('/api/data3').then(response => response.json()).then(data => this.source3 = data)
    },
    renderChart() {
      // 根据当前选中的数据源渲染图表
      const data = this[this.selectedSource]
      // 使用echarts绘制图表
      const chart = echarts.init(document.getElementById('chart'))
      chart.setOption({
        // 配置图表选项
        series: [
          {
            type: 'bar',
            data,
          },
        ],
      })
    },
  },
  mounted() {
    this.fetchData() // 获取数据
    this.renderChart() // 渲染图表
  },
  watch: {
    selectedSource() {
      this.renderChart() // 监听选中的数据源变化，重新渲染图表
    },
  },
}
</script>

在上面的代码中，我们定义了一个selectedSource变量来存储当前选中的数据源，然后在模板中使用el-radio-button按钮来选择不同的数据源。在mounted钩子函数中，我们调用fetchData方法来获取数据，在renderChart方法中根据当前选中的数据源渲染图表。同时，我们使用watch监听selectedSource变量的变化，一旦变化就重新渲染图表。