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

要实现同一张柱状图图切换不同使用fetch后端传来的数据，可以通过以下步骤来实现：

1. 在页面中引入echarts和element-ui组件库。

2. 创建一个包含el-radio-button的组件，用于切换不同的数据源。例如：

<template>
  <div>
    <el-radio-group v-model="selected" @change="handleChange">
      <el-radio-button :label="1">数据源1</el-radio-button>
      <el-radio-button :label="2">数据源2</el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 1 // 默认选中数据源1
    }
  },
  methods: {
    handleChange() {
      // 切换数据源
      // 根据选中的数据源发送fetch请求获取数据
      // 调用echarts的setOption方法更新图表数据
    }
  }
}
</script>

3. 在methods中实现handleChange方法，用于切换数据源。在该方法中，可以根据选中的数据源发送fetch请求获取数据，并调用echarts的setOption方法更新图表数据。例如：

handleChange() {
  let url = ''
  if (this.selected === 1) {
    url = 'xxx' // 数据源1的接口地址
  } else if (this.selected === 2) {
    url = 'yyy' // 数据源2的接口地址
  }
  fetch(url)
    .then(response => response.json())
    .then(data => {
      // 根据返回的数据更新echarts图表
      let option = {
        // echarts图表的配置项
      }
      option.series[0].data = data // 更新柱状图的数据
      this.$refs.chart.setOption(option) // 更新echarts图表
    })
}

4. 在页面中创建一个echarts图表实例，并设置ref属性，用于在方法中调用setOption方法更新数据。例如：

<template>
  <div>
    <el-radio-group v-model="selected" @change="handleChange">
      <el-radio-button :label="1">数据源1</el-radio-button>
      <el-radio-button :label="2">数据源2</el-radio-button>
    </el-radio-group>
    <div ref="chart" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 在mounted生命周期中创建echarts图表实例
    this.chart = echarts.init(this.$refs.chart)
    // echarts图表的配置项
    let option = {
      // ...
    }
    this.chart.setOption(option)
  },
  methods: {
    handleChange() {
      // ...
      this.chart.setOption(option) // 更新echarts图表
    }
  }
}
</script>

通过以上步骤，即可实现在echarts中用el-radio-button按钮实现同一张柱状图图切换不同使用fetch后端传来的数据。