vue使用 v-for循环回来的数据动态绑定id值

<el-main>		
	<el-row :gutter="30" style='height:262px;margin:0px;margin-top: 15px' v-for='(item, index) in infoArr' :key='index'>
		<el-col :span="5" class='w100P h100P t-a_c flex' style='padding-left:0px;overflow-y: scroll;'><div class="grid-content bg-purple bc_fff b-r8 w100P h100P bx info" style="padding:15px 20px;">
			<p class="c_333 fs18">分析</p>
			<p class="c_333 fs14 t-a_l">日期:{{item.apply_time}}</p>
			<p class="c_333 fs14 t-a_l">分析:{{item.results}}</p>
			<p class="c_333 fs14 t-a_l">建议:{{item.proposal}}</p>
		</div></el-col>
		<el-col :span="19" class='w100P h100P'><div class="grid-content bg-purple bc_fff b-r8 w100P h100P">
		
			<div :id="`el_main${index}`" class="h100P">
				   	
			</div>
			
		</div></el-col>
	</el-row>
</el-main>
function cerateEcharts(arr,newArr){
	for(var i=0;i<arr.length;i++){	
			var app = {};
			option = null;
			(function(t,m){
				// console.log(m)
				var dom = document.getElementById("el_main"+i);
				var myChart = echarts.init(dom);
					$.ajax({
			        type: 'POST',
			        url: "http://xxxxxxxxx/watch/Watchmg/getECGData",
			        data: {
			            id:t,
			            performType:"WS",
			            token:"pb6mv08ixrwz7j7p",
			            isShowAll:2
			        },
			        dataType: 'jsonp',
			        success: function (res) {
			            if (res.code == 0) {
			            		var content=res.data.content
			            		// console.log(content)
			            		var L=content.length
			                    myChart.setOption(option = {
							        title: {
							            text: '心电图(申请时间:'+m.apply_time+')',
										left:70,
										top:15,
										textStyle:{
											color:"#333",
											fontWeight:'normal',
											fontSize:16
										}
							        },
							        color:['#4DA1FF'],
							        tooltip: {
							            trigger: 'axis'
							        },
							        xAxis: {
							            data: content.map(function (item,index) {
							                return index+1;
							            })
							        },
							        yAxis: {
							            splitLine: {
							                show: true
							            },
							            min:0,
							            max:300,
							            splitNumber:10,
							            show:false
							        },
							        dataZoom: [{
							            start:0,
							            end:10,
							            maxValueSpan:71,
							            maxValueSpan:385
							        }, {
							            type: 'inside'
							        }],
							        series: {
							            name: '心电图',
							            type: 'line',
							            smooth: true,
							            data: content,
							             label: {
							                normal: {
							                    show: true,
							                    position: 'top'
							                }
							            }
							        }
						    	}); 
						  //   	if (option && typeof option === "object") {
								//     myChart.setOption(option, true);
								// }
			             	}
			         	},
			    	});
			
			})(arr[i],newArr[i])
			
			
		}
	}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值