在iframe中添加了几个echart 页面,点击一个echart页面之后在点击其他的就会跳出框架?
<div class="page-wrapper mdc-toolbar-fixed-adjust">
        <main class="content-wrapper">
        <div id="page-content">
            <div id="workarea" style="position: absolute; top : 0px; left: 16%; width: 82%; height: 100%;">
                    <iframe style="border-width: 0px; width: 100%; height: 100%;margin-top: 50px;" name="workareaFrame" sandbox="allow-same-origin allow-scripts"></iframe>
            </div>
        </div> <!-- page-content -->
        </main>
    </div>
        <div class="mdc-list-item mdc-drawer-item" href="#" data-toggle="expansionPanel" target-panel="ui-sub-customer">

          <a class="mdc-drawer-link" href="#" >
            <i class="material-icons mdc-list-item__start-detail mdc-drawer-item-icon" aria-hidden="true">track_changes</i>
                 客户管理
            <i class="mdc-drawer-arrow material-icons">arrow_drop_down</i>
          </a>
           <div class="mdc-expansion-panel" id="ui-sub-customer">





            <nav class="mdc-list mdc-drawer-submenu">
              <div class="mdc-list-item mdc-drawer-item">
                <a class="mdc-drawer-link" href="customer.jsp" target="workareaFrame">
                    客户管理
                </a>
              </div>
              <div class="mdc-list-item mdc-drawer-item">
                <a class="mdc-drawer-link" href="customer/Intention.jsp" target="workareaFrame">
                     意向分析
                </a>
              </div>
              <div class="mdc-list-item mdc-drawer-item">
                <a class="mdc-drawer-link" href="customer/intentionDeal.jsp" target="workareaFrame">
                     意向成交
                </a>
              </div>
              <div class="mdc-list-item mdc-drawer-item">
                <a class="mdc-drawer-link" href="customer/userdeal.jsp" target="workareaFrame">
                     员工业绩
                </a>
              </div>
            </nav>
          </div>
        </div>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html style="margin-top: 50px;">
<head>
<base
    href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath }/">
<meta charset="UTF-8">

<script src="workbench/chart/echarts.min.js"></script>
<script src="workbench/chart/jquery-1.11.1-min.js"></script>
</head>
<body>

<div id="main" style="width: 600px;height:400px; color:red">111</div>


<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
            title: {
                text: '意向分析图'
            },
            tooltip: {},
            legend: {
                data:['数量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'bar',
                data: []
            }]
        };
    myChart.setOption(option);

    var name = new Array();
    var nums= new Array();
    $.ajax({
        type:"post",
        async:true,
        url:"cust/barlist.do",
        data:{},
        dataType:"json",
        success:function(data){


            myChart.setOption({
                xAxis: {
                    data: data.intentionlist
                },
                series:[{
                    name:"金额",
                    data:data.numlist,
                    type:'bar',
                }]
            })  
         },
         error:function(){
             alert("图表数据请求失败");
         }


    });

</script>
</body>
</html>

问题解决方法:在echart获取页面,将两个数组定义放到ajax中,可以防止此问题出现

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐