Dynamically add echarts

This time only js and jsp code will be posted

jsp just add a div,

    <div class="fLayout-right-box">
         <hy:layoutArea  width="100%" 
             showborder="false" align="center" id = 'contrastEcharts'>
         </hy:layoutArea>
    </div>

Insert echart:

wherexAxisData = ['00: 00 ', '00: 15', '00: 30 ', '00: 45', '01: 00 ', '01: 15', '01: 30 ', '01: 45' , '02: 00 ', '02: 15', '02: 30 ', '02: 45', '03: 00 ', '03: 15', '03: 30 ', '03: 45', ' 04:00 ', '04: 15', '04: 30 ', '04: 45', '05: 00 ', '05: 15', '05: 30 ', '05: 45', '06: 00 ', '06: 15', '06: 30 ', '06: 45', '07: 00 ', '07: 15', '07: 30 ', '07: 45', '08: 00 ' , '08: 15 ', '08: 30', '08: 45 ', '09: 00', '09: 15 ', '09: 30', '09: 45 ', '10: 00', ' 10:15 ', '10: 30', '10: 45 ', '11: 00', '11: 15 ', '11: 30', '11: 45 ', '12: 00', '12:15', '12:30', '12:45', '13:00', '13:15', '13:30', '13:45', '14:00', '14:15', '14:30', '14:45', '15:00', '15:15', '15:30', '15:45', '16:00', '16:15', '16:30', '16:45', '17:00', '17:15', '17:30', '17:45', '18:00', '18:15', '18:30', '18:45', '19:00', '19:15', '19:30', '19:45', '20:00', '20:15', '20:30', '20:45', '21:00', '21:15', '21:30', '21:45', '22:00', '22:15', '22:30', '22:45', '23:00', '23:15', '23:30', '23:45''13:30', '13:45', '14:00', '14:15', '14:30', '14:45', '15:00', '15:15', '15:30', '15:45', '16:00', '16:15', '16:30', '16:45', '17:00', '17:15', '17:30', '17:45', '18:00', '18:15', '18:30', '18:45', '19:00', '19:15', '19:30', '19:45', '20:00', '20:15', '20:30', '20:45', '21:00', '21:15', '21:30', '21:45', '22:00', '22:15', '22:30', '22:45', '23:00', '23:15', '23:30', '23:45''13:30', '13:45', '14:00', '14:15', '14:30', '14:45', '15:00', '15:15', '15:30', '15:45', '16:00', '16:15', '16:30', '16:45', '17:00', '17:15', '17:30', '17:45', '18:00', '18:15', '18:30', '18:45', '19:00', '19:15', '19:30', '19:45', '20:00', '20:15', '20:30', '20:45', '21:00', '21:15', '21:30', '21:45', '22:00', '22:15', '22:30', '22:45', '23:00', '23:15', '23:30', '23:45'30', '15:45', '16:00', '16:15', '16:30', '16:45', '17:00', '17:15', '17:30', '17:45', '18:00', '18:15', '18:30', '18:45', '19:00', '19:15', '19:30', '19:45', '20:00', '20:15', '20:30', '20:45', '21:00', '21:15', '21:30', '21:45', '22:00', '22:15', '22:30', '22:45', '23:00', '23:15', '23:30', '23:45'30', '15:45', '16:00', '16:15', '16:30', '16:45', '17:00', '17:15', '17:30', '17:45', '18:00', '18:15', '18:30', '18:45', '19:00', '19:15', '19:30', '19:45', '20:00', '20:15', '20:30', '20:45', '21:00', '21:15', '21:30', '21:45', '22:00', '22:15', '22:30', '22:45', '23:00', '23:15', '23:30', '23:45'45', '20:00', '20:15', '20:30', '20:45', '21:00', '21:15', '21:30', '21:45', '22:00', '22:15', '22:30', '22:45', '23:00', '23:15', '23:30', '23:45'45', '20:00', '20:15', '20:30', '20:45', '21:00', '21:15', '21:30', '21:45', '22:00', '22:15', '22:30', '22:45', '23:00', '23:15', '23:30', '23:45'];
var option = {
    title : {
        text : '',
        x : 'left'
    },
    legend : {
        x : 'right',
        data : [ 'Today's load', 'Yesterday's load' ]
    },
    tooltip : {
        trigger : 'axis',
    },
    grid : {
        left : '5%',
        right : '5%',
        bottom : '30',
        containLabel : true
    },
    xAxis: A
        date: xAxisData
    },
    yAxis : {
        splitLine : {
            lineStyle : {
                type : 'dashed'
            }
        },
        scale : true,
        max : 100
    },
    axisLabel : {
        interval : 0
    },
    grid : {
        left : '8%',
        right : '0',
        bottom : '1%',
        containLabel : true
    },
    color : ['#DD4B39', '#359CB6'],
    series : [{
        type : 'line',
        data : []
    }, {
        type : 'line',
        data : []
    }]
};

The following is the js code, which can be written for reference:

function fun () { 
var dataArray = [];
            dataArray = eval(response.getParameter("powerLoad" ));
             var dateArr = eval(response.getParameter("date" ));
             // add echarts div 
            dynamically showTableAndEcharts.init(dataArray);
             // add dynamically to echarts graph data 
            for ( var i = 0; i < dataArray.length; i++ ) {
                 // options[i] = option; 
                option.title.text = treeArray[i].label;
                option.legend.data = dateArr;
                option.series[0].name = dateArr[0];
                option.series[ 1].name = dateArr[1 ];
                 // Add data dynamically 
                option.series[0].data = dataArray[i][0 ];
                option.series[1].data = dataArray[i][1];
                myChart[i] = echarts.init(document.getElementById('echartsDiv' + i));
                myChart[i].setOption(option);
            }
            $(window).resize(function() {
                for (var i = 0; i < dataArray.length; i++) {
                    myChart[i].resize();
                } 
}
 var showTableAndEcharts = {
    init : function(dataArray) {
        $("#contrastEcharts").empty().append(this.layout(dataArray));
    },
    layout : function(dataArray) {
        var html = '';
        if (dataArray.length == 1) {
            var css = 'style = "height: 98%;width: 98%;float: center;border: 1px #ccc solid;margin: 3px; "';
        } else if (dataArray.length == 2) {
            var css = 'style = "height: 98%;width: 45%;float: left;border: 1px #ccc solid;margin: 3px; "';
        } else {
            var css = 'style = "height: 50%;width: 30%;float: left;border: 1px #ccc solid;margin: 3px; "';
        }
        for (var i = 0; i < dataArray.length; i++) {
            html += '<div  ' + css + '  id="echartsDiv' + i + '"></div>';
        }
        return html;
    }
}