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);

        }
    });
});