uniapp点击切换echarts数据

<template>
	<view class="wrap">
		<view class="content-box">
			<text class="title">用户与设备统计</text>
			<view class="">
				<view class="userbox">
					<img src="../../static/index/zichan.png" alt="" srcset="">
					<view class="user_content">
						<view class="userbox_num">
							{{userinfo.assetCount}}
						</view>
						<view class="userbox_name">
							资产设备统计
						</view>
					</view>
				</view>
				<view class="userbox">
					<img src="../../static/index/yonghu.png" alt="" srcset="">
					<view class="user_content">
						<view class="userbox_num">
							{{userinfo.userCount}}
						</view>
						<view class="userbox_name">
							用户数量统计
						</view>
					</view>
				</view>
				<view class="userbox">
					<img src="../../static/index/bumen.png" alt="" srcset="">
					<view class="user_content">
						<view class="userbox_num">
							{{userinfo.deptCount}}
						</view>
						<view class="userbox_name">
							部门数量统计
						</view>
					</view>
				</view>
				<view class="userbox">
					<img src="../../static/index/gangwei.png" alt="" srcset="">
					<view class="user_content">
						<view class="userbox_num">
							{{userinfo.postCount}}
						</view>
						<view class="userbox_name">
							岗位数量统计
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="content-box">
			<text class="title">物联设备与测点情况统计</text>
		</view>
		<view class="content-box baojing">
			<text class="title">报警数量统计</text>
			<my-radio ref="radio1" :list="radioList1" @change="radioChange($event)" style="top: 30rpx;left: 430rpx;z-index: 99;"></my-radio>
			<view class="" ref="alarmbar" id="alarmbar" style="height:400px;"></view>
		</view>
		<view class="content-box">
			<text class="title">设备负载率统计</text>
			
		</view>
	</view>
  
</template>

<script >
	import { ref, reactive, getCurrentInstance } from 'vue'
	import * as echarts from 'echarts'
	
	export default {
		setup() {
			const { proxy } = getCurrentInstance()
			const userinfo = reactive({})
			proxy.$request('/rexel-api/tenant/detail/user/asset', {
			},"GET").then(res => {
				Object.assign(userinfo, res.data)
			})
			const radioList1 = ['近七天','近半年']
			const warnTypeActive = ref(0)
			const radioChange = (e) => {
				warnTypeActive.value = e
				gainWarnList()
			}
			const gainWarnList = () => {
				let url = ''
				if (warnTypeActive.value === 0) {
					url = '/rexel-api/tenant/detail/alarm/chart/1'
				} else {
					url = '/rexel-api/tenant/detail/alarm/chart/2'
				}
				proxy.$request(url, {
				},"GET").then(res => {
					console.log(res.data)
					let baojingxAxis=res.data.xaxis
					let baojingyAxis=res.data.yaxis
					var myChart = echarts.init(document.getElementById('alarmbar'));
					  // 指定图表的配置项和数据
					var option = {
						tooltip: {
							trigger: 'axis',
						},
						color:'#8CBDEE',
						xAxis: {
							data: baojingxAxis
							// data: ['2022/1', '2022/2', '2022/3', '2022/4', '2022/5', '2022/6']
						},
						 yAxis: {
							// type: 'log',
							type: 'value',
							// 单位颜色
							name: "条",
							nameTextStyle: {
							  color: "#333",
							  nameLocation: "start",
							},
							// 坐标值颜色
							"axisLabel":{
							  color: '#333'
							  // textStyle: { color: '#333'}
							},
							splitLine: {
							  show: false,
							  // 网格线颜色
								lineStyle:{
								color: ['#8E8E8E'],
								width: 0.5,
								type: 'solid'
							  }
							},
						  },
						series: [
						  {
							  
							  name: "报警数",
							  type: "bar",//柱状图
							  // itemStyle: {
								 //  normal: {
									//   barBorderRadius:[5, 5, 0, 0]
								 //  }
							  // },
							  barWidth: 20, // 柱子宽度
							  stack:"Search Engine",
							  emphasis: {//折线图的高亮状态。
								focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
							  },
							  data:baojingyAxis
							  // data: [5, 20, 36, 10, 10, 20]
						  }
						]
					};
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
					
				})
			}
			const alarmbar = ref(null)
			return {
				userinfo,
				alarmbar,
				radioChange,
				gainWarnList,
				radioList1,
			}
		},
		methods:{
			drawalarm() {
				var myChart = echarts.init(this.$refs.alarmbar.$el);
				  // 指定图表的配置项和数据
				var option = {
					tooltip: {
						trigger: 'axis',
					},
					color:'#8CBDEE',
					xAxis: {
						data: this.baojingxAxis
						// data: ['2022/1', '2022/2', '2022/3', '2022/4', '2022/5', '2022/6']
					},
					 yAxis: {
						// type: 'log',
						type: 'value',
						// 单位颜色
						name: "条",
						nameTextStyle: {
						  color: "#333",
						  nameLocation: "start",
						},
						// 坐标值颜色
						"axisLabel":{
						  color: '#333'
						  // textStyle: { color: '#333'}
						},
						splitLine: {
						  show: false,
						  // 网格线颜色
							lineStyle:{
							color: ['#8E8E8E'],
							width: 0.5,
							type: 'solid'
						  }
						},
					  },
					series: [
					  {
						  
						  name: "报警数",
						  type: "bar",//柱状图
						  // itemStyle: {
							 //  normal: {
								//   barBorderRadius:[5, 5, 0, 0]
							 //  }
						  // },
						  barWidth: 20, // 柱子宽度
						  stack:"Search Engine",
						  emphasis: {//折线图的高亮状态。
							focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
						  },
						  data:this.baojingyAxis
						  // data: [5, 20, 36, 10, 10, 20]
					  }
					]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			},
		},
		onShow() {
			this.gainWarnList()
		}
	}
		
   
</script>

<style lang="scss" scoped>
	.wrap{
		min-height: 130vh;
	}
	.baojing{
		position: relative;
	}
	.content-box{
		margin: 30rpx;
		padding: 15rpx;
		background: #fff;
		.title{
			padding: 0px 15rpx ;
			font-weight: bold;
			color: #333333;
		}
		.userbox{
			display: inline-block;
			width: 46%;
			margin: 30rpx 10rpx 0rpx 15rpx;
			padding: 15rpx;
			box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.1);
			border-radius: 4px 4px 4px 4px;
			opacity: 1;
			img{
				width: 50rpx;
				height: 50rpx;
				display: inline-block;
				vertical-align: middle;
			}
			.user_content{
				vertical-align: middle;
				display: inline-block;
				margin-left: 30rpx;
			}
			.userbox_num{
				color: #333;
				font-size: 16rpx;
				padding-bottom: 5rpx;
			}
			.userbox_name{
				color: #999;
				font-size: 16rpx;
			}
		}
	}
  .charts-box {
    width: 100%;
    height: 360rpx;
    position: relative;
    .unit {
      color: #9E9EA6;
      position: absolute;
      font-size: 22rpx;
      &:nth-child(1) {
        left: 40rpx;
        top: 43rpx;
      }
      &:nth-child(2) {
        right: 40rpx;
        top: 43rpx;
      }
    }
  }
</style>