欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ECharts动态获取后台传过来的json数据进行多个折线图的显示,折线的数据由后台传过来

程序员文章站 2022-04-14 19:58:30
ECharts动态获取后台传过来的json数据进行多个折线图的显示,折线的数据由后台传过来 ECharts 多个折线图动态获取json数据 效果图如下: js部分: function mychart1(datetime,dateNums1,dateNums2,dateNums3,dateNums4) ......

echarts动态获取后台传过来的json数据进行多个折线图的显示,折线的数据由后台传过来

echarts 多个折线图动态获取json数据

效果图如下:

ECharts动态获取后台传过来的json数据进行多个折线图的显示,折线的数据由后台传过来

 

 

 js部分:

function mychart1(datetime,datenums1,datenums2,datenums3,datenums4) {
    mychart1 = echarts.init(document.getelementbyid('main1'));
    option = {
        title: {
            text: '',
            left: 'left',
            top: '4%',
            textstyle: {
                color: '#000000',
                fontsize: 16
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}'
        },
        legend: {
            data:['湿垃圾收运量','可回收收运量','有毒有害收运量','干垃圾收运量']
        },
        xaxis: {
            type: 'category',
            boundarygap: false,
            name: '天',
            splitline: {
                show: true, //网格线是否显示
                linestyle: {
                    color: '#323b4e' // 修改网格线颜色     
                }
            },
            axisline: {
                //                        symbol: ['none', 'arrow'], //箭头
                linestyle: {
                    color: '#696c72',
                }
            },
            axistick: { //qu刻度线
                show: false
            },
            axislabel: { //x轴时间文字显示不全问题
                interval: 0,
                rotate: 40
            },
            data: datetime
        },
        grid: {
            left: '5%',
            right: '8%',
            bottom: '0%',
            top: '16%',
            containlabel: true
        },
        yaxis: {
            type: 'value',
            //            min: 0, //y轴最小值设置
            //            max: 100, //y轴最大值设置
                                name: 'kg',
            namelocation: 'end',
            nametextstyle: {
                padding: -10,
            },
            splitline: {
                show: true, //网格线是否显示
                linestyle: {
                    color: '#323b4e' // 修改网格线颜色     
                }
            },
            axisline: {
                //                        symbol: ['none', 'arrow'],
                linestyle: {
                    color: '#696c72' //0c3b71
                }
            },
            axistick: {
                show: false
            },
        },
        series: [{
            symbol: 'circle',
            symbolsize: 8,
            itemstyle: {
                normal: {
                    color: "#01ff19",
                    linestyle: {
                        color: "#01ff19",
                    }
                }
            },
            name: '湿垃圾收运量',
            type: 'line',
            data: datenums1
        },{
            symbol: 'circle',
            symbolsize: 8,
            itemstyle: {
                normal: {
                    color: "#31a4ff",
                    linestyle: {
                        color: "#31a4ff",
                    }
                }
            },
            name: '可回收收运量',
            type: 'line',
            data: datenums2
        },{
            symbol: 'circle',
            symbolsize: 8,
            itemstyle: {
                normal: {
                    color: "#f13a30",
                    linestyle: {
                        color: "#f13a30",
                    }
                }
            },
            name: '有毒有害收运量',
            type: 'line',
            data: datenums3
        },{
            symbol: 'circle',
            symbolsize: 8,
            itemstyle: {
                normal: {
                    color: "#c7c7c7",
                    linestyle: {
                        color: "#c7c7c7",
                    }
                }
            },
            name: '干垃圾收运量',
            type: 'line',
            data: datenums4
        }]
    };
    mychart1.setoption(option);
}


function echarsfun1() {
    var param = {
        "name": housename
    }
    var paramstr = $.param(param)
    ajaxget("largescreendisplaycontroller.do?todaytrend&" + paramstr, function(data) {
        var data = json.parse(data)
        if(data) {
            var data = data.data
            console.log(data)
            var datetime = []; //时间
            var datenums1 = []; //湿垃圾
            var datenums2 = []; //可回收
            var datenums3 = []; //有毒有害
            var datenums4 = []; //干垃圾
            //湿垃圾
            $.each(data.yfgarweightmaplist, function (index, item) {
          datetime.push(item.times);    //挨个取出类别并填入类别数组 datenums1.push(item.yfgarweight); }); //可回收 $.each(data.recycleweightmaplist, function (index, item) { datenums2.push(item.recycleweight); }); //有毒有害 $.each(data.youduweightmaplist, function (index, item) { datenums3.push(item.youduweight); }); //干垃圾 $.each(data.otherweightmaplist, function (index, item) { datenums4.push(item.otherweight); }); mychart1(datetime,datenums1,datenums2,datenums3,datenums4) } }) }
后台传过来的json数据格式
后台传过来的json数据格式
{ "msg": "获取成功", "code": 0, "data": { "otherweightmaplist": [{ "times": "2019-11-07", "otherweight": "160" }, { "times": "2019-11-08", "otherweight": "170" }, { "times": "2019-11-09", "otherweight": "165" }, { "times": "2019-11-10", "otherweight": "163" }], "recycleweightmaplist": [{ "times": "2019-11-07", "recycleweight": "0" }, { "times": "2019-11-08", "recycleweight": "0" }, { "times": "2019-11-09", "recycleweight": "0" }, { "times": "2019-11-10", "recycleweight": "0" }], "youduweightmaplist": [{ "times": "2019-11-07", "youduweight": "0" }, { "times": "2019-11-08", "youduweight": "0" }, { "times": "2019-11-09", "youduweight": "0" }, { "times": "2019-11-10", "youduweight": "0" }], "yfgarweightmaplist": [{ "yfgarweight": "156", "times": "2019-11-07" }, { "yfgarweight": "169", "times": "2019-11-08" }, { "yfgarweight": "136", "times": "2019-11-09" }, { "yfgarweight": "137", "times": "2019-11-10" }] } }