layui前端框架實現echars折線圖異步加載及彈出框

這幾天寫了一個需求，就是layui框架整合echars折線圖實現動態加載的需求，，網上也有好多案例，，我借鑒了一位博主的分享的代碼，，然后整合的一些

 

首先是body里面的

<div id="addfilepage" style="display: none;">
     <span style="width: 20px;color:blue;">趨勢圖</span>
</div>



接下來是折線圖的配置

function loadTwoLine(assigneename,belongsystem) {

    var submittime1=$("#submittime1").val();
    var submittime2=$("#submittime2").val();
    assigneename=window.encodeURI(window.encodeURI(assigneename));
    belongsystem=window.encodeURI(window.encodeURI(belongsystem));

    var myChart = echarts.init(document.getElementById('TwoLineChart'));
    // 顯示標題，圖例和空的坐標軸
    myChart.setOption({
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis',

        },
        legend: {
            data: []
        },
        calculable: true,
        xAxis: {
            type: 'category',
            boundaryGap: false, //取消左側的間距
            data: []
        },
        yAxis: {
            type: 'value',
            splitLine: { show: false },//去除網格線
            name: ''
        },
        series: [{
            name: '任務數',
            type: 'line',
            symbol: 'emptydiamond',
            color:'blue',//設置折線圖中表示每個坐標點的符號 emptycircle：空心圓；emptyrect：空心矩形；circle：實心圓；emptydiamond：菱形
            data: []
        },
            {
                name: '辦結',
                type: 'line',
                symbol: 'emptydiamond',    //設置折線圖中表示每個坐標點的符號 emptycircle：空心圓；emptyrect：空心矩形；circle：實心圓；emptydiamond：菱形
                data: []
            }]
    });
    myChart.showLoading();    //數據加載完之前先顯示一段簡單的loading動畫
    var testworkload = [];    //類別數組（實際用來盛放X軸坐標值）
    var teststarttime = [];

    $.ajax({
        type: 'get',
        url: "${ctx}/bpmStart/getListWorkingNum2.do?assigneename="+assigneename+"&submittime1="+submittime1+"&submittime2="+submittime2+"&belongsystem="+belongsystem,//請求數據的地址
        dataType: "json",        //返回數據形式為json
        success: function (result) {
            //請求成功時執行該函數內容，result即為服務器返回的json對象

            if (result) {

                var list = result;
                for (var i = 0; i < list.length; i++) {
                    teststarttime.push(list[i].teststarttime);    //遍歷蒸發量並填入數組

                }
                for (var i = 0; i < list.length; i++) {
                    testworkload.push(list[i].testworkload);    //遍歷降水量並填入數組

                }
            }

            myChart.hideLoading();    //隱藏加載動畫
            myChart.setOption({        //加載數據圖表
                xAxis: {
                    data: teststarttime
                },
                series: [{
                    data: testworkload
                }]
            });
        },

        error: function (errorMsg) {
            //請求失敗時執行該函數
            alert("圖表請求數據失敗!");
            myChart.hideLoading();
        },


    });
};

最后是折線圖的彈出框

layui.use([
    'table'], function() {
    var table = layui.table;
    table.on('tool(test)', function (obj) { //test為你table的lay-filter對應的
        if(obj.event === 'reqInfo'){
            window.open("${ctx}/bpmStart/waitToBeDone.do?business_key="+obj.data.businessKey+"&rand="+Math.random())
        }
        var data = obj.data;
        if (obj.event === 'qushitu') {
            index=layer.open({
                type:1,
                title:'測試需求處理趨勢圖',
                shadeClose:true,
                shade:0.8,
                area:['700px','600px'],
                content:$('#myChartShow')
            });
            loadTwoLine(data.assigneename,data.belongsystem);

        }
    });
});