动态添加echarts

Posted 2020-11-02 thekiterunner

本次只贴js和jsp代码

jsp只需添加一个div即可，

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

插入echart:

var xAxisData = [‘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‘];
var option = {
    title : {
        text : ‘‘,
        x : ‘left‘
    },
    legend : {
        x : ‘right‘,
        data : [‘今日负荷‘, ‘昨日负荷‘]
    },
    tooltip : {
        trigger : ‘axis‘,
    },
    grid : {
        left : ‘5%‘,
        right : ‘5%‘,
        bottom : ‘30‘,
        containLabel : true
    },
    xAxis : {
        data : 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 : []
    }]
};

一下为js代码，可参考编写：

function fun(){
var dataArray = [];
            dataArray = eval(response.getParameter("powerLoad"));
            var dateArr = eval(response.getParameter("date"));
            //动态添加echarts div
            showTableAndEcharts.init(dataArray);
            //向echarts图中动态添加数据
            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];
                //动态添加数据
                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;
    }
}