JS嵌入echarts弹窗

1、前端知识

• 涉及后端数据传入前端{{ data|tojson}}；
• 前端判断处理变量；
• 设置弹窗

2、弹窗

1、js部分
<script type="text/javascript">
			document.getElementById('zhezhao').style.display="none";
			function dianwo(){
				document.getElementById('zhezhao').style.display="";
			}
			function hidder(){
				document.getElementById('zhezhao').style.display="none";
			}

</script>

2、弹窗
 <button type="button" onclick="dianwo()">详情</button>
3、弹窗内容    
     <div class="zhezhao" id='zhezhao'>
          <div class="tankuang" >
             <div id="header1">
            <h3><span>该系统15日内的权益变化</span></h3>
     <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
 <div id="main" style="width: 100%;height:600px"></div>

 <div id="header-right" onclick="hidder()">x</div>
  			 </div>
       </div>
    </div>

2.1 弹窗样式

 <style type="text/css">
			body{
				margin: 0px;
			}
			.zhezhao{
				position: fixed;
				left: 0px;
				top: 0px;
				background: black;
				width: 100%;
				height: 100%;
				opacity: 0.9;
			}
			.tankuang{
				position: relative;
				background: #fff;
				width: 50%;
				height: 80%;
				border-radius: 5px;
				margin: 5% auto;
			}
			#header1{
				height: 40px;
			}
			#header-right{
				position: absolute;
				width: 25px;
				height: 25px;
				border-radius: 5px;
				background: red;
				color: #fff;
				right: 5px;
				top: 5px;
				text-align: center;
			}

    </style>

2.2 根据不同得ID弹出不一样得弹窗

1. 获取对应内容ID {{}} 是从后端传入得数据

 <button type="button" onclick="dianwo('{{movie[0]}}')">详情</button>

2、在弹窗得js代码中进行逻辑判断

<script type="text/javascript">
			document.getElementById('zhezhao').style.display="none";
			function dianwo(id){
                console.log('书名====',id);
            data={{score|tojson}};
            console.log('书名====',id,data[0]);
            var x=[];
            var y =[];

            for(var i=0;i<data.length;i++){
                var x1 = [];
                var y1 = [];
                if(data[i][0].indexOf(id)!=-1){
                    x.push(data[i][1]);
                    y.push(data[i][2]);
                    console.log('e',x,y);
                }
}
.......此处为echarts图；传入X1,Y1
				document.getElementById('zhezhao').style.display="";
			}

			function hidder(){
				document.getElementById('zhezhao').style.display="none";
			}

</script>