动态添加div，并注入数据

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<style type="text/css">
#main span{
margin-left: 20px;
}
ul {
    list-style: none;
    padding: 0 0;
    margin: 0 0;
}
li {
    margin-top: 10px;
    margin-bottom: 10px;
}
#rootdivAl {
    overflow: hidden;
}
#rootdivAl > div:nth-child(1){
    float: left;
}
#rootdivAl > div:nth-child(2){
    float: left;
}

</style>
<div class="easyui-layout" fit="true">
    <div id=‘rootdivAl‘ class="operations" style="text-align: left;">
        <div data-options="region:‘west‘" style="width:200px;margin-left:20px;margin-top:20px">
            <div>
                <ul>
                    <li><input type="radio"  name="radioDat" value="DAY" checked/> <label >历史</label></li>
                    <li>
                        <span id="temptextU" style="display: -moz-inline-box; display: inline-block;
                             text-align: right">起:
                        </span>
                        <input readonly="readonly" type="text" id="querytime_u" name="querytime_u"
                            style="width: 94px; height: 25px" class="Wdate" value="">
                    </li>
                    <li>
                        <span id="temptextT" style="display: -moz-inline-box; display: inline-block;
                             text-align: right">至:
                        </span>
                        <input type="text" id="querytime_t" name="querytime_t" readonly="readonly"
                        style="width: 94px; height: 25px" class="Wdate" value="">
                    </li>
                    <li><input type="radio"  name="radioDat" value="all" checked/> <label>计算</label></li>
                </ul>
            </div>

            <div>
                <span>对象</span>
                <ul>
                    <li><input type="checkbox" name="boxchec" value="1" checked/>净冻</li>
                    <li><input type="checkbox" name="boxchec" value="2" checked/>冷机<li>
                    <li><input type="checkbox" name="boxchec" value="3" checked/>冷却</li>
                    <li><input type="checkbox" name="boxchec" value="4" checked/>冷冻</li>
                </ul>
            </div>
            <div>
                <span style="display: -moz-inline-box; display: inline-block; margin-top: 15px;
                    margin-left: 10px; margin-right: 10px;">
                    <a href="#" class="easyui-linkbutton" iconCls="icon-search" id="searchBtnCal">
                        <t:mutiLang langKey="common.query" />
                    </a>
                </span>
            </div>
        </div>
        <div data-options="region:‘center‘">
            <div id="containercalcula" style="width:700px;height:800px;">

            </div>
        </div>
    </div>
</div>

<script type="text/javascript"
    src="plug-in/echarts-2.2.7/echarts-all.js">
</script>

<script>
        function calcula() {
            var calculaUrl = "energyEfficiencyAnalysisController.do?eaGraphCount";
            deUrl=getParam(calculaUrl);
            $.ajax({
                url: deUrl,
                dataType: ‘json‘,
                success: function(datas) {
                    //显示趋势图
                    var myChart;
                    var chehox = $("input[name=‘boxchec‘]:checked");
                    var option ;
                    var dataAll;
                    if(chehox.length == 1){
                        $("#containercalcula").height("350px");
                    }else{
                        $("#containercalcula").height("800px");
                    }
                    for(var i = 0; i < chehox.length; i++) {
                        $("#containercalcula").append("<div id=‘div"+i+"‘></div>")

                        $("#div"+i).width($("#containercalcula").width());

                        $("#div"+i).height($("#containercalcula").height()/chehox.length);

                        myChart = echarts.init(document.getElementById(‘div‘+i));

                        var legends = datas.legend[i];
                        var dat = datas.data[i];
                        var sx = datas.xAxis[i];
                        option = getOption(legends,sx,dat);
                        myChart.setOption(option);
                    }
                }
            });
        }

        function getOption(legends,xAxi,dat) {
            var opt= {
                    tooltip: {
                        trigger: ‘axis‘
                    },
                    legend: {
                        data:[legends],
                        x: "center",
                        y: "bottom"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: {
                                show: true,
                                type: [‘line‘, ‘bar‘]
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    xAxis: [{
                        type: ‘category‘,
                        name: ‘(日期)‘,
                        data: xAxi
                    }],
                    yAxis: [{
                        type: ‘value‘,
                        name: ‘(数据)‘
                    }],
                    series: [{
                        name:legends,
                        type: ‘bar‘,
                        data: dat
                    }]
                };
            return opt;
        }
        //数据回传
        function getParam(url) {
            var radioItem = $("input:radio:checked").val();
            var check_val = "";
            var searchType="&searchType=";
            $("input[name=‘boxchec‘]:checked").each(function(index){
                check_val+=$(this).val();
                if(index<$("input[name=‘boxchec‘]:checked").length-1){
                    check_val+="$";
                }
            });
            if(radioItem == "DAY") {
                 url +="&dayStartDate="+$(‘#querytime_u‘).val()
                 +"&dayEndDate="+$(‘#querytime_t‘).val()+"&searchType="+radioItem+"&unitId="+check_val;
            }else {
                 url +="&searchType="+radioItem+"&unitId="+check_val;
            }

            return url;
        };

        function selectChangecalcula() {
            var date = new Date();
            var vyear = date.getFullYear(); //year
            var vmonth = date.getMonth() + 1; //month
            var vday = date.getDate();
            var item = $("input[name=‘radioDat‘]:checked").val();
            if (item == "all") {
                $("#querytime_u").val(vyear + "/" + vmonth + "/" + vday);
                $(‘#querytime_u‘).bind("click", function() {
                    WdatePicker({
                        dateFmt: ‘yyyy/MM/dd‘
                    });
                });
                $("#querytime_t").val(vyear + "/" + vmonth + "/" + vday);
                $(‘#querytime_t‘).bind("click", function() {
                    WdatePicker({
                        dateFmt: ‘yyyy/MM/dd‘
                    });
                });
            }
        }

        /**
            判断时间
        */
        function queryDate() {
            var startDate = $(‘#querytime_u‘).val();
            var endDate = $(‘#querytime_t‘).val();
            if (startDate > endDate) {
                alert("开始时间不能大于结束时间");
                return false;
            }
            calcula();

        }

        $(function() {
            $("input[name=‘radioDat‘]").bind("click",function(){
                console.log($("input[name=‘radioDat‘]:checked").val());
                selectChangecalcula();
            });
            //$(‘#containercalcula‘).css(‘width‘, $(‘#rootdivAl‘).css(‘width‘) * 0.6);
            //$(‘#containercalcula‘).css(‘height‘, window.screen.height * 0.4);
            //注册日期事件
            $(‘#querytime_u‘).val(date_day);
            $(‘#querytime_t‘).val(date_day);

            //查询
            $("#searchBtnCal").click(function() {
                queryDate();
            });
            selectChangecalcula();
            calcula();
        });
</script>