vue引入echarts实现同一页面多个图表

<el-radio-group v-model="radio" @change="radioChange">
        <el-radio-button label="1">用户数据图</el-radio-button>
        <el-radio-button label="2">产品兴趣图</el-radio-button>
      </el-radio-group>

radioChange(){
        if(this.radio == 1){
          this.getUserData();
        }else if(this.radio == 2){
          this.getProductData();
        }
      },

getEchartUserdata() {
      	var userCharts = document.getElementById('uchart');
      	var userCharts = echarts.init(userCharts);
      	var useroption = {
      		title: {
      		  text: "用户数据分析",
      		  left:"center",
      		  textStyle: {
      		  color: "#8a8a8a",
      		  fontSize: 14
      		  },
      		},
      		tooltip: {
      			trigger: 'axis'
      		},
      		legend: {
      			data: ["日活量","新增用户量"],
            top:"3%",
      		},
      		toolbox: {
      			feature: {
      				saveAsImage: {} //下载工具
      			}
      		},
      		xAxis: {
      			name:'时间',
      		  type: 'category',
      			boundaryGap: false,
      			nameTextStyle: {
      			    fontSize: 10
      			},
      		  data: this.xdata,
      			axisLine: {
      				lineStyle: {
      				       color: '#c8c8c8'
      				    }
      				},
      		  },
      		yAxis: {
      			name:'用户数量(人)',
      			type: 'value',
      			nameTextStyle: {
      			    fontSize: 10
      			},
      			axisLine: {
      				lineStyle: {
      				       color: '#c8c8c8'
      				    }
      				},
      		},
      		series: this.series,
      		color: ['#F44042', '#00aa00']
      	};
        userCharts.clear(); // 清除图表原始数据
      	userCharts.setOption(useroption)
      },

var userCharts = echarts.init(userCharts);